知向前端
首页
微语
登录
jquery实现各种常用下拉菜单
2015-5-13 Jon
jquery实现简单下拉菜单
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>简单下拉菜单</title><br /> <style><br /> *{margin:0;padding:0;}<br /> body{padding:30px 200px;background: #666699;line-height: 32px;color:#330000;}<br /> ul,li{list-style: none;}<br /> .hide{background: #ddd;border:1px solid #bbb;display: none;float:left;}<br /> li{border:1px solid #bbb;padding:0 10px;}<br /> .menu-title,.hide li{cursor:pointer;}<br /> .hide li:hover{color:#660099;background: #996666}<br /> </style><br /> </head><br /> <body><br /> <div class="menu"><br /> <h3 class="menu-title">爱拼才会赢</h3><br /> <ul class="hide"><br /> <li>一时失志不免怨叹</li><br /> <li>一时落魄不免胆寒</li><br /> <li>那通失去希望</li><br /> <li>每日醉茫茫</li><br /> <li>无魂有体亲像稻草人</li><br /> <li>人生可比是海上的波浪</li><br /> <li>有时起有时落</li><br /> <li>好运歹运</li><br /> <li>总嘛要照起工来行</li><br /> <li>三分天注定</li><br /> <li>七分靠打拼</li><br /> <li>爱拼才会赢</li><br /> </ul><br /> </div><br /> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br /> <script><br /> $(function(){<br /> $('.menu').hover(function(){<br /> // $('.hide').slideToggle();或者<br /> $(this).children('.hide').stop().slideToggle(500);<br /> });<br /> })();<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
jquery实现多个下拉菜单
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>多个下拉菜单</title><br /> <style><br /> *{margin:0;padding:0;}<br /> body{padding:30px 200px;background: #666699;line-height: 32px;color:#330000;}<br /> ul,li{list-style: none;}<br /> .hide{background: #ddd;border:1px solid #bbb;display: none;float:left;}<br /> li{border:1px solid #bbb;padding:0 10px;}<br /> .menu-title{clear:both;width: 200px}<br /> .menu-title,.hide li{cursor:pointer;}<br /> .hide li:hover{color:#660099;background: #996666}<br /> .hide1{display: block;}<br /> </style><br /> </head><br /> <body><br /> <h3 class="menu-title">111爱拼才会赢</h3><br /> <ul class="hide hide1"><br /> <li>一时失志不免怨叹</li><br /> <li>一时落魄不免胆寒</li><br /> <li>那通失去希望</li><br /> <li>每日醉茫茫</li><br /> <li>无魂有体亲像稻草人</li><br /> <li>人生可比是海上的波浪</li><br /> <li>有时起,有时落</li><br /> <li>好运,歹运</li><br /> <li>总嘛要照起工来行</li><br /> <li>三分天注定</li><br /> <li>七分靠打拼</li><br /> <li>爱拼才会赢</li><br /> </ul><br /> <h3 class="menu-title">222爱拼才会赢</h3><br /> <ul class="hide"><br /> <li>一时失志不免怨叹</li><br /> <li>一时落魄不免胆寒</li><br /> <li>那通失去希望</li><br /> <li>每日醉茫茫</li><br /> <li>无魂有体亲像稻草人</li><br /> <li>人生可比是海上的波浪</li><br /> <li>有时起,有时落</li><br /> <li>好运,歹运</li><br /> <li>总嘛要照起工来行</li><br /> <li>三分天注定</li><br /> <li>七分靠打拼</li><br /> <li>爱拼才会赢</li><br /> </ul><br /> <h3 class="menu-title">333爱拼才会赢</h3><br /> <ul class="hide"><br /> <li>一时失志不免怨叹</li><br /> <li>一时落魄不免胆寒</li><br /> <li>那通失去希望</li><br /> <li>每日醉茫茫</li><br /> <li>无魂有体亲像稻草人</li><br /> <li>人生可比是海上的波浪</li><br /> <li>有时起,有时落</li><br /> <li>好运,歹运</li><br /> <li>总嘛要照起工来行</li><br /> <li>三分天注定</li><br /> <li>七分靠打拼</li><br /> <li>爱拼才会赢</li><br /> </ul><br /> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br /> <script><br /> $(function(){<br /> $('.menu-title').click(function(){<br /> $(this).next('.hide').slideToggle().siblings('.hide').slideUp();<br /> });<br /> })();<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
jquery实现可以无限极的下拉菜单
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>联级下拉菜单</title><br /> <style><br /> /*清除浮动代码*/<br /> .clearfix:before, .clearfix:after {<br /> display: table;<br /> content: " ";<br /> }<br /> .clearfix:after {<br /> clear: both;<br /> }<br /> .clearfix {<br /> *zoom: 1;<br /> }<br /> *{margin:0;padding:0;}<br /> body{padding:30px 50px;background: #666699;line-height: 32px;color:#330000;}<br /> ul,li{list-style: none;}<br /> .menu-out{background:#ccc;}<br /> .menu-out>li{float:left;text-align: center;padding:0 20px;margin:0 20px;}<br /> .menu{position: relative;}<br /> .menu span{cursor:pointer;}<br /> .menu-hide{position: absolute;top:32px;display: none;background: #ddd;border:1px solid #aaa;}<br /> .menu-hide>li{border-bottom:1px solid #fff;padding:0 10px;}<br /> .menu-hide>li:hover{background: #bbb}<br /> </style><br /> </head><br /> <body><br /> <ul class="menu-out clearfix"><br /> <li class="menu"><span>111111</span><br /> <ul class="menu-hide"><br /> <li class="menu"><span>1111111111111</span><br /> <ul class="menu-hide"><br /> <li><span>1111111111</span></li><br /> <li><span>1111111111</span></li><br /> <li><span>1111111111</span></li><br /> </ul><br /> </li><br /> <li><span>1111111111111</span></li><br /> <li><span>1111111111111</span></li><br /> </ul><br /> </li><br /> <li class="menu"><span>222222</span><br /> <ul class="menu-hide"><br /> <li class="menu" ><span>222222222222</span><br /> <ul class="menu-hide"><br /> <li><span>1111111111</span></li><br /> <li><span>1111111111</span></li><br /> <li><span>1111111111</span></li><br /> </ul><br /> </li><br /> <li><span>222222222222</span></li><br /> <li><span>222222222222</span></li><br /> </ul><br /> </li><br /> <li class="menu"><span>333333</span><br /> <ul class="menu-hide"><br /> <li class="menu"><span>333333333333</span><br /> <ul class="menu-hide"><br /> <li><span>1111111111</span></li><br /> <li><span>1111111111</span></li><br /> <li><span>1111111111</span></li><br /> </ul><br /> </li><br /> <li><span>333333333333</span></li><br /> <li><span>333333333333</span></li><br /> </ul><br /> </li><br /> <li class="menu"><span>444444</span><br /> <ul class="menu-hide"><br /> <li class="menu"<span>444444444444</span><br /> <ul class="menu-hide"><br /> <li class="menu"><span>444444444444</span><br /> <ul class="menu-hide"><br /> <li><span>1111111111</span></li><br /> <li><span>1111111111</span></li><br /> <li><span>1111111111</span></li><br /> </ul><br /> </li><br /> <li><span>444444444444</span></li><br /> <li><span>444444444444</span></li><br /> </ul><br /> </li><br /> <li class="menu"><br /> <span>444444444444</span><br /> <ul class="menu-hide"><br /> <li><span>1111111111</span></li><br /> <li><span>1111111111</span></li><br /> <li><span>1111111111</span></li><br /> </ul><br /> </li><br /> <li class="menu"><span>444444444444</span><br /> <ul class="menu-hide"><br /> <li><span>1111111111</span></li><br /> <li><span>1111111111</span></li><br /> <li><span>1111111111</span></li><br /> </ul><br /> </li><br /> </ul><br /> </li><br /> </ul><br /> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br /> <script><br /> $(function(){<br /> $('.menu').hover(function(){<br /> var oLeft=0;<br /> var oTop=$(this).outerHeight(true);<br /> if($(this).parent().attr('class')=='menu-hide'){<br /> oLeft=$(this).outerWidth(true);<br /> oTop=0;<br /> }<br /> $(this).children('.menu-hide').css({'left':oLeft,'top':oTop}).stop(true,true).slideToggle(200);<br /> });<br /> });<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
发表评论：
昵称
邮件地址 (选填)
个人主页 (选填)
内容