时间:2021-05-26
前言
上一篇博客更新了在页面中可以像Excel表格一样输入的表格,这篇博客介绍一下我们经常可以在各大网站看到的菜单栏显示效果的程序。
内容
显示效果:
照例,先上代码,
HTML代码:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实践3-菜单效果</title> <script src="script/jquery-1.8.2.js"></script> <script src="script/menu.js"></script> <link href="CSS/menu.css" rel="stylesheet" /> </head> <body> <ul> <li class="main"> <a href="#" >菜单项1 </a> <ul> <li><a href="#" >子菜单项1.1</a></li> <li><a href="#" >子菜单项1.2</a></li> <li><a href="#" >子菜单项1.3</a></li> </ul> </li> <li class="main"> <a href="#" >菜单项2 </a> <ul> <li><a href="#" >子菜单项2.1</a></li> <li><a href="#" >子菜单项2.2</a></li> <li><a href="#" >子菜单项2.3</a></li> </ul> </li> <li class="main"> <a href="#" >菜单项3 </a> <ul> <li><a href="#" >子菜单项3.1</a></li> <li><a href="#" >子菜单项3.2</a></li> <li><a href="#" >子菜单项3.3</a></li> </ul> </li> </ul> <br /> <br /> <br /> <br /> <ul> <li class="hmain"> <a href="#" >菜单项1 </a> <ul> <li><a href="#" >子菜单项1.1</a></li> <li><a href="#" >子菜单项1.2</a></li> <li><a href="#" >子菜单项1.3</a></li> </ul> </li> <li class="hmain"> <a href="#" >菜单项2 </a> <ul> <li><a href="#" >子菜单项2.1</a></li> <li><a href="#" >子菜单项2.2</a></li> <li><a href="#" >子菜单项2.3</a></li> </ul> </li> <li class="hmain"> <a href="#" >菜单项3 </a> <ul> <li><a href="#" >子菜单项3.1</a></li> <li><a href="#" >子菜单项3.2</a></li> <li><a href="#" >子菜单项3.3</a></li> </ul> </li> </ul> </body></html>CSS代码:
ul, li { list-style: none; } ul { padding: 0; margin: 0; } .main, .hmain { background-image: url(../img/菜单效果/title.gif); background-repeat: repeat-x; width: 120px; } li { background-color: #EEEEEE; } a { text-decoration: none; padding-left: 20px; display: block; display: inline-block; width: 100px; padding-top: 3px; padding-bottom: 3px; } .main a, .hmain a{ color: white; background-image: url(../img/菜单效果/collapsed.gif); background-repeat: no-repeat; background-position: 3px center; } .main li a, .hmain li a{ color: black; background-image: none; } .main ul, .hmain ul{ display: none; } .hmain { float: left; margin-left:1px;}JavaScript代码:
$(document).ready(function () { //页面中的DOM已经装载完成时,执行的代码 $(".main > a").click(function () { ////找到主菜单项对应的子菜单项 var ulNode = $(this).next("ul"); ulNode.slideToggle(); changeIcon($(this)); }); //简化成下列代码 $(".hmain ").hover(function () { $(this).children("ul").slideDown(); changeIcon($(this).children("a")); }, function () { $(this).children("ul").slideUp(); changeIcon($(this).children("a")); }); }); //修改主菜单的指示图标 function changeIcon(mainNode) { if (mainNode) { if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) { mainNode.css("background-image", "url('img/菜单效果/expanded.gif')"); } else { mainNode.css("background-image", "url('img/菜单效果/collapsed.gif')"); }; };};这次代码稍微有点长,但是对于一目十行的大神们来说这都不算啥!
总结
HTML知识点:
CSS知识点:
JavaScript知识点:
end
谢谢您的阅读!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果。分享给大家供大家参考。具体如下:这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑
本文实例讲述了jQuery实现个性翻牌效果导航菜单的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:jQuery个性翻牌效果的导航菜单ul,li
手机设置wifi方法如下: 1、进到手机菜单显示列表,在菜单显示列表中找到设置点击进入。 2、在设置列表页点击无线和网络进入网络设置。 3、在无线的网络设
本文实例讲述了jquery实现最简单的滑动菜单效果代码。分享给大家供大家参考。具体如下:这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有
本文实例讲述了jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果。分享给大家供大家参考。具体如下:这里演示基于jquery实现的动画菜单,内含四种效果