编程 Javascript

基于jQuery实现二级下拉菜单效果

Posted in Javascript onFebruary 01, 2016

本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的，当然还有更为复杂的二级菜单，不过先学会如何制作简单的，分享给大家供大家参考，具体内容如下

代码如下：

<html>
<head>
<meta charset=" utf-8">
<title>下拉菜单</title>
<style type="text/css">
nav a{ 
 text-decoration:none; 
} 
nav>ul>li{ 
 float:left; 
 text-align:center; 
 padding:0 0.5em;
 width:120px; 
}
nav li ul.sub-menu{ 
 display:none; 
 padding-left:0 !important; 
} 
.sub-menu li{color:white;} 
.sub-menu li:hover{background-color:black;} 
.sub-menu li:hover a{color:white;} 
ul{list-style: none;} 
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
 $('.box> li').hover(function(){ 
  $(this).find('.sub-menu').css('display', 'block'); 
 },function(){ 
  $(this).find('.sub-menu').css('display', 'none'); 
 }); 
}); 
</script> 
</head>
<body>
<nav>
 <ul class="box">
  <li><a href="#">前端专区</a>
   <ul class="sub-menu">
    <li><a href="#">jquery教程</a></li>
    <li><a href="#">css教程</a></li>
    <li><a href="#">js教程</a></li>
   </ul>
  </li>
  <li><a href="#">资源专区</a>
   <ul class="sub-menu">
    <li><a href="#">电脑模板下载</a></li>
    <li><a href="#">手机模板下载</a></li>
    <li><a href="#">特效下载</a></li>
   </ul>
  </li>
  <li><a href="#">交流专区</a>
   <ul class="sub-menu">
    <li><a href="#">运营交流</a></li>
    <li><a href="#">seo优化</a></li>
    <li><a href="#">站长交流</a></li>
   </ul>
  </li>
 </ul>
</nav>
</body>
</html>

希望本文所述对大家学习jquery程序设计有所帮助。

基于jQuery实现二级下拉菜单效果

- Author -

gogoggo

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

清华大学出版的事半功倍系列 javascript全部源代码

May 04 Javascript

javascript中的prototype属性实例分析说明

Aug 09 Javascript

jquery方法+js一般方法+js面向对象方法实现拖拽效果

Aug 30 Javascript

js 判断文件类型并控制表单提交示例代码

Nov 14 Javascript

实现非常简单的js双向数据绑定

Nov 06 Javascript

Bootstrap入门书籍之（四）菜单、按钮及导航

Feb 17 Javascript

js 去掉字符串前后空格实现代码集合

Mar 25 Javascript

jQuery扇形定时器插件pietimer使用方法详解

Jul 18 jQuery

js表单序列化判断空值的实例

Sep 22 Javascript

Node.js 利用cheerio制作简单的网页爬虫示例

Mar 01 Javascript

在vue项目中,将juery设置为全局变量的方法

Sep 25 Javascript

用JS实现飞机大战小游戏

Jun 09 Javascript

基于JavaScript判断浏览器到底是关闭还是刷新(超准确)

Feb 01 #Javascript

理解javascript中的严格模式

Feb 01 #Javascript

浅析JavaScript作用域链、执行上下文与闭包

Feb 01 #Javascript

jQuery 3.0 的变化及使用方法

Feb 01 #Javascript

jQuery与Ajax以及序列化

Feb 01 #Javascript

js格式化输入框内金额、银行卡号

Feb 01 #Javascript

javascript嵌套函数和在函数内调用外部函数的区别分析

Jan 31 #Javascript