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 相关文章推荐
js计数器代码
Nov 04 Javascript
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 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在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
python2.7的编码问题与解决方法
2016/10/04 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
Python unittest框架操作实例解析
2020/04/13 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
介绍下Java中==和equals的区别
2013/09/01 面试题
公司合作协议书范本
2014/04/18 职场文书
公开承诺书格式
2014/05/21 职场文书
教师师德考核自我评价
2014/09/13 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
先进个人事迹材料
2014/12/29 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
员工升职自荐信
2015/03/27 职场文书
离婚协议书范文2016
2016/03/18 职场文书
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技