jquery+CSS實(shí)現(xiàn)的水平布局多級(jí)網(wǎng)頁菜單效果
本文實(shí)例講述了jquery+CSS實(shí)現(xiàn)的水平布局多級(jí)網(wǎng)頁菜單效果。分享給大家供大家參考。具體如下:
這里演示的Jquery和CSS共同實(shí)現(xiàn)的網(wǎng)頁常見的導(dǎo)航菜單,支持兩級(jí)形式,藍(lán)色風(fēng)格,最多支持二級(jí),三級(jí)可能要對(duì)代碼進(jìn)行改造了。本菜單屬于中規(guī)中矩型,實(shí)用性比較強(qiáng),適合的網(wǎng)站種類也是很多的,希望大家會(huì)喜歡。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-css-scroll-nav-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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>藍(lán)色帶陰影超酷的css+js導(dǎo)航菜單代碼</title> <style> body {margin:0px;} a:link {text-decoration: none;} a:visited {text-decoration: none;} a:hover {text-decoration: none;} a:active {text-decoration: none;} #nav_wrap {width:960px;} #nav{background:url(images/nav_bg1.gif) repeat-x bottom; height:49px; position:relative; width:950px; margin:20px auto;} #nav .l{background:url(images/nav_l1.gif) no-repeat bottom; height:49px; width:28px; float:left} #nav li {float:left; list-style:none;text-align:center;font-size:14px; } #nav li .v a{width:108px;height:49px; line-height:49px; display:block; color:#FFF;float:left; font-family:Arial,Verdana,Tahoma,"宋體"; } #nav li .v a:hover,#nav li .v .sele{background:url(images/nav_hover1.gif) no-repeat bottom;color:#fff;height:49px;line-height:49px; font-size:14px;} #nav .kind_menu {height:30px;*height:29px;line-height:30px;vertical-align:middle; position:absolute;top:46px;*top:48px;left:70px;width:880px; text-align:left; display:none;color:#000;font-size:12px;} #nav .kind_menu a {color:#000; float:left; text-align:center; width:90px; font-family:Arial,Verdana,Tahoma,"宋體";font-size:12px;} #nav .kind_menu a:hover {color:#000;border-bottom:2px #222b8e solid;} #nav .kind_menu span {font-size:10px; color:#000; line-height:30px; *line-height:26px; float:left } </style> <SCRIPT src="jquery-1.6.2.min.js" type=text/javascript></SCRIPT> </head> <body style="text-align:center"> <DIV id=nav_wrap> <DIV id=nav> <DIV class=l></DIV> <UL class=c> <LI><SPAN class=v><A href="#" target="_blank">首頁</A></SPAN> <DIV class=kind_menu style="LEFT:50px">歡迎您訪問腳本之家,我們?yōu)槟峁┳顑?yōu)質(zhì)的網(wǎng)絡(luò)營(yíng)銷服務(wù)! </DIV></LI> <LI><SPAN class=v><A href="#">特惠套餐</A></SPAN> <DIV class=kind_menu style="LEFT: 40px"> <A href="#">電信特惠套餐</A> <SPAN>|</SPAN> <A href="#">智能雙線套餐</A> </DIV></LI> <LI><SPAN class=v><A href="#">域名頻道</A></SPAN> <DIV class=kind_menu> <A href="#">英文域名</A><SPAN>|</SPAN> <A href="#">中文域名</A><SPAN>|</SPAN> <A href="#">通用網(wǎng)址</A><SPAN>|</SPAN> <A href="#">域名交易</A><SPAN>|</SPAN> <A href="#">域名幫助</A><SPAN>|</SPAN> <A href="#">智能加速</A> </DIV></LI> <LI><SPAN class=v><A href="#">腳本下載</A></SPAN> <DIV class=kind_menu style="LEFT: 40px"> <A href="#">網(wǎng)絡(luò)營(yíng)銷外包</A> <SPAN>|</SPAN> <A href="#">網(wǎng)頁特效代碼</A> </DIV></LI> <LI><SPAN class=v><A href="#">網(wǎng)頁特效</A></SPAN> <DIV class=kind_menu style="LEFT: 40px"> <A href="#">網(wǎng)絡(luò)外包</A> <SPAN>|</SPAN> <A href="#">網(wǎng)絡(luò)營(yíng)銷</A> <SPAN>|</SPAN> <A href="#">特效代碼</A> </DIV></LI> <LI><SPAN class=v><A >百度一下</A></SPAN> <DIV class=kind_menu style="LEFT: 40px"> <A href="#">網(wǎng)絡(luò)外包</A> <SPAN>|</SPAN> <A href="#">營(yíng)銷外包</A> <SPAN>|</SPAN> <A href="#">網(wǎng)頁特效</A> </DIV></LI> </UL> </DIV><!--nav--> </DIV><!--nav_wrap--> <SCRIPT type=text/javascript> var site_url = window.location.href.toLowerCase(); switch (true) { default : $("#nav li").attr("class",""); $("#nav li").eq(0).attr("class","nav_lishw"); $(".nav_lishw .v a").attr("class","sele"); $(".nav_lishw .kind_menu").show(); } $("#nav li").hover( function(){ clearTimeout(setTimeout("0")-1); $("#nav .kind_menu").hide(); $("#nav li .v .sele").attr("class","shutAhover"); $(this).attr("id","nav_hover") $("#nav_hover .v a").attr("class","sele"); $("#nav_hover .kind_menu").show(); }, function(){ if($(this).attr("class") != "nav_lishw"){ $("#nav_hover .v .sele").attr("class",""); $("#nav_hover .kind_menu").hide(); } $(this).attr("id","") $("#nav li .v .shutAhover").attr("class","sele"); setTimeout(function(){ $(".nav_lishw .kind_menu").show(); $(".nav_lishw .v a").attr("class","sele"); },50); } ); </SCRIPT> </body> </html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)的網(wǎng)頁豎向菜單效果代碼
- jquery實(shí)現(xiàn)在網(wǎng)頁指定區(qū)域顯示自定義右鍵菜單效果
- jQuery+CSS實(shí)現(xiàn)的網(wǎng)頁二級(jí)下滑菜單效果
- jquery實(shí)現(xiàn)很酷的網(wǎng)頁頂部圖標(biāo)下拉菜單效果
- jQuery實(shí)現(xiàn)網(wǎng)頁抖動(dòng)的菜單抖動(dòng)效果
- 深入探討JavaScript、JQuery屏蔽網(wǎng)頁鼠標(biāo)右鍵菜單及禁止選擇復(fù)制
- jquery實(shí)現(xiàn)清新實(shí)用的網(wǎng)頁菜單效果
相關(guān)文章
jQuery中$.grep() 過濾函數(shù) 數(shù)組過濾
這篇文章主要介紹了jQuery中$.grep() 過濾函數(shù) 數(shù)組過濾的相關(guān)資料,需非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11基于jQuery實(shí)現(xiàn)左右div自適應(yīng)高度完全相同的代碼
最近做前端設(shè)計(jì)時(shí)需要使左右兩個(gè)DIV高度自適應(yīng)。這其中的jquery代碼中的獲得高度用的clientHeight,介紹一下幾種不同的獲得方式以及他們的差別2012-08-08JQuery插件Marquee.js實(shí)現(xiàn)無縫滾動(dòng)效果
這篇文章主要介紹了JQuery插件Marquee.js實(shí)現(xiàn)無縫滾動(dòng)效果的相關(guān)資料,需要的朋友可以參考下2016-04-04一個(gè)簡(jiǎn)單的jquery進(jìn)度條示例
這篇文章主要介紹了一個(gè)簡(jiǎn)單的jquery進(jìn)度條示例,需要的朋友可以參考下2014-04-04jquery選擇器中的空格與大于號(hào)>、加號(hào)+與波浪號(hào)~的區(qū)別介紹
這篇文章主要介紹了jquery選擇器中的空格與大于號(hào)>、加號(hào)+與波浪號(hào)~的區(qū)別介紹的相關(guān)資料,需要的朋友可以參考下2016-06-06jquery checkbox無法用attr()二次勾選問題的解決方法
下面小編就為大家?guī)硪黄猨query checkbox無法用attr()二次勾選問題的解決方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07jQuery使用hide方法隱藏指定元素class樣式用法實(shí)例
這篇文章主要介紹了jQuery使用hide方法隱藏指定元素class樣式,實(shí)例分析了jQuery中hide隱藏class樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03