采用jquery+css實作極酷的下拉菜單導航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>【薦】采用jquery+css實作極酷的下拉菜單導航 - www.webdm.cn</title>

$(document).ready(function(){

$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$("ul.topnav li span").click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)

$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

$(this).parent().hover(function() {

}, function(){

$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up

});

//Following events are applied to the trigger (Hover events for the trigger)

}).hover(function() {

$(this).addClass("subhover"); //On hover over, add class "subhover"

}, function(){ //On Hover Out

$(this).removeClass("subhover"); //On hover out, remove class "subhover"

});

</script>

body {

margin: 0; padding: 0;

font: 10px normal Arial, Helvetica, sans-serif;

background: #ddd url(http://www.webdm.cn/images/20091119/body_bg.gif) repeat-x;

}

.container {

width: 960px;

margin: 0 auto;

position: relative;

}

#header {

background: url(http://www.webdm.cn/images/20091119/header_bg.gif) no-repeat center top;

padding-top: 120px;

}

#header .disclaimer {

color: #999;

padding: 100px 0 7px 0;

text-align: right;

display: block;

position: absolute;

top: 0; right: 0;

}

#header .disclaimer a { color: #ccc;}

ul.topnav {

list-style: none;

padding: 0 20px;

margin: 0;

float: left;

width: 920px;

background: #222;

font-size: 1.2em;

background: url(http://www.webdm.cn/images/20091119/topnav_bg.gif) repeat-x;

}

ul.topnav li {

float: left;

margin: 0;

padding: 0 15px 0 0;

position: relative;

}

ul.topnav li a{

padding: 10px 5px;

color: #fff;

display: block;

text-decoration: none;

float: left;

}

ul.topnav li a:hover{

background: url(http://www.webdm.cn/images/20091119/topnav_hover.gif) no-repeat center top;

}

ul.topnav li span {

width: 17px;

height: 35px;

float: left;

background: url(http://www.webdm.cn/images/20091119/subnav_btn.gif) no-repeat center top;

}

ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}

ul.topnav li ul.subnav {

list-style: none;

position: absolute;

left: 0; top: 35px;

background: #333;

margin: 0; padding: 0;

display: none;

float: left;

width: 170px;

-moz-border-radius-bottomleft: 5px;

-moz-border-radius-bottomright: 5px;

-webkit-border-bottom-left-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

border: 1px solid #111;

}

ul.topnav li ul.subnav li{

margin: 0; padding: 0;

border-top: 1px solid #252525;

border-bottom: 1px solid #444;

clear: both;

width: 170px;

}

html ul.topnav li ul.subnav li a {

float: left;

width: 145px;

background: #333 url(http://www.webdm.cn/images/20091119/dropdown_linkbg.gif) no-repeat 10px center;

padding-left: 20px;

}

html ul.topnav li ul.subnav li a:hover {

background: #222 url(http://www.webdm.cn/images/20091119/dropdown_linkbg.gif) no-repeat 10px center;

}

#header img {

margin: 20px 0 10px;

}

</style>

</head>

<body>

<div class="disclaimer">Sexy Drop Down Menu Tutorial by <a href="/" target="_blank" rel="external nofollow" >Soh Tanaka</a>.</div>

<li><a href="http://www.webdm.cn/">網頁代碼站</a></li>

<li>

</ul>

</li>

<li>

</ul>

</li>

<li>

</ul>

</li>

</ul>

</div>

</body>

</html>

采用jquery+css實作極酷的下拉菜單導航

繼續閱讀

2010年終總結--技術篇

可變參數宏， Variadic Macros

如何成為一名.net 工程師?

tabpanel 使用問題

不用iconv函數實作UTF-8編碼轉換GB2312的PHP函數

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序

JQuery--dom捕獲html元素

C#多線程——前台線程和背景線程

CSS之折疊菜單

DOM下元素 offset client scroll 相關屬性簡介

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

IE8 CSS設定DIV居中，添加“margin:0 auto”

Small tricks

jquery_126_demo

無元件上傳圖檔到資料庫中，最完整解決方案