收藏
批改狀態(tài)：合格
老師批語：
案例所用知識(shí)點(diǎn)：
layui字體圖標(biāo)：<i class="layui-icon layui-icon-down"></i>
jq的hover事件：$().hover(function(){//鼠標(biāo)劃上時(shí)事件},function(){//鼠標(biāo)劃走時(shí)事件})
jq動(dòng)畫：$().animate(params,[speed],[easing],[fn])
* params:一組包含作為動(dòng)畫屬性和終值的樣式屬性和及其值的集合
* speed:三種預(yù)定速度之一的字符串("slow","normal", or "fast")或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)
* easing:要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing". fn:在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。
jq的滑上、滑下效果：$().slideUp() $().slideDown()
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.24 導(dǎo)航條</title>
<link rel="stylesheet" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201809030202">
<script src="//layui.hcwl520.com.cn/layui/layui.js?v=201809030202"></script>
<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
<style>
*{margin: 0;padding: 0;}
.search{background: rgba(224, 224, 224, 0.6);text-align: center;padding: 10px 0;position: relative;box-shadow: 2px 0 3px #ddd;position: relative;top: -45px;}
.search form{background: #fff;display: inline-block;width: 960px;padding: 0 10px;height: 30px;line-height: 30px;border-radius: 3px;}
.search form input{float: left;height: inherit;border: none;width: 98%;}
.search form i{float: right;}
.down{position: absolute;top: 48px;background: #ffbc43;border-radius: 50%;padding: 5px;}
.down i{font-size: 30px;}
.box{width: 980px;margin: 30px auto;text-align: center;}
.nav{margin: 20px auto;background: #e4e4e4;line-height: 30px;display: inline-block;position: relative;}
.nav li{float: left;width: 90px;}
.nav li a{display: block;}
.nav1{position: relative;}
.nav1 ul{position: absolute;right: 0;top: 30px;display: none;}
.nav1 ul li{float: none;background: #e4e4e4;border-bottom: 2px solid #fff;}
.nav1 li i{position: absolute;top: 0px;right: 10px;font-size: 12px;}
.border{height: 2px;background: orange;position: absolute;width: 90px;left: 0;bottom: 0;}
</style>
</head>
<body>
<!-- 搜索框 -->
<div class="search">
<form action="">
<input type="text" name="search" placeholder="# 請(qǐng)輸入關(guān)鍵詞搜索 #" /><span><i class="layui-icon layui-icon-search"></i></span>
</form>
<span id="down" class="down"><i class="layui-icon layui-icon-tree"></i></span>
</div>
<!-- 導(dǎo)航 -->
<div class="box">
<ul class="nav">
<li><a href="" >要聞</a></li>
<li><a href="" >國(guó)際</a></li>
<li><a href="" >國(guó)內(nèi)</a></li>
<li><a href="" >社會(huì)</a></li>
<li><a href="" >軍事</a></li>
<li><a href="" >娛樂</a></li>
<li><a href="" >體育</a></li>
<li><a href="" >汽車</a></li>
<li><a href="" >科技</a></li>
<li><a href="" >其他</a></li>
</ul>
<ul class="nav">
<li><a href="" >要聞</a></li>
<li><a href="" >國(guó)際</a></li>
<li><a href="" >國(guó)內(nèi)</a></li>
<li><a href="" >社會(huì)</a></li>
<li><a href="" >軍事</a></li>
<li><a href="" >娛樂</a></li>
<li><a href="" >體育</a></li>
<li><a href="" >汽車</a></li>
<li><a href="" >科技</a></li>
<li><a href="" >其他</a></li>
<div class="border"></div>
</ul>
<ul class="nav nav1">
<li><a href="" >要聞</a></li>
<li><a href="" >國(guó)際</a></li>
<li><a href="" >國(guó)內(nèi)</a></li>
<li><a href="" >社會(huì)</a></li>
<li><a href="" >軍事</a></li>
<li><a href="" >娛樂</a></li>
<li><a href="" >體育</a></li>
<li><a href="" >汽車</a></li>
<li><a href="" >科技</a></li>
<li><a href="" >其他</a><i class="layui-icon layui-icon-down"></i>
<ul>
<li><a href="">哈哈</a></li>
<li><a href="">嘿嘿</a></li>
<li><a href="">呵呵</a></li>
<li><a href="">吼吼</a></li>
</ul>
</li>
</ul>
</div>
<script>
$(function(){
// 導(dǎo)航效果 鼠標(biāo)劃上搜索框下拉
$('.search').hover(function(){
$('.search').find('input[name="search"]').focus();
$(this).stop().animate({top:'0'});
},function(){
$('.search').find('input[name="search"]').blur();
$(this).stop().animate({top:'-48px'});
})
// 第一條導(dǎo)航效果 鼠標(biāo)劃上背景變色
$('.box .nav').eq(0).children('li').hover(function(){
$(this).find('a').css({'background':'orange','color':'#fff'});
},function(){
$(this).find('a').css({'background':'','color':''});
})
// 第二條導(dǎo)航 鼠標(biāo)劃上下面的邊框跟著動(dòng)
$('.box .nav').eq(1).children('li').hover(function(){
var left = $(this).index()*$(this).width()+'px';
$('.border').stop().animate({left: left});
},function(){
$('.border').stop().animate({left:'0'});
})
// 第三條導(dǎo)航 帶有子導(dǎo)航
$('.nav1 li').hover(function(){
$(this).find('ul').slideDown();
$(this).find('i').attr('class','layui-icon layui-icon-up');
},function(){
$(this).find('ul').slideUp();
$(this).find('i').attr('class','layui-icon layui-icon-down');
})
})
</script>
</body>
</html>效果圖：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)