五、JQuery制作页面导航

最新推荐文章于 2024-01-06 09:28:35 发布
最新推荐文章于 2024-01-06 09:28:35 发布
阅读量365 收藏
点赞数 1
分类专栏： JQuery
原文链接：https://www.jianshu.com/p/e9a4b5fdc86e
版权

前言：本篇文章是作者在B站学习JQuery视频的笔记
视频传送门：https://www.bilibili.com/video/BV1vD4y1S7SG?p=33&spm_id_from=pageDriver

文章目录

一、普通二级下拉菜单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>普通下拉菜单</title>
        <style type="text/css">
            *{margin: 0px; padding: 0px;}
            #menu{ height: 35px; background-image: url(img/menubg.jpg);}
            #menu ul{ list-style-type: none;}
            #menu li{ height: 35px; line-height: 35px;}
            #menu a{ display: block; padding: 0px 30px; 
            text-decoration: none; font-size: 14px; font-weight: bold; color: black;}
            #menu>ul>li{float: left; position: relative;}        //一级relative，二级absolute
            #menu>ul>li>ul{ display: none; position: absolute; left: 0px; background-color:ghostwhite}
            #menu>ul>li>ul>li{ clear: both;}
            #content{ background-color: gainsboro; text-align: center; padding: 200px; 
            font-size:50px; font-weight: bold;}
            .lihover{background-color: gray; }
            .lihover a{color: white;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#menu>ul>li").mouseover(function(){
                    $(this).children("ul").stop().slideDown(300);
                })
                $("#menu>ul>li").mouseleave(function(){
                    $(this).children("ul").stop().slideUp(300);
                })
                $("#menu>ul>li>ul>li").mouseover(function(){
                    $(this).addClass("lihover");
                })
                $("#menu>ul>li>ul>li").mouseleave(function(){
                    $(this).removeClass("lihover");
                })              
            })

        </script>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li>
                    <a href="javascript:void(0);">推荐分类</a>
                    <ul>
                        <li><a href="javascript:void(0);">英雄联盟</a></li>
                        <li><a href="javascript:void(0);">王者荣耀</a></li>
                        <li><a href="javascript:void(0);">绝地求生</a></li>
                        <li><a href="javascript:void(0);">二次元</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">游戏竞技</a>
                    <ul>
                        <li><a href="javascript:void(0);">英雄联盟</a></li>
                        <li><a href="javascript:void(0);">绝地求生</a></li>
                        <li><a href="javascript:void(0);">刺激战场</a></li>
                        <li><a href="javascript:void(0);">QQ飞车</a></li>
                        <li><a href="javascript:void(0);">怪物猎人</a></li>
                        <li><a href="javascript:void(0);">炉石传说</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">娱乐天地</a>
                    <ul>
                        <li><a href="javascript:void(0);">颜值</a></li>
                        <li><a href="javascript:void(0);">星娱</a></li>
                        <li><a href="javascript:void(0);">二次元</a></li>
                        <li><a href="javascript:void(0);">户外</a></li>
                        <li><a href="javascript:void(0);">音乐电台</a></li>
                    </ul>               
                </li>
                <li>
                    <a href="javascript:void(0);">科技教育</a>
                    <ul>
                        <li><a href="javascript:void(0);">鱼教</a></li>
                        <li><a href="javascript:void(0);">数码科技</a></li>
                        <li><a href="javascript:void(0);">军事</a></li>
                        <li><a href="javascript:void(0);">财经</a></li>
                    </ul>           
                </li>
                <li>
                    <a href="javascript:void(0);">语音直播</a>
                    <ul>
                        <li><a href="javascript:void(0);">FM233</a></li>
                        <li><a href="javascript:void(0);">音乐电台</a></li>
                        <li><a href="javascript:void(0);">娱乐互动</a></li>
                        <li><a href="javascript:void(0);">情感调频</a></li>
                    </ul>               
                </li>
                <li><a href="javascript:void(0);">其他分类</a></li>
            </ul>
        </div>
        <div id="content">
            我是网页的主要内容
        </div>
    </body>
</html>

