脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery实现二级下拉菜单效果

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

 更新时间：2016年02月01日 10:41:07   作者：gogoggo  
这篇文章主要介绍了jQuery实现二级下拉菜单效果的相关资料,二级下拉菜单在实际应用中非常的常见，比如企业网站的产品分类，或者部门分类等等，需要的朋友可以参考下

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

代码如下：

<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 Form表单取值的方法

    jQuery Form表单取值的方法

    这篇文章主要介绍了jQuery Form表单取值的方法，之前js取form表单的值都是一个一个的取，数量一多之后容易出错而且烦透了。具体jq form表单取值方法，大家通过本文学习下吧
    2017-01-01
  • 基于jQuery实现顶部导航栏功能

    基于jQuery实现顶部导航栏功能

    这篇文章主要为大家详细介绍了基于jQuery实现顶部导航栏功能，jQuery三级下拉列表导航菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jquery简单插件制作(fn.extend)完整实例

    jquery简单插件制作(fn.extend)完整实例

    这篇文章主要介绍了jquery简单插件制作(fn.extend)方法,结合完整实例形式分析了jQuery fn.extend扩展插件的实现技巧,需要的朋友可以参考下
    2016-05-05
  • Hallo.js基于jQuery UI所见即所得的Web编辑器

    Hallo.js基于jQuery UI所见即所得的Web编辑器

    Hallo.js是一个简单的富文本编辑器，基于jQuery UI的部件，利用HTML5的contentEditable功能实现了即时编辑功能，其主要目的是为了提供良好的书写体验，对Hallo.js感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)

    jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)

    这篇文章主要介绍了jQuery模拟360浏览器切屏效果幻灯片,涉及jQuery响应鼠标事件动态操作页面元素样式的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2016-01-01
  • 详解jQuery移动页面开发中的ui-grid网格布局使用

    详解jQuery移动页面开发中的ui-grid网格布局使用

    这篇文章主要介绍了jQuery移动页面开发中的ui-grid网格布局使用,以讲解多列页面布局方式为主,需要的朋友可以参考下
    2015-12-12
  • jQuery实现表单动态添加数据并提交的方法

    jQuery实现表单动态添加数据并提交的方法

    这篇文章主要介绍了jQuery实现表单动态添加数据并提交的方法,结合实例形式总结分析了jQuery针对存在form表单的添加、提交,不存在form表单的添加、提交,ajax、非ajax形式提交等数据添加与表单提交操作技巧,需要的朋友可以参考下
    2018-07-07
  • 基于jquery扩展漂亮的下拉框可以二次修改

    基于jquery扩展漂亮的下拉框可以二次修改

    以往我在使用下拉框控件老是为了样式丑陋而烦恼，现在分享这个控件，喜欢的朋友可以进行二次修改，达到你想要的效果
    2013-11-11
  • jquery获取节点名称

    jquery获取节点名称

    这篇文章主要介绍了jquery获取节点名称的相关资料,需要的朋友可以参考下
    2015-04-04
  • jQuery实现响应鼠标背景变化的动态菜单效果代码

    jQuery实现响应鼠标背景变化的动态菜单效果代码

    这篇文章主要介绍了jQuery实现响应鼠标背景变化的动态菜单效果代码,涉及jquery鼠标mouseover事件操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08

最新评论