利用JQuery实现顶部导航栏功能

最新推荐文章于 2023-07-02 21:55:07 发布
最新推荐文章于 2023-07-02 21:55:07 发布
阅读量3.6k 收藏 9
点赞数 1
分类专栏： JQUERY 文章标签： jquery

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

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
xw1985520
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery当当网
06-26
关于当当网网页制作，用的jquery技术，包含 主页、登录、注册、购物登页面
display：table，布局自动分宽度
li3196672779的博客
06-25 2492
Document * { list-style: none; } ul { width: 300px; display: table; } ul li { display: ta
利用JQuery实现复杂的顶部导航栏功能
xw1985520的博客
12-26 1506
今天给大家介绍一下如何利用JQuery实现复杂的顶部导航栏功能，复杂指的是导航栏选项下面显示的是文字+图片的内容。 简单的导航栏我们一般利用多个ul+li进行嵌套使用，可以实现多级的导航栏功能，可是界面相对单一，而且不能展示图片和文字混排的效果，所以今天给大家介绍的就是图片文字混排的导航栏的功能。下面看具体例子来解析：html界面代码： <!DOCTYPE html PUBLIC "-//W3C/
JQuery自定义插件实现顶部导航栏、侧边导航栏
梨柚的博客
09-22 1104
JQuery自定义插件一、效果图二、顶部导航栏三、侧边导航栏四、 总结 一、效果图 顶部导航栏： 侧边导航栏： 二、顶部导航栏 创建插件文件夹，命名随意，里面放插件相关的 css文件,js文件以及demo.html文件，结构目录如下： JQuery插件下载地址：https://jquery.com/download/ 具体源码 demo.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"
JavaScript第5章上机练习2(制作当当网顶部导航)
拂欢
06-09 9323
ps:没有整个页面的效果,只有下拉后显示出来的效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作当当网顶部导航</title> <style type="text/css"> ...
jQuery实现菜单的隐藏和显示
weixin_30455661的博客
07-30 1334
首先我们先制作好菜单的大致框架，然后再利用jQuery对菜单的隐藏和显示属性进行判断，如果是隐藏的就显示，如果是显示的就隐藏 我们先用一个ul写出大概的框架 ul>li*4这是一个简便的写法按tab键就可以实现如下的效果 <ul> <li></li> ...
jQuery导航栏下拉菜单的显示/隐藏 和有关动画的方法
qq_40576178的博客
11-24 3429
jQuery中导航栏下拉的显示和隐藏 有下面几组相对应的方法 1、普通效果（子菜单有点生硬） show() 显示下拉子菜单 hide() 隐藏下拉子菜单 toggle() 智能切换显示/隐藏（自动识别并切换下拉子菜单的显隐状态） 2、滑动效果（子菜单带有动画效果） slideDown() 下拉显示子菜单 slideUp() 收起隐藏子菜单 slideToggle() 智能切换显示/隐藏（自动识别并切换下拉子菜单的显隐状态） 3、淡入淡出效果（子菜单显示/隐藏带有透明度）
Jquery 当当网
qq_36074043的博客
05-06 5190
index.html $(function() { // window.open('open.html'); //随滚动条滚动的可关闭广告窗口 $(window).scroll(function() { var st = $(this).scrollTop() + 50; $("#right").css("
基于jQuery实现顶部导航栏功能
10-20
主要为大家详细介绍了基于jQuery实现顶部导航栏功能，jQuery三级下拉列表导航菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery Waypoints粘性顶部导航栏
11-21
jQuery Waypoints粘性顶部导航栏 jQuery Waypoints粘性顶部导航栏 jQuery Waypoints粘性顶部导航栏 jQuery Waypoints粘性顶部导航栏 jQuery Waypoints粘性顶部导航栏
jQuery实现导航栏头部菜单项点击后变换颜色的方法
10-19
主要介绍了jQuery实现导航栏头部菜单项点击后变换颜色的方法,涉及jQuery响应鼠标事件针对页面元素的遍历及属性变换相关操作技巧,需要的朋友可以参考下
JQuery Mobile实现导航栏和页脚
10-22
导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。本文给大家介绍JQuery Mobile实现导航栏和页脚的相关知识，需要的朋友参考下吧
jquery 动态生成导航栏
weixin_44468853的博客
08-23 923
在使用jquery开发网页的时候，做不到像vue一样引入组件，但是我们的导航栏，还是不能每个页面都写的。要不然当需要修改小部分内容的时候，还得需要一个个文件去改，这样的代码也太不好维护了。所以我们需要使用js来生成导航栏。这里写的比较简单，入门级的，提供大致思路，可以根据你们的使用场景来进行修改。
Jquery实现动态导航栏和轮播导航栏
weixin_34228617的博客
04-13 478
动态导航栏和轮播导航栏的实现思想： 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定，在利用$getJSON(url,data,function)请求方法实现获取springmvc传递的list<map<String,Object>>的值。其中还遇到了浏览器兼容问题，主要是Mozilla Firefox兼容margin属性的值的...
基于jQuery实现侧边栏隐藏和显示导航
qq_43097201的博客
11-08 1951
先上代码（实现思路在最后）： index.html + jQuery： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>折叠式菜单特效</title> <link rel="stylesheet" href="css/menu.c...
JQ 点击当前的显示,其它的隐藏。之菜逼计划
weixin_44936767的博客
04-06 1362
<div class="nav "> <ul> <li> <a id="jian" style="dispay:none;">1</a> <a id="jia">2</a> 干1 </li> <li> <a id="jian" style="dispay:non...
JQuery实现导航栏下拉
weixin_51747920的博客
07-02 532
JQuery实现导航栏下拉、按钮缩放效果
基于pytorch+ResNet50的眼部疾病图片分类源码+文档说明.zip
最新发布
04-24
详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；
jquery实现动态导航栏
05-22
可以使用 jQuery 来实现动态导航栏。下面是一个简单的示例： HTML 代码： ```html <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值