首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onDecember 27, 2016

今天给大家介绍一下，如何利用jQuery实现顶部导航栏功能。其实原理很简单就是利用css和JQuery样式选择器实现的。

下面举个例子具体介绍一下如何这些功能，案例如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery三级下拉列表导航菜单</title>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<style type="text/css">
*{margin: 0; padding: 0;}
body{ font-size: 12px; }
li{ list-style: none;}
ul.nav li{ width: 200px; text-align:center;}
ul.nav > li{ float: left; margin-right:10px;}
ul.nav li h3{height: 40px; line-height: 40px;}
ul.nav > li > h3{ background: #72a7ff;}
ul.nav > li > ul > li h3{ background: #ffd9d9;}
ul.nav > li h3:hover,.choice{ background: #ffc0c0!important;}
ul > li > ul{ display: none;}
ul > li.on > ul{ display: block;}
ul.nav li{ position: relative;}
ul.nav > li > ul > li ul{ position: absolute; top: 0; right: -200px;}
ul.nav span.sub{ position: absolute; display: block; right:10px; top: 0; width: 10px; height: 40px; background: url(images/arrows.png) no-repeat center center;}
</style>

<script type="text/javascript">
 $(document).ready(function() {
  $("ul.nav li").hover(function(){
   $(this).addClass("on");

  },
  function(){
   $(this).removeClass("on");

  })
 });

 $(document).ready(function() {
  $("ul.nav li").hover(function(){
   $(this).parent("ul").siblings("h3").addClass("choice");

  },
  function(){
   $(this).parent("ul").siblings("h3").removeClass("choice");
  })
 });

 $(document).ready(function() {  
   if ($("ul.nav li").find("ul") .html()!="") {
    $("ul.nav li").parent("ul").siblings("h3").append("<span class='sub'></span>");    
   }
 });
</script>


</head>
<body>
<ul class="nav">
 <li><h3>我的网站</h3>
 <ul>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3>
    <ul>
    <li><h3>4级分类</h3>
     <ul>
     <li><h3>5级分类</h3></li>
     <li><h3>5级分类</h3></li>
     <li><h3>5级分类</h3></li>
     <li><h3>5级分类</h3></li>
     </ul>
    </li>
    <li><h3>4级分类</h3></li>
    <li><h3>4级分类</h3></li>
    <li><h3>4级分类</h3></li>
    </ul>
   </li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
 </ul>
 </li>
 <li><h3>我的网站</h3>
 <ul>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
 </ul>
 </li>
 <li><h3>我的网站</h3>
 <ul>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
 </ul>
 </li>
 <li><h3>我的网站</h3>
 <ul>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
  <li><h3>2级分类</h3>
   <ul>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   <li><h3>3级分类</h3></li>
   </ul>
  </li>
 </ul>
 </li>
</ul>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

xw1985520

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

Javascript 相关文章推荐
Javascript模块模式分析
May 16 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 #Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 #Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 #Javascript
js点击任意区域弹出层消失实现代码
Dec 27 #Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 #Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 #Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 #Javascript
Word(2) Get(1) 二维码(2) openGauss(1) 日志(1) 条码(1) Post(1) 延时任务(1) JDBC(3) 太阳码(1)
You might like
php调用C代码的实现方法
2014/03/11 PHP
PHP的全局错误处理详解
2016/04/25 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
美国购车网站：TrueCar
2016/10/19 全球购物
英国最大的线上保健品零售商之一：Vitamin Planet
2016/12/01 全球购物
英国领先的男装设计师服装购物网站：Mainline Menswear
2018/02/04 全球购物
Contém1g官网：巴西彩妆品牌
2020/01/17 全球购物
中秋节祝酒词
2015/08/12 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers