極酷的三層分離的標(biāo)準(zhǔn)滑動(dòng)門(mén)導(dǎo)航菜單

互聯(lián)網(wǎng) 發(fā)布時(shí)間：2009-04-02 19:34:43 作者：佚名

網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：本文一步一步手把手教你打造一個(gè)極酷的三層分離的標(biāo)準(zhǔn)滑動(dòng)門(mén)導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無(wú)所不用其極”，即便你是菜鳥(niǎo)，相信你看了本文后，也能打造出屬于自己的超級(jí)漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。

本文一步一步手把手教你打造一個(gè)極酷的三層分離的標(biāo)準(zhǔn)滑動(dòng)門(mén)導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無(wú)所不用其極”，即便你是菜鳥(niǎo)，相信你看了本文后，也能打造出屬于自己的超級(jí)漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。
現(xiàn)在在各種主流瀏覽器中看看你的成果，是否顯示得完全一樣呢！

圖五
至此，一個(gè)極酷的標(biāo)準(zhǔn)的滑動(dòng)門(mén)導(dǎo)航菜單就在你手中誕生了！
總結(jié)：我們?cè)谥谱鬟@些案例時(shí)，要隨時(shí)留意自己的結(jié)構(gòu)，讓它能保持良好的前后伸展性。盡量杜決冗余的無(wú)語(yǔ)義的標(biāo)簽，這在一個(gè)流水線似的工作環(huán)境中尤其顯得重要。給后端程序帶來(lái)巨大的方便的同時(shí)，也使自己的代碼看來(lái)比較舒服！
至此，一個(gè)極酷的標(biāo)準(zhǔn)的滑動(dòng)門(mén)導(dǎo)航菜單就在你手中誕生了！
總結(jié)：我們?cè)谥谱鬟@些案例時(shí)，要隨時(shí)留意自己的結(jié)構(gòu)，讓它能保持良好的前后伸展性。盡量杜決冗余的無(wú)語(yǔ)義的標(biāo)簽，這在一個(gè)流水線似的工作環(huán)境中尤其顯得重要。給后端程序帶來(lái)巨大的方便的同時(shí)，也使自己的代碼看來(lái)比較舒服！
本實(shí)例測(cè)試的兼容性環(huán)境是：
IE6/IE7/FF3/TT/OPERA9.63/谷歌瀏覽器測(cè)試通過(guò)，其它的瀏覽器請(qǐng)朋友幫忙測(cè)試一下。
運(yùn)行代碼框

<!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=utf-8" />

<title>冰極峰作品：手工打造極酷的分離式滑動(dòng)門(mén)導(dǎo)航菜單</title>

<style type="text/css">

/*——————————————————————————————————————————

作者：冰極峰

blog地址:http://www.cnblogs.com/binyong/

時(shí)間：2009-3-15

——————————————————————————————————————————*/

*{margin:0;padding:0;}/*將它統(tǒng)一成一個(gè)模樣吧，不然在各個(gè)瀏覽器下，你會(huì)死得很難看*/