二、无限级下拉菜单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>普通下拉菜单-三级菜单</title>
        <style type="text/css">
            *{margin: 0px; padding: 0px;}
            /*一级*/
            #menu{ height: 35px; background-image: url(img/menubg.jpg);}
            #menu>ul{ width: 1000px;}
            #menu ul{ list-style-type: none;}
            #menu li{ height: 35px; line-height: 35px; position: relative;}
            #menu a{ display: block; padding: 0px 30px; text-decoration: none; 
            font-size: 14px; font-weight: bold; color: black;}
            #menu>ul>li{float: left; }
            /*二级*/
            #menu>ul>li>ul{ display: none; position: absolute; left: 0px; background-color:ghostwhite}
            #menu>ul>li>ul>li{ clear: both;}
            #content{ background-color: gainsboro; text-align: center; padding: 200px; 
            font-size:50px; font-weight: bold;}
            /*三级或更多级*/
            #menu>ul>li>ul>li ul{ position: absolute; top: 0px; width: 100%;
            background-color:ghostwhite; display: none;}
            #menu>ul>li>ul>li li{clear: both;}
            
            .lihover{background-color: gray; }
            .lihover a{color: white;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                //二级
                $("#menu>ul>li").mouseover(function(){
                    $(this).children("ul").stop().slideDown(300);
                })
                $("#menu>ul>li").mouseleave(function(){
                    $(this).children("ul").stop().slideUp(300);
                })
                //三级
                $("#menu>ul>li>ul li").mouseover(function(){
                    //判断菜单应该在左边还是右边显示出来
//                  if($(this).offset().left + $(this).width() > $(window).width()-50)
//                      $(this).children("ul").css("left","-" + $(this).width() + "px");
//                  else
//                      $(this).children("ul").css("left",$(this).width() + "px");
                    
                    $(this).children("ul").css("left",$(this).width() + "px");
                    $(this).children("ul").stop().slideDown(300);
                })          
                $("#menu>ul>li>ul li").mouseleave(function(){
                    $(this).children("ul").stop().slideUp(300);
                })  
                //li高亮显示效果
                $("#menu>ul>li>ul li").mouseover(function(){
                    $(this).addClass("lihover");
                })
                $("#menu>ul>li>ul li").mouseleave(function(){
                    $(this).removeClass("lihover");
                })              
            })

        </script>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li>
                    <a href="javascript:void(0);">推荐分类</a>
                    <ul>
                        <li><a href="javascript:void(0);">英雄联盟</a></li>
                        <li><a href="javascript:void(0);">王者荣耀</a></li>
                        <li><a href="javascript:void(0);">绝地求生</a></li>
                        <li><a href="javascript:void(0);">二次元</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">游戏竞技</a>
                    <ul>
                        <li>
                            <a href="javascript:void(0);">网游竞技</a>
                            <ul>
                                <li><a href="javascript:void(0);">英雄联盟</a></li>
                                <li><a href="javascript:void(0);">堡垒之夜</a></li>
                                <li><a href="javascript:void(0);">DOTA2</a></li>
                                <li><a href="javascript:void(0);">穿越火线</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0);">单击热游</a>
                            <ul>
                                <li><a href="javascript:void(0);">绝地求生</a></li>     
                                <li><a href="javascript:void(0);">战地风云</a></li>
                                <li><a href="javascript:void(0);">NBA2k</a></li>
                                <li><a href="javascript:void(0);">全面战争</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0);">手游休闲</a>
                            <ul>
                                <li><a href="javascript:void(0);">刺激战场</a></li>
                                <li><a href="javascript:void(0);">王者荣耀</a></li>
                                <li><a href="javascript:void(0);">QQ飞车</a></li>
                                <li><a href="javascript:void(0);">狼人杀</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">娱乐天地</a>
                    <ul>
                        <li><a href="javascript:void(0);">颜值</a></li>
                        <li><a href="javascript:void(0);">星娱</a></li>
                        <li><a href="javascript:void(0);">二次元</a></li>
                        <li><a href="javascript:void(0);">户外</a></li>
                        <li><a href="javascript:void(0);">音乐电台</a></li>
                    </ul>               
                </li>
                <li>
                    <a href="javascript:void(0);">科技教育</a>
                    <ul>
                        <li><a href="javascript:void(0);">鱼教</a></li>
                        <li><a href="javascript:void(0);">数码科技</a></li>
                        <li><a href="javascript:void(0);">军事</a></li>
                        <li><a href="javascript:void(0);">财经</a></li>
                    </ul>           
                </li>
                <li>
                    <a href="javascript:void(0);">语音直播</a>
                    <ul>
                        <li><a href="javascript:void(0);">FM233</a></li>
                        <li><a href="javascript:void(0);">音乐电台</a></li>
                        <li><a href="javascript:void(0);">娱乐互动</a></li>
                        <li><a href="javascript:void(0);">情感调频</a></li>
                    </ul>               
                </li>
                <li><a href="javascript:void(0);">其他分类</a></li>
            </ul>
        </div>
        <div id="content">
            我是网页的主要内容
        </div>
    </body>
</html>

