本文實例講述了jQuery css實現的藍色水平二級導航選單效果。分享給大家供大家參考。具體如下:
這是一款藍色經典的jQuery CSS實現水平二級導航菜單,相信你會喜歡的,藍色,超級經典的一種風格,從其它網站上扣下來的,我覺得很不錯,趕快分享給大家吧。
運作效果截圖如下:
線上簡報網址如下:
http ://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>蓝色水平二级导航菜单</title> <style> *{font-size:12px; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; } body{margin:0; padding:0; background:white; } img{border:0; } a:link,a:visited,a:active{text-decoration:none; } a:hover{text-decoration:underline; } /********** header **********/ .header{width:100%; background:url(images/header_bg.gif) #ffffff repeat-x 0 0; text-align:center; } .header .padder{width:910px; margin:0 auto; background:url(images/header_bg.gif) #ffffff repeat-x 0 0; padding-bottom:4px; text-align:left; } .header .padder .nav{background:url(images/vertical.gif) repeat-x 0 -36px; height:36px; } .header .padder .navLeftBg{background:urlvertical.gif) no-repeat 0 0; height:36px; } .header .padder .navRightBg{background:url(images/icons.gif) no-repeat right -146px; height:36px; } .header .padder .nav .mainNav{padding-left:24px; position:absolute; } .header .padder .nav .mainNav a:link, .header .padder .nav .mainNav a:visited,.header .padder .nav .mainNav a:active{width:90px; height:36px; display:inline-block; text-align:center; color:#ffffff; font-weight:bold; font-size:14px; line-height:36px; margin-left:11px; } .header .padder .nav .mainNav a:hover{text-decoration:none; } .header .padder .nav .mainNav a.actived:link,.header .padder .nav .mainNav a.actived:visited,.header .padder .nav .mainNav a.actived:hover,.header .padder .nav .mainNav a.actived:active{background:url(images/icons.gif) no-repeat 0 -27px; color:#000000; } .header .padder .secondNav{line-height:21px; text-align:left; } .header .padder .secondNav a{color:#266392; display:in
以上就是jQuery css實現的藍色水平二級導航選單效果代碼_jquery的內容,更多相關內容請關注PHP中文網(www.php.cn)!