首页
所有分类
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 相关文章推荐
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
js操作滚动条事件实例
Jan 29 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）
Apr 17 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
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
cudnn(1) RTX 3050 ti(1) 字符画(1) dict(1) 热力图(1) Git(3) hook(1) 脚本(1) callback(1) cudn(1)
You might like
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
Prototype Class对象学习
2009/07/19 Javascript
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
Angular2库初探
2017/03/01 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
python 拼接文件路径的方法
2018/10/23 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
django中瀑布流写法实例代码
2019/10/14 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
西班牙香水和化妆品购物网站：Arenal Perfumerías
2019/03/01 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
临床医师专业个人自我评价范文
2013/11/07 职场文书
先进个人事迹材料
2014/01/25 职场文书
军训自我鉴定100字
2014/02/13 职场文书
分公司经理任命书
2014/06/05 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
职场新人知识：如何制定一份合理的工作计划？
2019/09/11 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
Java实现房屋出租系统详解
2021/10/05 Java/Android
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
Redis基本数据类型List常用操作命令
2022/06/01 Redis