Jquery实战——横纵向的菜单
2016-04-10 16:38
716 查看
横纵向的菜单效果,点击纵向菜单显示其子菜单。鼠标指向横菜单的时候。显示其子菜单,鼠标离开,子菜单隐藏。
HTML代码:
CSS代码:
JQuery代码:
1.HTML总结:
1.页面中的菜单项能够通过嵌套ul和li来表示
2.CSS总结:
1.list-style属性为none时能够清除ul和li前面的小圆点
2.能够使用background-repeat来控制背景图的反复填充方式
3. text-decoration属性值为none时,能够取消文字上的下划线
4,.display的值为none能够用于隐藏元素
3.JQuery总结:
1. .main a 和 .main >a不同之处是。前者选择使用了.main的这个class的元素内部的全部的a节点,后者仅仅选择了.main的子节点中的a节点
2. show,hide方法能够用于显示或隐藏元素,。没有參数时的效果和改动CSS的display属性效果一样。
參数能够是单位为毫秒的数字。或者是‘slow’。‘normal’,‘fast’这三个文字都能够来控制完毕显示或隐藏须要的时间。
3.toggle方法更为强大,能够省去推断元素是显示还是隐藏的状态。能够让显示的元素隐藏起来,能够让隐藏的元素显示出来,參数用法和show,hide同样。
HTML代码:
<span style="font-size:18px;"><!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横纵向的菜单</title> <link href="css/menu.css" rel="stylesheet" /> <script src="js/JQuery.js"></script> <script src="js/menu.js"></script> </head> <body> <ul> <li class="main"><a href="#">菜单项1</a> <ul> <li><a href="#">菜单项11</a></li> <li><a href="#">菜单项12</a></li> </ul> </li> <li class="main"><a href="#">菜单项2</a> <ul> <li><a href='#'>菜单项21</a></li> <li><a href="#">菜单项22</a></li> </ul> </li> <li class="main"><a href="#">菜单项3</a> <ul> <li><a href="#">菜单项31</a></li> <li><a href="#">菜单项32</a></li> </ul> </li> </ul> <br /> <br /> <br /> <ul> <li class="hmain"><a href="#">菜单项1</a> <ul> <li><a href="#">菜单项11</a></li> <li><a href="#">菜单项12</a></li> </ul> </li> <li class="hmain"><a href="#">菜单项2</a> <ul> <li><a href='#'>菜单项21</a></li> <li><a href="#">菜单项22</a></li> </ul> </li> <li class="hmain"><a href="#">菜单项3</a> <ul> <li><a href="#">菜单项31</a></li> <li><a href="#">菜单项32</a></li> </ul> </li> </ul> </body> </html> </span>
CSS代码:
<span style="font-size:18px;">body { } ul,li{ /*清除菜单前面的点和圈*/ list-style:none; } ul { padding:0; margin:0; } .main ,.hmain { background-image:url(../images/title.gif); background-repeat:repeat-x; width:100px; } li{ background-color:#999; } a{ /*取消全部的下划线*/ text-decoration:none; padding-left:15px; display:block ; /*让a标签充满这个区域*/ /*针对IE6*/ display:inline-block; width:85px; padding-top:3px; padding-bottom:3px; } .main a , .hmain a{ color:white; background-image:url(../images/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; }</span>
JQuery代码:
<span style="font-size:18px;">$(function () { $(".main > a , .hmain > a").click(function () { //找到主菜单相应的子菜单 var ulNode = $(this).next("ul"); //if (ulNode.css("display") == "none") { // ulNode.css("display", "block"); //} else { // ulNode.css("display", "none"); //} //ulNode.show("normal");//slow, fast, 500 //ulNode.hide(); //ulNode.toggle();//显示和隐藏。自己主动推断 //ulNode.slideDown("slow");//显示 //ulNode.slideUp();//隐藏 ulNode.slideToggle(); changeIcon($(this)); }); $(".hmain").hover(function () { $(this).children("ul").show("fast"); changeIcon($(this).children("a")); }, function () { $(this).children("ul").hide("fast"); changeIcon($(this).children("a")); }); }); //改动主菜单的指示图标 function changeIcon(mainNode) { if (mainNode) { if (mainNode.css("background-image").indexOf("collapsed.gif")>=0) { mainNode.css("background-image", "url(../images/expanded.gif)"); } else { mainNode.css("background-image", "url(../images/collapsed.gif)"); } } }</span>
1.HTML总结:
1.页面中的菜单项能够通过嵌套ul和li来表示
2.CSS总结:
1.list-style属性为none时能够清除ul和li前面的小圆点
2.能够使用background-repeat来控制背景图的反复填充方式
3. text-decoration属性值为none时,能够取消文字上的下划线
4,.display的值为none能够用于隐藏元素
3.JQuery总结:
1. .main a 和 .main >a不同之处是。前者选择使用了.main的这个class的元素内部的全部的a节点,后者仅仅选择了.main的子节点中的a节点
2. show,hide方法能够用于显示或隐藏元素,。没有參数时的效果和改动CSS的display属性效果一样。
參数能够是单位为毫秒的数字。或者是‘slow’。‘normal’,‘fast’这三个文字都能够来控制完毕显示或隐藏须要的时间。
3.toggle方法更为强大,能够省去推断元素是显示还是隐藏的状态。能够让显示的元素隐藏起来,能够让隐藏的元素显示出来,參数用法和show,hide同样。
相关文章推荐
- jquery跨域调用wcf
- 从零开始学_JavaScript_系列(七)——jquery(复选框及互斥、div块、修改css、标签数组、ajax连续加载)
- Jquery第二步
- 对jQuery的事件绑定的一些思考
- 如何使用js懒加载图片|如何使用jquery.lazyload.js|网页优化|如何提高网页加载速度
- 基于jquery开发的选项卡
- 5-jQuery - AJAX get()/post()页面请求即执行
- jquery怎么跳出当前的each循环
- jQuery UI的一些基本用法
- jQuery学习笔记
- JQuery 学习笔记
- jquery选择器效率优化问题
- JQuery笔记
- jQuery之addClass与removeClass使用实例
- jQuery实现点击水纹波动动画
- Jquery form.js文件上传返回JSON数据,在IE下提示下载文件的解决办法,并对返回数据进行正确的解析
- 使用AmplifyJS和JQuery编写更好更优雅的javascript事件处理代码
- jquery开发之第一个程序
- not use jquery
- jQuery on()方法