jQuery如何实现菜单显示效果

发布时间:2021-05-24 14:22:45 作者:小新
来源:亿速云 阅读:165

这篇文章主要介绍了jQuery如何实现菜单显示效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

内容

显示效果:

jQuery如何实现菜单显示效果

照例,先上代码,

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 {
 /*清除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知识点:

  1. 页面中的菜单项可以通过嵌套的ul和li来表示

  2. 菜单最外层为ul,一层每个主菜单放在一个li中,如果有子菜单,在这个主菜单的li中建立新的ul,再依次嵌套即可构建多层的菜单

  3. 浏览器中ul和li元素默认情况下文字前都有圆点标识符,li元素会有缩进。Opera浏览器比较特殊,li的标识符和其他浏览器不同

CSS知识点:

  1. list-style属性值为none时,可以清除ul和li前面的小圆点

  2. 清除子菜单的缩进值,需要padding和margin都为0,其中IE6和IE7只有margin也为0的时候才可以清除缩进值

  3. 可以使用background-image来制定一个元素的背景图,如果背景图比元素的实际大小要小,那么背景图会自动在横向和纵向上重复显示,直到填满整个区域

  4. 可以使用bakeground-repeat来控制背景图的重复填充方向

  5. 如果一个元素上同时定义了背景图和背景色,那么有背景图的地方是不会显示背景色的

  6. text-decoration属性值为none时,可以取消文字的下划线

  7. background-position可以控制背景图的位置,属性值既可以用数值,也可以用center,left,top这些值来控制横向和纵向的位置。这个属性的两个值,第一个对应横向,第二个对应纵向

  8. background-image的值为none表示没有背景图

  9. background-repeat的值为no-repeat时,背景图不会再所在的区域中重复显示

  10. IE6以外的其他浏览器可以通过设定display的值为block来让a元素充满所在的区域。对于IE6,则需要设定display为inline-block,同时设定a的宽度

  11. display的值为none可以用于隐藏元素

JavaScript知识点:

  1. main a 和 .main > a的不同之处,前者选择使用了.main的这个class的元素内部所有的a节点,后者只选择.main的子节点中的a节点

  2. show,hide方法可以用于显示或隐藏元素,没有参数时的效果和修改css的display属性效果一样。参数可以是单位为毫秒的数字,或则“slow”“normal”“fast”这三个文字,都可以来控制完成显示或隐藏需要的时间。注意这时动画效果考不断改变元素的宽度和高度来实现的

  3. toggle方法更为强大,可以省去我们判断元素是显示还是隐藏的状态,直接让显示的元素隐藏起来,隐藏的元素显示出来。参数使用方法和show,hide相同

  4. slideDown和slideUp可以实现向下或者向上卷动的效果,实际上试通过指定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数为空的情况和show,hide不同

  5. slideToggle和toggle达到的效果类似

  6. DOCTYPE对于jQuery中的动画是有影响的。没有DOCTYPE定义时,在IE中,jQuery的动画会出现闪烁的糟糕效果。

  7. float的值是left,可以使原本各自位于一行的元素全部在一行中向左浮动

  8. 可以给多个选择器定义同样的样式,选择器之间用“,”分割。同样对于jQuery的“$”方法,也可以传入各个选择器

end

jquery是什么

jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。

感谢你能够认真阅读完这篇文章,希望小编分享的“jQuery如何实现菜单显示效果”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. 使用jQuery怎么实现隐藏与显示效果
  2. jQuery实现菜单的显示和隐藏功能示例

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery

上一篇:如何使用jQuery实现掷骰子游戏

下一篇:jQuery如何实现验证用户登录

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》