jquery实现二级导航下拉菜单效果


Posted in Javascript onDecember 18, 2015

下拉菜单实现很简单,纯css也能实现,但是我不擅长,用jquery也就两行代码,于是就用jquery+css实现简单二级下拉菜单导航,分享给大家供大家参考,具体内容如下

运行效果图:

jquery实现二级导航下拉菜单效果

具体代码:
第一步:确定导航的html格式

<ul id="nav"> 
        <li><a href="#">首页</a> 
          <ul> 
            <li><a href="#">PHP编程</a></li> 
            <li><a href="#">JAVA编程</a></li> 
            <li><a href="#">RGB对照表</a></li> 
            <li><a href="#">颜色搭配技巧</a></li> 
          </ul> 
        </li> 
        <li><a href="#">栏目一</a> 
          <ul> 
            <li><a href="#">PHP编程</a></li> 
            <li><a href="#">JAVA编程</a></li> 
            <li><a href="#">RGB对照表</a></li> 
            <li><a href="#">颜色搭配技巧</a></li> 
          </ul> 
        </li> 
<ul>

第二步:CSS实现导航效果        

#nav { 
        line-height: 24px; list-style-type: none; background:#666; 
      } 
      #nav a { 
        display: block; width: 100px; text-align:center; 
      } 
      #nav a:link { 
        color:#666; text-decoration:none; 
      } 
      #nav a:visited { 
        color:#666;text-decoration:none; 
      } 
      #nav a:hover { 
        color:#FFF;text-decoration:none;font-weight:bold; 
      } 
      #nav li { 
        float: left; width: 100px; background:#CCC; 
      } 
      #nav li a:hover{ 
        background:#999; 
      } 
      #nav li ul { 
        line-height: 27px; list-style-type: none;text-align:left; width: 180px; position: absolute;display: none;
      } 
      #nav li ul li{ 
        float: left; width: 180px; 
        background: #F6F6F6; 
      } 
      #nav li ul a{ 
        display: block; width: 156px;text-align:left;padding-left:24px; 
      } 
      #nav li ul a:link { 
        color:#666; text-decoration:none; 
      } 
      #nav li ul a:visited { 
        color:#666;text-decoration:none; 
      } 
      #nav li ul a:hover { 
        color:#F3F3F3;text-decoration:none;font-weight:normal; 
      }

第三步:jquery实现下拉隐藏效果     

$(function() {
        $("#nav li").hover(
            function() {
              $(this).find("ul").show(100);
            },
            function() {
              $(this).find("ul").hide(300);
            }
        );
      });

希望本文所述对大家学习javascript程序设计有所帮助,教大家通过jquery实现二级导航下拉菜单效果。

Javascript 相关文章推荐
JQuery跨Iframe选择实现代码
Aug 19 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
angularJS提交表单(form)
Feb 09 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
学习jQuey中的return false
Dec 18 #Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 #Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 #Javascript
javascript实现保留两位小数的多种方法
Dec 18 #Javascript
原生js实现图片轮播特效
Dec 18 #Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 #Javascript
浏览器兼容性问题大汇总
Dec 17 #Javascript
You might like
php获取地址栏信息的代码
2008/10/08 PHP
mysql limit查询优化分析
2008/11/12 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
php事件驱动化设计详解
2016/11/10 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
软件测试面试题
2014/01/05 面试题
中间件分为哪几类
2012/03/14 面试题
后勤主管工作职责
2013/12/07 职场文书
党支部工作总结2015
2015/04/01 职场文书
庭外和解协议书
2016/03/23 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
介绍一下28个JS常用数组方法
2022/05/06 Javascript