jQuery+CSS實現(xiàn)的網(wǎng)頁二級下滑菜單效果
更新時間：2015年08月25日 09:25:12 作者：企鵝
這篇文章主要介紹了jQuery+CSS實現(xiàn)的網(wǎng)頁二級下滑菜單效果,涉及jquery鼠標(biāo)hover事件及show與hide操作頁面元素的顯示與隱藏效果,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery+CSS實現(xiàn)的網(wǎng)頁二級下滑菜單效果。分享給大家供大家參考。具體如下：
這是一款簡潔型的 jQuery+CSS網(wǎng)頁二級下滑菜單，練手寫的，有需要的自己拿去美化吧，基本的動畫效果和菜單下滑效果和漸變效果已經(jīng)做出來了，在IE下表現(xiàn)不錯，在火狐下發(fā)現(xiàn)菜單有閃爍現(xiàn)象，有空會繼續(xù)修正，感謝大家捧場哦。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-css-web-2level-menu-style-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS jQuery HTML二級下滑菜單</title>
<style type="text/css">
body,ul,li,a{margin: 0;padding: 0;font:16px "微軟雅黑";}
ul,li{list-style-type: none}
.menu{width: 270px;height: 30px;line-height: 30px;background: #0f67a1}
.menu li{width: 120px;float: left;display: inline;position: relative;z-index: 10;text-align: center;}
.menu li: hover{background: #426d9c;}
.menu .menuUl{width: 120px;height: auto;display: none;background: #426d9c;position: absolute;z-index: 20;left: 25px;top: 30px;padding:3px;}
.menuUl li{width: 100%;float: left;text-align: left;}
a{color: #eee;text-decoration: none}
a: hover{color: #000;text-decoration: none}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu li").hover(function() {
$(this).find(".menuUl").show('50');
},
function() {
$(this).find(".menuUl").hide('50');
});
})
</script>
</head>
<body>
<ul class="menu">
<li><a href="">源碼類</a>
<ul class="menuUl">
<li><a href="#" >論壇源碼</a></li>
<li><a href="#" >博客源碼</a></li>
<li><a href="#" >Ajax源碼</a></li>
</ul>
</li>
<li><a href="">特效類</a>
<ul class="menuUl">
<li><a href="#" >導(dǎo)航菜單</a></li>
<li><a href="#" >表單效果</a></li>
<li><a href="#" >HTML5特效</a></li>
<li><a href="#" >jQuery特效</a></li>
</ul>
</li>
</ul>
</body>
</html>
希望本文所述對大家的jquery程序設(shè)計有所幫助。
相關(guān)文章
在jquery中給表單取值或賦值的方法我們只要簡單的$(\'表單ID\').val()即可實現(xiàn)取值了，如果賦值我們可使用$(\'表單ID\').val(\'內(nèi)容\')即可實現(xiàn)了2013-08-08
這篇文章主要介紹了jQuery實現(xiàn)首頁圖片淡入淡出效果的方法,實例分析了jQuery圖片淡入淡出效果的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jQuery時間日期三級聯(lián)動的實現(xiàn)代碼，代碼簡答易懂，非常實用，需要的朋友參考下吧2016-11-11
AspNet中使用JQuery上傳插件Uploadify詳解
Uploadify是JQuery的一個上傳插件，實現(xiàn)的效果非常不錯，帶進(jìn)度顯示。不過官方提供的實例時php版本的，本文將詳細(xì)介紹Uploadify在Aspnet中的使用2015-05-05
本文講述的是jquery選擇器結(jié)果是數(shù)組時需要主要的一個問題，并詳細(xì)分析了產(chǎn)生此問題的原因，這里記錄下來，小伙伴們在項目中使用的時候要注意一下。2014-11-11
jquery焦點圖片切換(數(shù)字標(biāo)注/手動/自動播放/橫向滾動)
焦點圖片切換在網(wǎng)頁制作的商品展示中經(jīng)常會用到，這樣的效果可以給用戶帶來耳目一新的感覺同時也是用戶比較追捧的，本文也實現(xiàn)了一個這樣的焦點圖片切換效果,感興趣的你可以參考下啊，希望本文對你有所幫助2013-01-01
JQuery+Bootstrap 自定義全屏Loading插件的示例demo
這篇文章主要介紹了JQuery+Bootstrap 自定義全屏Loading插件，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07
這篇文章主要為大家介紹了jQuery的拷貝對象，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
jQuery簡單實現(xiàn)根據(jù)日期計算星期幾的方法
這篇文章主要介紹了jQuery簡單實現(xiàn)根據(jù)日期計算星期幾的方法,涉及jQuery針對日期時間簡單計算相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
jquery選擇符快速提取web表單數(shù)據(jù)示例
遇到要重復(fù)多次同樣的事時，就想找一種省時省力的方法，下面就為大家介紹下利用jquery選擇符快速提取web表單數(shù)據(jù)2014-03-03