呵呵,下面,我來給妳介紹幾個網站常見的菜單
第壹個:仿網易的滑動門導航菜單
<html xmlns="" />
<meta )---仿拍拍paipai.com首頁產品圖片隨機輪顯切換效果</title><style>
body {font-size:12px}
img {border:0px}
#sale{right:206px;top:0;width:260px;background:#fff}
#saleTitle{text-align:right;padding-top:5px;padding-right:5px;width:255px;height:20px;background:url("images/saleTitle.gif") no-repeat}
#saleList{margin-top:5px}
#saleList .saleTwo{height:108px;background:url("images/salelineH.gif") bottom repeat-x;}
#saleList a{display:block;height:108px;width:86px;text-align:center;float:left;overflow:hidden}
#saleList a.saleItem{background:url("images/salelineV.gif") right repeat-y;}
#saleList a img{margin:5px 0}
#saleList a:hover{background-color:#EBFFC5}
</style>
<script type="text/javascript">
rnd.today=new Date();
rnd.seed=rnd.today.getTime();
function rnd(){
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
}
function rand(number){
return Math.ceil(rnd()*number)-1;
}
function nextSale(order){
if(order=="up") saleNum--;
else saleNum++;
if(saleNum>2) saleNum=0
else if(saleNum<0) saleNum=2;
//alert(saleNum);
for(i=0;i<3;i++)
document.getElementById("saleList"+i).style.display="none";
document.getElementById("saleList"+saleNum).style.display="";
}
</script>
</head>
<body>
<div id="sale" class="absolute overflow">
<div id="saleTitle" class="absolute">
<a href="javascript:nextSale('up')" title="點擊到上壹屏">
<img src="images/saleFore.gif" hspace="4" onmouseover="this.src='images/saleForeOver.gif'" onmouseout="this.src='images/saleFore.gif'" /></a><a href="javascript:nextSale('down')" title="點擊到下壹屏"><img src="images/saleNext.gif" onmouseover="this.src='images/saleNextOver.gif'" onmouseout="this.src='images/saleNext.gif'" /></a></div>
<div class="overflow" style="height:330px" id="saleList">
<script type="text/javascript">var saleNum=rand(3);</script>
<div id="saleList0" style="display:none">
<div class="saleTwo">
<a class="saleItem" href="" target="_blank">
<div>
<img alt="聖誕浪漫飾品超級大促" src="/jsimages/UploadFiles_3321/200804/20080423085515804.jpg" width="65" height="65" /></div>
<div>
聖誕浪漫飾品<br />
超級大促</div>
</a>
<a class="saleItem" href="" target="_blank">
<div>
<img alt="攝像頭集結號給妳新的感覺" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65" /></div>
<div>
攝像頭集結號<br />
給妳新的感覺</div>
</a><a href="" target="_blank">
<div>
<img alt="好感度提升韓版娃娃裝" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韓版娃娃裝</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" href="" target="_blank">
<div>
<img alt="復古牛仔外套特惠119元起" src="/jsimages/UploadFiles_3321/200804/20080423085516293.jpg" width="65" height="65" /></div>
<div>
復古牛仔外套<br />
特惠119元起</div>
</a>
<a class="saleItem" href="" target="_blank">
<div>
<img alt="聖誕拍拍特供運動服3折" src="/jsimages/UploadFiles_3321/200804/20080423085516802.jpg" width="65" height="65" /></div>
<div>
聖誕拍拍特供<br />
運動服3折</div>
</a><a href="" target="_blank">
<div>
<img alt="攝像頭集結號給妳新的感覺" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65" /></div>
<div>
攝像頭集結號<br />
給妳新的感覺</div>
</a></div>
<div>
<a class="saleItem" href="" target="_blank">
<div>
<img alt="聖誕拍拍特供電腦周邊4折" src="/jsimages/UploadFiles_3321/200804/20080423085516530.jpg" width="65" height="65" /></div>
<div>
聖誕拍拍特供<br />
電腦周邊4折</div>
</a>
<a class="saleItem" href="" target="_blank">
<div>
<img alt="party扮靚甜美腮紅" src="/jsimages/UploadFiles_3321/200804/20080423085516658.jpg" width="65" width="65" height="65" /></div>
<div>
party扮靚<br />
甜美腮紅</div>
</a><a href="" target="_blank">
<div>
<img alt="好感度提升韓版娃娃裝" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韓版娃娃裝</div>
</a></div>
</div>
<div id="saleList1" style="display:none">
<div class="saleTwo">
<a class="saleItem" href="" target="_blank">
<div>
<img alt="新奇好玩便宜盡在網遊頻道" src="/jsimages/UploadFiles_3321/200804/20080423085516612.jpg" width="65" height="65" /></div>
<div>
新奇好玩便宜<br />
盡在網遊頻道</div>
</a>
<a class="saleItem" href="" target="_blank">
<div>
<img alt="展現高貴氣質騎士系馬靴" src="/jsimages/UploadFiles_3321/200804/20080423085516202.jpg" width="65" height="65" /></div>
<div>
展現高貴氣質<br />
騎士系馬靴</div>
</a><a href="" target="_blank">
<div>
<img alt="攝像頭集結號給妳新的感覺" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65" /></div>
<div>
攝像頭集結號<br />
給妳新的感覺</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" href="" target="_blank">
<div>
<img alt="永不過時條紋毛衣" src="/jsimages/UploadFiles_3321/200804/20080423085516984.jpg" width="65" height="65" /></div>
<div>
永不過時<br />
條紋毛衣</div>
</a>
<a class="saleItem" href="" target="_blank">
<div>
<img alt="聖誕拍拍特供運動鞋2折" src="/jsimages/UploadFiles_3321/200804/20080423085516651.jpg" width="65" height="65" /></div>
<div>
聖誕拍拍特供<br />
運動鞋2折</div>
</a><a href="" target="_blank">
<div>
<img alt="好感度提升韓版娃娃裝" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韓版娃娃裝</div>
</a></div>
<div>
<a class="saleItem" href="" target="_blank">
<div>
<img alt="精簡唯美索愛K630" src="/jsimages/UploadFiles_3321/200804/20080423085516302.jpg" width="65" height="65" /></div>
<div>
精簡唯美<br />
索愛K630</div>
</a>
<a class="saleItem" href="" target="_blank">
<div>
<img alt="原裝瑞士軍刀精選" src="/jsimages/UploadFiles_3321/200804/20080423085516549.jpg" width="65" width="65" height="65" /></div>
<div>
原裝瑞士軍刀<br />
精選</div>
</a><a href="" target="_blank">
<div>
<img alt="超薄機身索愛W880" src="/jsimages/UploadFiles_3321/200804/20080423085516711.jpg" width="65" height="65" /></div>
<div>
超薄機身<br />
索愛W880</div>
</a></div>
</div>
<div id="saleList2" style="display:none">
<div class="saleTwo">
<a class="saleItem" href="" target="_blank">
<div>
<img alt="各就各味秋冬飲食計劃" src="/jsimages/UploadFiles_3321/200804/20080423085516704.jpg&type=3" width="65" height="65" /></div>
<div>
各就各味<br />
秋冬飲食計劃</div>
</a><a href="" target="_blank">
<div>
<img alt="好感度提升韓版娃娃裝" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韓版娃娃裝</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" href="" target="_blank">
<div>
<img alt="聖誕拍拍特供隨身視聽5折" src="/jsimages/UploadFiles_3321/200804/20080423085516375.jpg" width="65" height="65" /></div>
<div>
聖誕拍拍特供<br />
隨身視聽5折</div>
</a><a href="" target="_blank">
<div>
<img alt="超薄機身索愛W880" src="/jsimages/UploadFiles_3321/200804/20080423085516711.jpg" width="65" height="65" /></div>
<div>
超薄機身<br />
索愛W880</div>
</a></div>
<div>
<a class="saleItem" href="" target="_blank">
<div>
<img alt="我愛我家家居大搶購" src="/jsimages/UploadFiles_3321/200804/20080423085516954.jpg" width="65" height="65" /></div>
<div>
我愛我家<br />
家居大搶購</div>
</a><a href="" target="_blank">
<div>
<img alt="超值彩妝套裝變身派對女王" src="/jsimages/UploadFiles_3321/200804/20080423085516919.jpg" width="65" width="65" height="65" /></div>
<div>
超值彩妝套裝<br />
變身派對女王</div>
</a></div>
</div>
</div>
</div>
<script type="text/javascript">document.getElementById("saleList"+saleNum).style.display="";</script>
<p> </p>
<p>更多網頁特效代碼盡在 <a href="/">網頁特效代碼</a></p>
</body>
</html>
這個仿拍拍基本上就是2層放圖片,但用起來的效果還是可以的,如果不喜歡我還有下面呢,慢慢學,總會看懂的 (最重要的還是Css哦)
這個主要就是讓層實現隱藏 我覺得這個在層使用方面還是好的
從總體上看,在實現層與層之間的交互,在其代碼 我覺得妳有必要去認真看下 !
以上是我介紹額度菜單,雖然不是很強大,但是卻很使用,而且在J2EE中
菜單基本上是壹個假象,都是用層與Css之間的特效做出來的!
學會了層的具體應用,我相信妳也可以有自己特色的菜單的
那我祝妳好運咯!!加油!!