jquery二级下拉导航菜单详解

我心飞翔 分类:实例代码

本章节分享一段简单的代码实例,它使用jquery实现了简单的二级下拉导航菜单效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
*{ 
  margin:0; 
  padding:0; 
} 
.nav{ 
  background-color:#EEEEEE; 
  height:40px; 
  width:450px; 
  margin:0 auto; 
} 
ul{ 
  list-style:none; 
} 
ul li{ 
  float:left; 
  line-height:40px; 
  text-align:center; 
} 
a{ 
  text-decoration:none; 
  color:#000000; 
  display:block; 
  width:90px; 
  height:40px; 
} 
a:hover{ 
  background-color:#666666; 
  color:#FFFFFF; 
} 
ul li ul li{ 
  float:none; 
  background-color:#EEEEEE; 
} 
ul li ul{ 
  display:none; 
} 
ul li ul li a:link,ul li ul li a:visited{ 
  background-color:#EEEEEE; 
} 
ul li ul li a:hover{ 
  background-color:#009933; 
} 
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
  $(".navmenu").mouseover(function () {
    $(this).children("ul").show();
  })
  $(".navmenu").mouseout(function () {
    $(this).children("ul").hide();
  })
})
</script>
</head>
<body>
<div id="nav" class="nav">
  <ul>
    <li><a href="#">犀牛前端部落</a></li>
    <li class="navmenu">
      <a href="#">前端教程</a>
      <ul>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Ajax</a></li>
      </ul>
    </li>
    <li class="navmenu">
      <a href="#">特效下载</a>
      <ul>
        <li><a href="#">pc特效</a></li>
        <li><a href="#">移动特效</a></li>
        <li><a href="#">素材资料</a></li>
      </ul>
    </li>
    <li><a href="#">ES6教程</a></li>
    <li><a href="#">pipipi.net</a></li>
  </ul>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$(function () {}),文档结构完全加载完毕再去执行函数中的代码。

(2).$(".navmenu").mouseover(function () {  

  $(this).children("ul").show();

}),注册mouseover时间处理函数。

规定当鼠标悬浮的时候,能够将当前元素下面的ul元素显示,也就是出现二级下拉菜单。

(3).$(".navmenu").mouseout(function () {

  $(this).children("ul").hide();

}),和上面同样的道理。

规定鼠标离开的时候,隐藏二级下拉菜单。

二.相关阅读:

(1).mouseover可以参阅jQuery mouseover事件一章节。

(2).children()可以参阅jQuery children()一章节。

(3).mouseout可以参阅jQuery mouseout事件一章节。

jquery二级下拉导航菜单详解,这样的场景在实际项目中还是用的比较多的,关于jquery二级下拉导航菜单详解就介绍到这了。

jquery二级下拉导航菜单详解属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容