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 相关文章推荐
javascript Math.random()随机数函数
Nov 04 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
JavaScript实现简单图片切换
Apr 29 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简写功能的方法
2019/11/28 PHP
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
有关Python的22个编程技巧
2018/08/29 Python
python自动化之Ansible的安装教程
2019/06/13 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
python实现从wind导入数据
2019/12/03 Python
python 实现多维数组(array)排序
2020/02/28 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
企业厂长岗位职责
2013/12/17 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
节能环保标语
2014/06/12 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
邹越演讲观后感
2015/06/15 职场文书
初中班干部工作总结
2015/08/10 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
vue3获取当前路由地址
2022/02/18 Vue.js