首页
所有分类
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 相关文章推荐
js 颜色选择器（兼容firefox）
Mar 05 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
js querySelector() 使用方法
Dec 21 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
微信小程序实现watch监听
Jun 04 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
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
实习报告(1) 原理(1) 探测器(1) 电路(15) 频偏(1) 鉴频器(1) 频率(1) 发烧友(1) 灵敏度(1) AM(1)
You might like
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python实现扫码工具的示例代码
2020/10/09 Python
大学生村官演讲稿
2014/04/25 职场文书
政府法律服务方案
2014/06/14 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
广播稿：校园广播稿范文
2019/04/17 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers