jq导航

做外部前端都会用到导航栏应用 

一般导航应用会鼠标碰到变颜色  或子导航出现 

下面为基本的导航

 

 

 

<div class="header">

<ul style="margin-left:420px;">
<li class="navli">
<a href="#">首页</a>
</li>
<li class="navli">
<a href="#">关于我们</a>
</li>
<li class="navli">
<a href="#">产品展示</a>
<ul style="display:none" ;>
<li class="navli2 ">移动破碎机</li>
<li class="navli2 ">水洗设备</li>
<li class="navli2 ">震动筛</li>
<li class="navli2 ">制砂机</li>
<li class="navli2 ">洗沙机</li>
<li class="navli2 ">脱水筛</li>
</ul>
</li>
<li class="navli">
<a href="#">新闻动态</a>

</li>
<li class="navli">
<a href="#">行业资讯</a>

</li>

<li class="navli">
<a href="#">留言反馈</a>

</li>
<li class="navli">
<a href="#">联系我们</a>

</li>

</ul>
</div>

 

js为

<script>
$(function () {
$(".navli").on('mouseover', showit);   ///鼠标进入范围
$(".navli").on('mouseout', showit1);   ///鼠标离开范围
$(".navli2").on('mouseover', showit);   ///鼠标进入范围
$(".navli2").on('mouseout', showit1);   /// 鼠标离开范围
});

function showit() {
$(this).css("background-color", "yellow");  /// 鼠标进入范围  变色为黄色

$(this).children("ul").css("display", "block");///鼠标进入子导航范围  
}
function showit1() {
$(this).css("background-color", "#333333");///鼠标离开范围   变为原来颜色
$(this).children("ul").css("display", "none");///  鼠标离开子导航范围
}

 

</script>