三、水平伸缩菜单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>水平伸缩菜单</title>
        <style type="text/css">
            *{margin: 0px; padding: 0px; font-size: 12px;}
            #menu ul{ list-style-type: none;}
            #menu{margin-left:8px;width: 150px;}
            #menu li{width: 52px; clear: both; height: 52px; line-height: 52px; 
            margin-top: 20px; float: right; overflow: hidden;}
            #menu li,#menu img{ vertical-align: middle;}
            #menu a{ color: coral; font-weight: bold; text-decoration: none; font-size: 22px;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#menu>ul>li").mouseover(function(){
                    $(this).stop().animate({"width":"150px"},200);
                })
                $("#menu>ul>li").mouseleave(function(){
                    $(this).stop().animate({"width":"52px"},200);
                })              
            })

        </script>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li><a href="#"><img src="img/home.png" alt="" width="50" height="50" border="0"/> Home</a></li>
                <li><a href="#"><img src="img/about.png" alt="" width="50" height="50" border="0"/> About</a></li>
                <li><a href="#"><img src="img/contact.png" alt="" width="50" height="50" border="0"/> Contact</a></li>              
            </ul>
        </div>
    </body>
</html>

四、TreeView菜单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>TreeView菜单</title>
        <style type="text/css">
            *{margin: 0px; padding: 0px; font-size: 12px;}
            #menu{margin-left: 26px;}
            #menu ul{ list-style-type: none; clear: both;}
            #menu ul a{ text-decoration: none; color: black;}
            #menu li{line-height: 26px; clear: both; cursor:pointer}
            #menu ul>li ul{display:none; margin: 0px; padding: 0px;}
            .mypage{ background: url(img/page.png) no-repeat left 8px; padding-left: 16px;}
            .myplus{ background: url(img/plus.png) no-repeat left 8px; padding-left: 16px;}
            .myminus{ background: url(img/minus.png) no-repeat left 8px; padding-left: 16px;}           
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                var $plusMenu = $("#menu>ul li:has(ul)");
                $plusMenu.removeClass("mypage").removeClass("myminus").addClass("myplus");
                var $pageMenu = $("#menu>ul li:not(:has(ul))");
                $pageMenu.removeClass("myminus").removeClass("myplus").addClass("mypage");
                
                $plusMenu.click(function(){
                    //$(this).attr("target","_blank");
                    //先打开链接地址
                    //本窗口打开
                    //window.location.href = $(this).children("a").attr("href");
                    //新窗口打开
                    //window.open($(this).children("a").attr("href"));
                    if($(this).hasClass("myplus"))
                    {
                        $(this).removeClass("mypage").removeClass("myplus").addClass("myminus");
                        $(this).children("ul").slideDown(100);
                    }
                    else
                    {
                        $(this).removeClass("mypage").removeClass("myminus").addClass("myplus");
                        $(this).children("ul").slideUp(100);
                    }
                    return false;
                })
                $pageMenu.click(function(){
                    //$(this).attr("target","_blank");
                    //先打开链接地址
                    //本窗口打开
                    //window.location.href = $(this).children("a").attr("href");
                    //新窗口打开
                    //window.open($(this).children("a").attr("href"));    //动态获取链接地址
                    return false           //阻止冒泡现象
                })              
                

            })

        </script>
    </head>
    <body>
      <div id="menu">
          <ul class="first" id="nav">
             <li><a href="http://www.baidu.com">首页</a></li>
             <li><a href="http://www.baidu.com">文化</a>
                 <ul>
                    <li><a href="http://www.baidu.com">企业文化</a></li>
                    <li><a href="http://www.baidu.com">企业精神</a></li>
                    <li><a href="http://www.baidu.com">经营理念</a></li>
                 </ul>
             </li>
             <li><a href="http://www.baidu.com">新闻</a>
                   <ul>
                    <li><a href="http://www.baidu.com">公司新闻</a></li>
                    <li><a href="http://www.baidu.com">产品发布新闻</a></li>
                 </ul>
             </li>
             <li><a href="http://www.baidu.com">招聘</a>
                <ul>
                    <li><a href="http://www.baidu.com">企业招聘</a></li>
                    <li><a href="#">个人求职</a>
                      <ul>
                           <li><a href="#">java工程师</a></li>
                            <li><a href="#">.net工程师</a></li>
                        </ul>
                    </li>
                   <li><a href="http://www.baidu.com">联系我们</a></li>
                   <li><a href="http://www.baidu.com">51job</a></li>
                 </ul>
             </li>
          </ul>
      </div>
        
    </body>
