首页
所有分类
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 相关文章推荐
JQuery live函数
Dec 24 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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
访问日志(2) 缓存(3) 策略(1) 连接数(1) PV(1) ipv6(1) 内存(1) 线程(1) 弱口令(1) 事务(5)
You might like
如何分别全角和半角以避免乱码
2006/10/09 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
jQuery Tab插件 用于在Tab中显示iframe，附源码和详细说明
2011/06/27 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
js实现抽奖效果
2017/03/27 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
详解jquery和vue对比
2019/04/16 jQuery
浅谈编码,解码,乱码的问题
2016/12/30 Python
python设置值及NaN值处理方法
2018/07/03 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
Python帮你识破双11的套路
2019/11/11 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
python导入库的具体方法
2020/06/18 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
南非最受欢迎的时尚品牌：MRP
2016/09/18 全球购物
2015秋季运动会通讯稿
2015/07/18 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang