jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼
本文實(shí)例講述了jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼。分享給大家供大家參考。具體如下:
這里演示了仿Google風(fēng)格的下拉菜單,其核心實(shí)際上是jquery.fixedMenu菜單,使用了jquery.fixedMenu.js和fixedMenu_style.css文件,已在代碼中加注釋,你可以從本代碼中分享現(xiàn)這兩個(gè)文件,然后重新引用。本菜單在鼠標(biāo)點(diǎn)擊主菜單的時(shí)候可向下顯示二級(jí)子菜單,在火狐或Chrome瀏覽器下,還可顯示菜單陰影效果。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-fixedMenu-menu-style-codes/
具體代碼如下:
<!DOCTYPE html> <head> <title>jQuery仿Google下拉導(dǎo)航菜單</title> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <style> /*fixedMenu_style.css代碼*/ body{padding: 0;margin: 0;} .menu{font: 13px/27px Arial,sans-serif;color: #3366CC;height: 30px;background: url(images/back.gif) repeat-x;} .menu a: hover{background-color: #e4ebf8;} .menu a{text-decoration: none;padding: 4px 8px 7px;color: #3366CC;outline: none;} .menu ul{list-style: none;margin: 0;padding: 0 0 0 10px;} .menu ul li{padding: 0;float: left;} .menu ul li ul li{padding: 0;float: none;margin: 0 0 0 0px;width: 100%;} .menu ul li ul{position: absolute;border: 1px solid #C3D1EC;box-shadow: 0 1px 5px #CCCCCC;margin-top: -1px;display: none;padding: 0px 16px 0px 0;} .active ul{display: block !important;} .active a{background-color: white;border: 1px solid #C3D1EC;border-bottom: 0;box-shadow: 0 -1px 5px #CCCCCC;display: block;height: 29px;padding: 0 8px 0 8px;position: relative;z-index: 1;} .active a: hover{background-color: white;} .active ul a: hover{background-color: #e4ebf8;} .active ul a{border: 0 !important;box-shadow: 0 0 0 #CCCCCC;border: 0;width: 100%;} .arrow{border-color: #3366CC transparent transparent;border-style: solid dashed dashed;margin-left: 5px;position: relative;top: 10px;} </style> <script> //jquery.fixedMenu.js文件代碼開始 (function($){ $.fn.fixedMenu=function(){ return this.each(function(){ var menu= $(this); menu.find('ul li > a').bind('click',function(){ if ($(this).parent().hasClass('active')){ $(this).parent().removeClass('active'); } else{ $(this).parent().parent().find('.active').removeClass('active'); $(this).parent().addClass('active'); } }) }); } })(jQuery); //jquery.fixedMenu.js文件代碼結(jié)束 $('document').ready(function(){ $('.menu').fixedMenu(); }); </script> </head> <body> <div class="menu"> <ul> <li> <a href="#">More Examples<span class="arrow"></span></a> <ul> <li><a href="#">Plugins and jQuery Examples</a></li> <li><a href="#">Prototype Examples</a></li> <li><a href="#">Mootools Examples</a></li> <li><a href="#">Javascript Examples</a></li> </ul> </li> <li> <a href="#">Plugins<span class="arrow"></span></a> <ul> <li><a href="#">Galleries</a></li> <li><a href="#">DropDown Menus</a></li> <li><a href="#">Content Slider</a></li> <li><a href="#">LightBox</a></li> </ul> </li> <li> <a href="#">Friend Sites<span class="arrow"></span></a> <ul> <li><a href="#">關(guān)于我們</a></li> <li><a href="#">jquery特效</a></li> </ul> </li> <li> <a href="#">Contact<span class="arrow"></span></a> <ul> <li><a href="#">Follow us on Twitter</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Rss</a></li> <li><a href="#">e-mail</a></li> </ul> </li> </ul> </div> <div style="margin-top:200px;"> </body> </html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery實(shí)現(xiàn)查找鏈接文字替換屬性的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)查找鏈接文字替換屬性的方法,可實(shí)現(xiàn)針對(duì)鏈接文字的查找及鏈接屬性進(jìn)行替換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06jquery層級(jí)選擇器的實(shí)現(xiàn)(匹配后代元素div)
下面小編就為大家?guī)硪黄猨query層級(jí)選擇器的實(shí)現(xiàn)(匹配后代元素div)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09jQuery短信驗(yàn)證倒計(jì)時(shí)功能實(shí)現(xiàn)方法詳解
這篇文章主要介紹了jQuery短信驗(yàn)證倒計(jì)時(shí)功能實(shí)現(xiàn)方法,實(shí)例分析了jQuery前臺(tái)倒計(jì)時(shí)功能及ajax交互的相關(guān)技巧,需要的朋友可以參考下2016-05-05js中獲取 table節(jié)點(diǎn)各tr及td的內(nèi)容簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s中獲取 table節(jié)點(diǎn)各tr及td的內(nèi)容簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10jquery formValidator插件ajax驗(yàn)證 內(nèi)容不做任何修改再離開提示錯(cuò)誤的bug解決方法
query formValidator插件非常好用,但是有一個(gè)嚴(yán)重的Bug,在使用ajax驗(yàn)證的時(shí)候,如果輸入框的內(nèi)容已經(jīng)存在,把鼠標(biāo)放到輸入框,不做任何修改再離開,則會(huì)提示錯(cuò)誤,很是郁悶2013-01-01iframe異步加載實(shí)現(xiàn)點(diǎn)擊左邊菜單加載右邊內(nèi)容實(shí)例講解
iframe異步加載想必很多朋友對(duì)你都不會(huì)陌生,接下來將實(shí)現(xiàn)這樣一個(gè)功能左邊菜單不能刷新的情況下,異步加載右邊的內(nèi)容頁(yè)面,感興趣的你可以參考下本文或許對(duì)你有所幫助2013-03-03JQuery中$.ajax()方法參數(shù)詳解及應(yīng)用
JQuery中$.ajax()方法想必大家并不陌生吧,在本文將為大家介紹下其參數(shù)及應(yīng)用示例,感興趣的朋友不要錯(cuò)過2013-12-12