首页
所有分类
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插件 cluetip 关键词注释
Jan 12 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
JavaScript函数详解
Nov 17 Javascript
javascript使用call调用微信API
Dec 15 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
vue全屏事件开发详解
Jun 17 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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
dockerfile(1) SQLite3(1) openEuler(1) EditText(1) filter(1) Tsmoothie(1) TextInputLayout(1) Django(9) Selenium(1) reduce(2)
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
Python实现LRU算法的2种方法
2015/06/24 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
详解python 利用echarts画地图(热力图)(世界地图，省市地图，区县地图)
2019/08/06 Python
Python气泡提示与标签的实现
2020/04/01 Python
新闻专业本科生的自我评价分享
2013/11/20 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
关于感恩的作文
2019/08/26 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python