body{background:#999;}

a{outline:none;}

#wrapper{margin:100px auto 20px;text-align:center;width:640px;}

ul{list-style:none;}/*去掉小圓點(diǎn)吧*/

li{float:left;height:53px;background:url(/articleimg/2009/03/6511/bg.gif) repeat-x left bottom;overflow:hidden;}/*水平排列并來(lái)點(diǎn)間距吧，不要把我擠得太緊了。*/

.normal,.over,.cur{display:inline-block;padding-right:30px;padding-top:10px;*padding-top:0;padding-bottom:13px;*padding-bottom:0;height:36px;background:url(/articleimg/2009/03/6511/button.gif) no-repeat right -36px; text-decoration:none;font-size:12px;color:#fff;}

.normal span,.over span,.cur span{display:inline-block;padding-left:30px;padding-top:10px;*padding-top:0;padding-bottom:13px;*padding-bottom:0;height:36px;line-height:36px;background:url(/articleimg/2009/03/6511/button.gif) no-repeat left top;font-weight:bold;}

.normal,.normal span,.over,.over span,.cur,.cur span{display:inline;cursor:pointer;}

.over{background:url(/articleimg/2009/03/6511/button.gif) no-repeat right -108px;}

.over span{background:url(/articleimg/2009/03/6511/button.gif) no-repeat left -72px;}

.cur{background:url(/articleimg/2009/03/6511/button.gif) no-repeat right -180px;}

.cur span{background:url(/articleimg/2009/03/6511/button.gif) no-repeat left -144px;}

.blog{clear:both;margin:0px auto;text-align:center;width:640px;color:#fff;}

</style>

</head>

<body>

<div id="wrapper">

<div id="nav">

<ul id="menu">

<li><a href="#none" title="首頁(yè)" ><span>首　頁(yè)</span></a></li>

<li><a href="#none" title="新隨筆"><span>新隨筆</span></a></li>

<li><a href="#none" title="聯(lián)系"><span>聯(lián)　系</span></a></li>

<li><a href="#none" title="管理"><span>管　理</span></a></li>

<li><a href="#none" title="訂閱"><span>訂　閱</span></a></li>

<li><a href="#none" title="冰極峰"><span>冰極峰博客</span></a></li>

</ul>

</div>

</div>

<div class="blog">歡迎光臨我的博客:<a href="http://www.cnblogs.com/binyong/" target="_blank">http://www.cnblogs.com/binyong/</a></div>

</body>

</html>

<script type="text/javascript">

/*三態(tài)高亮菜單*/

// 作者:冰極峰

// 時(shí)間:2009-3-15

// 作用:此腳本用于設(shè)置三態(tài)導(dǎo)航菜單的高亮顯示.

function getObj(objName){return(document.getElementById(objName));}

//全局變量,菜單數(shù)量和當(dāng)前選中菜單的序號(hào)

var temp;/*菜單ID*/

window.onload =function() {

var obj=getObj("menu");/*ul的id*/

var obj_a=obj.getElementsByTagName("a");

number=obj_a.length;

for (var i=0,j=obj_a.length;i<j;i  ){

obj_a[i].index=i;

obj_a[i].className="normal";

obj_a[i].onclick=function(){click(this)};

obj_a[i].onmouseover=function(){overme(this)};

obj_a[i].onmouseout=function(){outme(this)};

obj_a[i].onfocus=function(){this.blur()};/*去掉IE下的虛線框*/

}

if (getCookie("show_a") != null) {

obj_a[getCookie("show_a")].className="cur";

temp=getCookie("show_a")

}

else{

var obj=getObj("menu");

var obj_a=obj.getElementsByTagName("a");

obj_a[0].className="cur";

}

}

//鼠標(biāo)滑過(guò)效果

function overme(o){

if (temp!=o.index)

o.className="over";/*翻滾色樣式*/

}

//鼠標(biāo)移開(kāi)后效果

function outme(o){

if (temp!=o.index)

o.className="normal";/*翻滾色樣式*/

}

//鼠標(biāo)點(diǎn)擊效果

function click(o){

var obj=getObj("menu");

var obj_a=obj.getElementsByTagName("a");

for (var i=0,j=obj_a.length;i<j;i  ){

obj_a[i].className="normal";

}

o.className="cur";

o.blur();

setCookie("show_a",o.index,1);/*設(shè)置1分鐘后失效*/

temp=o.index

}

// --- 設(shè)置cookie

function setCookie(sName,sValue,expireMinute) {

var cookieString = sName   "="   escape(sValue);

if (expireMinute>0) {//設(shè)置過(guò)期時(shí)間

var date = new Date();

//date.setTime(date.getTime   expireHours * 3600 * 1000);//時(shí)間單位=毫秒,以小時(shí)為參數(shù)

date.setTime(date.getTime   expireMinute * 60 * 1000);//時(shí)間單位=毫秒,以分鐘為參數(shù)

cookieString = cookieString   "; expire="   date.toGMTString();

}

document.cookie = cookieString;//寫(xiě)cookie

}

//--- 獲取cookie

function getCookie(sName) {

var aCookie = document.cookie.split("; ");

for (var j=0; j < aCookie.length; j  ){

var aCrumb = aCookie[j].split("=");

if (escape(sName) == aCrumb[0])

return unescape(aCrumb[1]);

}

return null;

}

</script>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
如果看不到效果，請(qǐng)下載下面的壓縮包：menu.rar

上一頁(yè) 1 2 3 4 5下一頁(yè)閱讀全文

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

極酷的三層分離的標(biāo)準(zhǔn)滑動(dòng)門(mén)導(dǎo)航菜單

相關(guān)文章

最新評(píng)論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容