五、JQuery制作页面导航

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

文章目录

一、普通二级下拉菜单
二、无限级下拉菜单
三、水平伸缩菜单
四、TreeView菜单

一、普通二级下拉菜单

<!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>

五、JQuery制作页面导航相关推荐

利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
jquery实现页面导航列表点击添加active样式
h5代码: jquery代码转载于:https://www.cnblogs.com/Emily-m/p/11058244.html
JQuery制作3D导航栏切换动画
<!-- 注意的地方 1.position 的 relative 和 absolute 联合使用的作用和效果 : absolute 绝对定位(1.默认从对窗口的左上角开始,2.也可以对某一个 d ...
html制作课程导航页面,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）...
学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分) 成品截图前期准备素材一.项目页面PSD源文件二.前期准备工作三.CSS属性书写顺序四.布局分析五.布局流程开始页面制作头部 ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
Bootstrap JQuery 制作一个登录页面
使用Bootstrap和 JQuery 制作一个简单登录页面: 链接:https://pan.baidu.com/s/1wJyL1rdVST0cVPfcbuIQlw 提取码:6666 1. 实现图片的 ...
第二十四章：页面导航（五）
导航变化当您尝试使用ModalEnforcement和MvvmEnforcement程序时,您可能会对模态页面未能保留任何信息感到不安.我们都遇到了导航到用于输入信息的页面的程序和网站,但是当您离开 ...
使用 jQuery Mobile 与 HTML5 开发 Web App (九) —— jQuery Mobile 页面与对话框
在<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 基础>中,Kayo 曾经简略介绍过 jQuery Mobile 的页面组件,当 ...
桌面系统（web前端）jQuery制作Web桌面系统界面类似WebQQ桌面布局
源码不是我写的,但是我在基础上修改了一些内容. 可参考,http://www.xwcms.net/webAnnexImages/fileAnnex/20140220/82693/index.html ...

五、JQuery制作页面导航

文章目录

一、普通二级下拉菜单

二、无限级下拉菜单

三、水平伸缩菜单

四、TreeView菜单

五、JQuery制作页面导航相关推荐

最新文章

热门文章