js實(shí)現(xiàn)的二級(jí)橫向菜單條實(shí)例
更新時(shí)間：2015年08月22日 15:23:23 作者：企鵝
這篇文章主要介紹了js實(shí)現(xiàn)的二級(jí)橫向菜單條,是非常美觀簡(jiǎn)潔的二級(jí)導(dǎo)航條效果,可實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的動(dòng)態(tài)響應(yīng)及頁(yè)面樣式切換功能,簡(jiǎn)單實(shí)用,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)的二級(jí)橫向菜單條。分享給大家供大家參考。具體如下：
這是一款十分清新的多級(jí)網(wǎng)頁(yè)菜單，類似滑動(dòng)門(mén)的操作風(fēng)格，鼠標(biāo)放上后，相應(yīng)的二級(jí)菜單會(huì)顯示出來(lái)，我覺(jué)得挺漂亮的，適合許多網(wǎng)站使用，不相信么？點(diǎn)擊“運(yùn)行代碼”看效果吧。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-2row-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">
<TITLE>藍(lán)色二級(jí)橫向滑動(dòng)導(dǎo)航菜單</TITLE>
<style type=text/css>
UL {
LIST-STYLE-TYPE: none;
padding:0px;
margin:0px;
}
LI {
FONT-SIZE: 12px;
COLOR: #333;
LINE-HEIGHT: 1.5em;
FONT-FAMILY: "微軟雅黑", Arial, Verdana;
}
.hide {
DISPLAY: none
}
#mainmenu_top UL LI .menuhover {
BACKGROUND: url(images/mainmenu_s.gif) no-repeat;
COLOR: #fff;
}
#mainmenu_top UL LI A {
MARGIN-TOP: 2px;
CURSOR: pointer;
PADDING-TOP: 8px;
HEIGHT: 20px;
text-decoration: none;
}
#mainmenu_top {
width:100%;
HEIGHT: 28px;
display:block;
overflow:hidden;
}
#mainmenu_top UL LI {FLOAT: left}
#mainmenu_top UL LI A {
WIDTH: 81px;
height:auto;
DISPLAY: block;
COLOR: #666666;
TEXT-ALIGN: center;
BACKGROUND: url(images/mainmenu_h.gif) no-repeat;
}
#mainmenu_bottom {
width:100%;
height:32px;
line-height:32px;
display:block;
overflow:hidden;
BACKGROUND: url(images/mainmenu_bg.jpg) repeat-x
}
#mainmenu_bottom .mainmenu_rbg {
HEIGHT: 32px;
COLOR: #fff;
MARGIN-LEFT: 0px;
PADDING: 0px 0px 0px 5px;
BACKGROUND: url(images/mainmenu_r.gif) no-repeat right 50%;
}
#mainmenu_bottom UL {}
#mainmenu_bottom UL LI {
PADDING-LEFT: 8px;
FLOAT: left;
MARGIN-LEFT: 7px;
HEIGHT: 32px;
}
#mainmenu_bottom UL LI.se {
FLOAT: left;
MARGIN-LEFT: 7px;
HEIGHT: 32px;
PADDING-LEFT: 8px;
BACKGROUND: url(images/menulink_bg_l.gif) no-repeat;
}
#mainmenu_bottom UL LI A {
COLOR: #fff;
LINE-HEIGHT: 32px;
PADDING-RIGHT: 18px;
DISPLAY: block;
text-decoration: none;
BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%;
}
#mainmenu_bottom UL LI A:hover {
BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%;
color: #FFCC00;
}
#mainmenu_bottom UL LI A.se {
COLOR: #fff;
LINE-HEIGHT: 32px;
PADDING-RIGHT: 18px;
DISPLAY: block;
BACKGROUND: url(images/menulink_bg_r.gif) no-repeat right 50%;
}
</style>
<SCRIPT type=text/javascript>
var waitting = 1;
var secondLeft = waitting;
var timer;
var sourceObj;
var number;
function getObject(objectId)//獲取id的函數(shù)
{
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
}
function SetTimer()//主導(dǎo)航時(shí)間延遲的函數(shù)
{
for(j=1; j <10; j++){
if (j == number){
if(getObject("mm"+j)!=false){
getObject("mm"+ number).className = "menuhover";
getObject("mb"+ number).className = "";
}
}
else{
if(getObject("mm"+j)!=false){
getObject("mm"+ j).className = "";
getObject("mb"+ j).className = "hide";
}
}
}
}
function CheckTime()//設(shè)置時(shí)間延遲后
{
secondLeft--;
if ( secondLeft == 0 )
{
clearInterval(timer);
SetTimer();
}
}
function showM(thisobj,Num)//主導(dǎo)航鼠標(biāo)滑過(guò)函數(shù),帶時(shí)間延遲
{
number = Num;
sourceObj = thisobj;
secondLeft = 1;
timer = setTimeout('CheckTime()',100);
}
function OnMouseLeft()//主導(dǎo)航鼠標(biāo)移出函數(shù),清除時(shí)間函數(shù)
{
clearInterval(timer);
}
function mmenuURL()//主導(dǎo)航、二級(jí)導(dǎo)航顯示函數(shù)
{
var thisURL = document.URL;
tmpUPage = thisURL.split( "/" );
thisUPage_s = tmpUPage[ tmpUPage.length-2 ];
thisUPage_s= thisUPage_s.toLowerCase();//小寫(xiě)
if(thisUPage_s=="#"||thisUPage_s=="#"||thisUPage_s=="#")
{
getObject("mm1").className="menuhover"
getObject("mb1").className = "";
}
else if(thisUPage_s=="domain")
{
getObject("mm2").className="menuhover"
getObject("mb2").className = "";
}
else if(thisUPage_s=="hosting")
{
getObject("mm3").className="menuhover"
getObject("mb3").className = "";
}
else if(thisUPage_s=="mail")
{
getObject("mm4").className="menuhover"
getObject("mb4").className = "";
}
else if(thisUPage_s=="solutions"||thisUPage_s=="site"){
getObject("mm5").className="menuhover"
getObject("mb5").className = "";
}
else if(thisUPage_s=="promotion"){
getObject("mm6").className="menuhover"
getObject("mb6").className = "";
}
else if(thisUPage_s=="trade"||thisUPage_s=="phonetic"||thisUPage_s=="switchboard"||thisUPage_s=="note"){
getObject("mm7").className="menuhover"
getObject("mb7").className = "";
}
else if(thisUPage_s=="benefit"){
getObject("mm8").className="menuhover"
getObject("mb8").className = "";
}
else if(thisUPage_s=="userlogon"||thisUPage_s=="domain_service"||thisUPage_s=="hosting_service"||thisUPage_s=="mail_service"||thisUPage_s=="Payed"||thisUPage_s=="unPayed"||thisUPage_s=="Invoice"||thisUPage_s=="Finance"||thisUPage_s=="RegInfoModify"){
getObject("mm9").className="menuhover"
getObject("mb9").className = "";
}
else
{
getObject("mm1").className="";
getObject("mb1").className = "";
}
}
window.load=mmenuURL()
</SCRIPT>
<!--導(dǎo)航開(kāi)始-->
<DIV id=mainmenu_body>
<!--主導(dǎo)航開(kāi)始-->
<DIV id=mainmenu_top>
<UL>
<LI><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="#" target=_parent>網(wǎng)站首頁(yè)</A> </LI>
<LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="#" target=_parent>JS代碼</A> </LI>
<LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="#" target=_parent>電子商務(wù)</A> </LI>
<LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="#" target=_parent>腳本下載</A> </LI>
<LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="#" target=_parent>建站技巧</A> </LI>
<LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS技巧</A> </LI>
<LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS導(dǎo)航菜單</A> </LI>
<LI style="DISPLAY: none"><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="#" target=_parent>菜單特效</A> </LI>
<LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="#" target=_parent>SEO優(yōu)化</A> </LI></UL>
</DIV>
<!--子導(dǎo)航導(dǎo)航開(kāi)始-->
<DIV id=mainmenu_bottom>
<DIV class=mainmenu_rbg>
<UL class=hide id=mb1>
<LI><A href="#">腳本下載-中小企業(yè)菜單特效專家</A> </LI>
<LI><A href="#">網(wǎng)站公告：腳本下載歡迎您~</A> </LI>
</UL>
<UL class=hide id=mb2>
<LI style="DISPLAY: none"><A href="#" target=_parent>腳本下載</A> </LI>
<LI><A href="#" target=_parent>腳本下載</A> </LI>
<LI><A href="#" target=_parent>腳本下載</A> </LI>
<LI><A href="#" target=_parent>腳本下載</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)頁(yè)特效</A> </LI></UL>
<UL class=hide id=mb3>
<LI style="DISPLAY: none"><A href="#" target=_parent>腳本下載</A> </LI>
<LI style="MARGIN-LEFT: 7px"><A href="#" target=_parent>腳本下載</A> </LI>
<LI><A href="#" target=_parent>菜單特效</A> </LI>
<LI><A href="#" target=_parent>菜單特效</A> </LI>
<LI><A href="#" target=_parent>菜單特效</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)頁(yè)特效</A> </LI></UL>
<UL class=hide id=mb4>
<LI style="DISPLAY: none; MARGIN-LEFT: 80px"><A href="#" target=_parent>腳本下載</A> </LI>
<LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>網(wǎng)頁(yè)特效</A> </LI>
<LI><A href="#" target=_parent>菜單特效</A> </LI>
<LI><A href="#" target=_parent>菜單特效</A> </LI></UL>
<UL class=hide id=mb5>
<LI style="DISPLAY: none"><A href="#" target=_parent>腳本下載</A> </LI>
<LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>服務(wù)器租用</A> </LI>
<LI><A href="#" target=_parent>菜單特效</A> </LI>
<LI><A href="#" target=_parent>超級(jí)機(jī)房</A> </LI>
<LI><A href="#" target=_parent>腳本下載</A> </LI></UL>
<UL class=hide id=mb6>
<LI style="DISPLAY: none"><A href="#" target=_parent>腳本下載</A> </LI>
<LI style="MARGIN-LEFT: 160px"><A href="#" target=_parent>腳本下載</A> </LI>
<LI><A href="#" target=_parent>腳本下載</A> </LI>
<LI><A href="#" target=_parent>腳本下載</A> </LI></UL>
<UL class=hide id=mb7>
<LI style="DISPLAY: none"><A href="#" target=_parent>腳本下載</A> </LI>
<LI style="MARGIN-LEFT: 180px"><A href="#" target=_parent>腳本下載</A> </LI>
<LI><A href="#" target=_parent>腳本下載</A> </LI>
<LI><A href="#" target=_parent>個(gè)人建站</A> </LI>
<LI><A href="#" target=_parent>門(mén)戶建站</A> </LI></UL>
<UL class=hide id=mb8 style="DISPLAY: none">
<LI style="MARGIN-LEFT: 270px"><A href="/agent/" target=_parent>腳本下載</A> </LI>
<LI><A href="#" target=_parent>菜單特效</A> </LI>
<LI><A href="#" target=_parent>菜單特效</A> </LI></UL>
<UL class=hide id=mb9>
<LI style="MARGIN-LEFT: 180px"><A href="/agent/">腳本下載</A> </LI>
<LI><A href="#" target=_parent>菜單特效</A> </LI>
<LI><A href="#" target=_parent>菜單特效</A> </LI>
<LI><A href="#" target=_parent>菜單特效</A> </LI></UL>
</DIV>
</DIV>
</DIV>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 鼠標(biāo)經(jīng)過(guò)顯示二級(jí)菜單js特效
- js實(shí)現(xiàn)向右橫向滑出的二級(jí)菜單效果
- js+css實(shí)現(xiàn)超簡(jiǎn)潔的二級(jí)下拉菜單效果代碼
- 基于dropdown.js實(shí)現(xiàn)的兩款美觀大氣的二級(jí)導(dǎo)航菜單
- js實(shí)現(xiàn)簡(jiǎn)潔大方的二級(jí)下拉菜單效果代碼
- js實(shí)現(xiàn)橫向伸展開(kāi)的二級(jí)導(dǎo)航菜單代碼
- js實(shí)現(xiàn)的黑背景灰色二級(jí)導(dǎo)航菜單效果代碼
- js實(shí)現(xiàn)的全國(guó)省市二級(jí)聯(lián)動(dòng)下拉選擇菜單完整實(shí)例
- jquery實(shí)現(xiàn)下拉菜單的二級(jí)聯(lián)動(dòng)利用json對(duì)象從DB取值顯示聯(lián)動(dòng)
- js下拉框二級(jí)關(guān)聯(lián)菜單效果代碼具體實(shí)現(xiàn)
- JS實(shí)現(xiàn)超精簡(jiǎn)響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼
相關(guān)文章
這篇文章主要介紹了詳解微信小程序?qū)徍瞬煌ㄟ^(guò)的解決方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
js查看一個(gè)函數(shù)的執(zhí)行時(shí)間實(shí)例代碼
本篇文章給大家分享一段實(shí)例代碼，主要介紹js查看一個(gè)函數(shù)的執(zhí)行時(shí)間，代碼簡(jiǎn)單易懂，感興趣的朋友一起跟著小編來(lái)學(xué)習(xí)學(xué)習(xí)吧2015-09-09
js為數(shù)字添加逗號(hào)并格式化數(shù)字的代碼
數(shù)字添加逗號(hào)的方法有很多，在本將為大家介紹下使用js來(lái)實(shí)現(xiàn)，具體如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
因?yàn)镴avaScript具有自動(dòng)垃圾回收機(jī)制，所以對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)，內(nèi)存空間并不是一個(gè)經(jīng)常被提及的概念。特別是很多不是計(jì)算機(jī)專業(yè)的朋友在進(jìn)入到前端之后，會(huì)對(duì)內(nèi)存空間的認(rèn)知比較模糊，甚至有些人干脆就是一無(wú)所知。為了解決大家的疑惑，本文將詳細(xì)介紹JS內(nèi)存空間2021-06-06
這篇文章主要介紹了JS繼承，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
下面小編就為大家?guī)?lái)一篇?jiǎng)h除table表格行的實(shí)例講解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
百度前臺(tái)js筆試題與答案...2007-09-09
JavaScript實(shí)現(xiàn)簡(jiǎn)單購(gòu)物小表格
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單購(gòu)物小表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JS逆向之?webpack?打包站點(diǎn)實(shí)戰(zhàn)原理分享
本文主要介紹了JS逆向之webpack打包站點(diǎn)實(shí)戰(zhàn)原理分享，webpack是前端程序員用來(lái)進(jìn)行打包JS的技術(shù)，打包之后的代碼特征非常明顯，更多相關(guān)知識(shí)需要的小伙伴可以參考下面文章詳細(xì)內(nèi)容2022-06-06
javascript中的parseInt和parseFloat區(qū)別
這篇文章用簡(jiǎn)單的小例子演示了parseInt和parseFloat區(qū)別，有需要的朋友可以參考一下2013-07-07