</html>
Backlight~~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 导航栏案例
qq_50839755的博客
04-07 2415
基本需求： 1.当页面滑动到某个盒子时 导航栏显示出来 2.点击导航栏 可以直接移动到相应的位置 3.给点击的导航栏某一项 变化背景颜色(加上current类) 4.当页面滑动到某个盒子时 对应的导航栏也要固定到对应的位置 整体代码展示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
如何利用jQuery制作下拉导航菜单
每天进步一点点
08-03 1359
下拉导航菜单可以用jQuery制作，首先做三个导航条（css代码省略了）       衬衫               短袖衬衫         长袖衬衫         短袖T恤         短袖T恤               卫衣               开襟卫衣         套头卫衣         运动卫衣         童装
jQuery实现高仿QQ音乐
宏斌的博客
02-05 9882
几个实现的效果看视频吧： 动图很是不清楚 代码： html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>music</title> <link href="../jquery.mCustomScrol...
jQuery页面滚动导航监听代码
墨鱼部落格
03-10 173
jQuery页面滚动导航监听代码 jQuery制作简单实用的鼠标控制页面滚动，顶部固定导航栏相应的切换效果代码。 演示地址 下载地址
jquery 动态生成导航栏
weixin_44468853的博客
08-23 979
在使用jquery开发网页的时候，做不到像vue一样引入组件，但是我们的导航栏，还是不能每个页面都写的。要不然当需要修改小部分内容的时候，还得需要一个个文件去改，这样的代码也太不好维护了。所以我们需要使用js来生成导航栏。这里写的比较简单，入门级的，提供大致思路，可以根据你们的使用场景来进行修改。
jQuery页面整屏滚动
qq_42400124的博客
01-06 482
jQuery页面整屏滚动
jQuery实现电梯导航
qq_52108058的博客
05-19 597
【代码】jQuery实现电梯导航。
jquery实现顶部导航栏
m0_47720236的博客
03-12 1503
jquery实现顶部导航栏 原理:当页面滚动至顶部导航栏被隐藏时，（根据自己导航栏高度自行调整）将顶部导航栏固定到页面的最顶部； 核心方法：scroll（）当滚动条滑动时会触发改方法 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
用jquery制作凡客诚品帮助中心页面
热门推荐
qq_39879340的博客
10-10 2万+
左导航，当前二级菜单项展开时，其余导航项关闭 帮助中心，文本框获得焦点时，默认文字消失，失去焦点时，再次显示文字 购物流程，鼠标指针移过时，当前项高亮显示，鼠标指针移至父元素或祖先元素时，依旧高亮，只有当鼠标指针移至其同辈元素时，同辈元素高亮，而去掉该元素高亮样式 问题解决，选中按钮“未解决”时显示相关内容 <body> <div id="bodyDiv"> <!-- 输入框 -
jQuery 实现音乐导航案例
qq_43434300的博客
04-08 1005
源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: ...
jQuery仿京东页面制作，组件封装
01-14
在本项目中，“jQuery仿京东页面制作，组件封装”是一个非常适合初学者理解并实践jQuery库的应用实例。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互，使得网页开发更加高效...
jQuery网站页面导航.zip
07-04
jQuery网站页面导航是一个专门利用jQuery库和CSS3技术来创建的动态、响应式的导航菜单解决方案。这个压缩包"jQuery网站页面导航.zip"包含了实现这种功能的代码资源。 jQuery是一个轻量级的JavaScript库，它简化了...
jQuery内嵌iframe导航菜单
06-24
在网页设计和开发中，jQuery 是一个非常流行的 JavaScript 库，它简化了DOM操作、事件处理、动画制作等任务。本篇文章将详细讲解如何利用jQuery实现一个内嵌iframe的导航菜单，以及相关的设计与实现技巧。 一、...
jQuery制作下划线导航栏动画特效.zip
10-08
通过学习这个"jQuery制作下划线导航栏动画特效.zip"中的内容，你可以为你的网站添加一个独特且吸引人的导航组件。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在...
jquery页面顶端固定导航.zip
11-24
这个“jquery页面顶端固定导航.zip”压缩包文件显然是一个关于如何使用jQuery实现这一功能的教学资源。下面将详细解释涉及的前端技术及其应用。 首先，CSS（Cascading Style Sheets）在页面样式控制中起着关键作用...
聊天室、websocket、socket.io、毕业设计.zip
07-27
聊天室、websocket、socket.io、毕业设计.zip
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
07-27
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
防盗门进销存管理系统（SDIMS）.zip
07-27
防盗门进销存管理系统（SDIMS）.zip
Matlab实现蝗虫优化算法GOA-CNN-BiLSTM-Mutilhead-Attention多变量时序预测.rar
最新发布
07-27
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
制作凡客诚品帮助中心页面jquery
09-09
凡客诚品帮助中心页面jquery的制作可以通过以下步骤进行： 1. 首先，需要在HTML页面中引入jQuery库，可以使用CDN加速或下载jQuery库文件到项目中。 2. 创建一个HTML的结构，包含一个导航菜单和对应的内容区域。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值