不用說自己菜不菜的，能有這個學習的精神已經很值得鼓勵了
呵呵，下面，我來給你介紹幾個網站常見的菜單
第一個：仿網易的滑動門導航菜單
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿網易的滑動門技術，用DIV+CSS技術實現</title>
<style type="text/css">
<!--
#header {
background-color: #F8F4EF;
height: 200px;
width: 400px;
margin: 0px;
padding: 0px;
border: 1px solid #ECE1D5;
font-family: "宋體";
font-size: 12px;
}
#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display: block;
width: 100px;
text-align: center;
float: left;
margin: 0px;
padding-top: 0.2em;
padding-right: 0px;
padding-bottom: 0.2em;
padding-left: 0px;
cursor: hand;
}
.sec1 { background-color: #FFFFCC;}
.sec2 { background-color: #00CCFF;}
.block { display: block;}
.unblock { display: none;}
-->
</style>
</head>
<body>
<script language=javascript>
function secBoard(n)
{
for(i=0;i<menu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes[n].className="sec2";
for(i=0;i<main.childNodes.length;i++)
main.childNodes[i].style.display="none";
main.childNodes[n].style.display="block";
}
</script>
<div id="header">
<ul id="menu">
<li onMouseOver="secBoard(0)" class="sec2">最新新聞</li>
<li onMouseOver="secBoard(1)" class="sec1">最新文章</li>
<li onMouseOver="secBoard(2)" class="sec1">最新日誌</li>
<li onMouseOver="secBoard(3)" class="sec1">論壇新帖</li>
</ul>
<!--內容顯示區域-->
<ul id="main">
<li class="block">第一個內容</li>
<li class="unblock">第二個內容</li>
<li class="unblock">第三個內容</li>
<li class="unblock">第四個內容</li>
</ul>
<!--內容顯示區域-->
</div>
</body>
</html>
這里基本上是使用Css與Div的結合，在整個布局中已層為單位，實行滑動菜單的是一個javascript腳本函數，調用就可以了，看不懂不要緊，日漸積累才是重要
第二個：經典實用的觸發型導航（這是滑鼠單擊事件控制）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>網頁特效代碼|jsCode.CN|---經典實用的觸發型導航菜單</title>
</head>
<body>
<STYLE type=text/css>.sec1 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP:
#ffffff 1px solid; BORDER-LEFT: #ffffff 1px
solid; CURSOR: hand; COLOR: #000000; BORDER-
BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR:
#eeeeee
}
.sec2 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP:
#ffffff 1px solid; FONT-WEIGHT: bold; BORDER-
LEFT: #ffffff 1px solid; CURSOR: hand; COLOR:
#000000; BACKGROUND-COLOR: #d4d0c8
}
.main_tab {
BORDER-RIGHT: gray 1px solid; BORDER-
LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-
BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
}
</STYLE>
<!--JavaScript部分-->
<SCRIPT language=javascript>
function secBoard(n)
{
for(i=0;i<secTable.cells.length;i++)
secTable.cells
[i].className="sec1";
secTable.cells[n].className="sec2";
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies
[i].style.display="none";
mainTable.tBodies
[n].style.display="block";
}
</SCRIPT>
<!--HTML部分-->
<TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
<TBODY>
<TR align=middle height=20>
<TD class=sec2 onclick=secBoard(0) width="10%">關於TBODY標記</TD>
<TD class=sec1 onclick=secBoard(1) width="10%">關於cells集合</TD>
<TD class=sec1 onclick=secBoard(2) width="10%">關於tBodies集合</TD>
<TD class=sec1 onclick=secBoard(3) width="10%">關於display屬性</TD></TR></TBODY></TABLE>
<TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0><!--關於TBODY標記-->
<TBODY style="DISPLAY: block">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>指定行做為表體。
<BR>注釋：TBODY要素是塊要素，並且需要結束標
簽。<BR> 即使如果表格沒有顯式定義TBODY
要素，該要素也提供給所有表。<BR><BR>
參考：《動態HTML參考和開發應用大全》（人民郵電出
版社
Microsoft Corporation著
北京華中興業科技發展有限公司
譯）
<BR><BR></TD></TR></TB
ODY></TABLE></TD></TR></T
BODY><!--關於cells集合-->
<TBODY style="DISPLAY:
none">
<TR>
<TD vAlign=top
align=middle><BR><BR>
<TABLE cellSpacing=0
cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>檢索錶行或者整個
表中所有單元格的集合。<BR>應用於TR、TABLE。
<BR><BR>參考：《動態HTML參考和開發應
用大全》（人民郵電出版社
Microsoft Corporation著
北京華中興業科技發展有限公司
譯）
<BR><BR></TD></TR></TB
ODY></TABLE></TD></TR></T
BODY><!--關於tBodies集合-->
<TBODY style="DISPLAY:
none">
<TR>
<TD vAlign=top
align=middle><BR><BR>
<TABLE cellSpacing=0
cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>檢索表中所有TBODY
對象的集合。對象在該集合中按照HTML源順序排列。
<BR>應用於TABLE。<BR><BR>參考：
《動態HTML參考和開發應用大全》（人民郵電出版社
Microsoft Corporation著
北京華中興業科技發展有限公司
譯）
<BR><BR></TD></TR></TB
ODY></TABLE></TD></TR></T
BODY><!--關於display屬性-->
<TBODY style="DISPLAY:
none">
<TR>
<TD vAlign=top
align=middle><BR><BR>
<TABLE cellSpacing=0
cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>設置或者檢索對象
是否被提供。<BR>可能的值為block、none、
inline、list-item、table-header-group、table-
footer-group。<BR>該特性可讀寫，塊要素默認
值為block，內聯要素默認值為inline；層疊樣式表
（CSS）屬性不可繼承。<BR><BR>參考：《
動態HTML參考和開發應用大全》（人民郵電出版社
Microsoft Corporation著
北京華中興業科技發展有限公司譯）
<BR><BR><A
href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true" target=_blank>點擊此處
</A>可參閱微軟<A href="http://msdn.microsoft.com/" target=_blank>MSDN在線</A>上的解釋。
</TD></TR></TBODY></TABLE>
;</TD></TR></TBODY></TABLE&g
t;</body>
</html>
這里跟上面不同的區別在與這是滑鼠移動和滑動的事件區別！
第三個：仿拍拍的切換效果菜單（裡面的圖片是我放上去的，所以會看不到圖片的，呵呵 繼續）
<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<title>網頁特效|網頁特效代碼(JsHtml.cn)---仿拍拍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="http://www.jshtml.cn" 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="http://www.jshtml.cn" target="_blank">
<div>
<img alt="攝像頭集結號給你新的感覺" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65" /></div>
<div>
攝像頭集結號<br />
給你新的感覺</div>
</a><a href="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" target="_blank">
<div>
<img alt="聖誕拍拍特供電腦周邊4折" src="/jsimages/UploadFiles_3321/200804/2008042308550.jpg" width="65" height="65" /></div>
<div>
聖誕拍拍特供<br />
電腦周邊4折</div>
</a>
<a class="saleItem" href="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" target="_blank">
<div>
<img alt="展現高貴氣質騎士系馬靴" src="/jsimages/UploadFiles_3321/200804/20080423085516202.jpg" width="65" height="65" /></div>
<div>
展現高貴氣質<br />
騎士系馬靴</div>
</a><a href="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" 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="http://www.jshtml.cn" target="_blank">
<div>
<img alt="我愛我家家居大搶購" src="/jsimages/UploadFiles_3321/200804/20080423085516954.jpg" width="65" height="65" /></div>
<div>
我愛我家<br />
家居大搶購</div>
</a><a href="http://www.jshtml.cn" 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="http://www.jshtml.cn/">網頁特效代碼</a></p>
</body>
</html>
這個仿拍拍基本上就是2層放圖片，但用起來的效果還是可以的，如果不喜歡我還有下面呢，慢慢學，總會看懂的 (最重要的還是Css哦)
這個主要就是讓層實現隱藏 我覺得這個在層使用方面還是好的
從總體上看，在實現層與層之間的交互，在其代碼 我覺得你有必要去認真看下 ！
以上是我介紹額度菜單，雖然不是很強大，但是卻很使用，而且在J2EE中
菜單基本上是一個假象，都是用層與Css之間的特效做出來的！
學會了層的具體應用，我相信你也可以有自己特色的菜單的
那我祝你好運咯！！加油！！
⑵ js導航欄
<!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 type="text/css">
.nTab{
float: left;
width: 100%;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
font-size: 12px;
text-align: center;
margin: 0;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}
</style>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>
</head>
<body>
這是html做的靜態頁面
<br />
<br />
<div align="center" style="padding-left:25px;">
<!-- 選項卡0開始 -->
<div class="nTab">
<!-- 標題開始 -->
<div class="TabTitle">
<ul id="myTab0">
<li class="active" onmouseover="nTabs(this,0);">全部</li>
<li class="normal" onmouseover="nTabs(this,1);">日誌</li>
<li class="normal" onmouseover="nTabs(this,2);">咨詢</li>
<li class="normal" onmouseover="nTabs(this,3);">相冊</li>
<li class="normal" onmouseover="nTabs(this,4);">商城</li>
<li class="normal" onmouseover="nTabs(this,5);">社區</li>
</ul>
</div>
<!-- 內容開始 -->
<div class="TabContent">
<div id="myTab0_Content0"> 000 </div>
<div id="myTab0_Content1" class="none">111</div>
<div id="myTab0_Content2" class="none">222</div>
<div id="myTab0_Content3" class="none">333</div>
<div id="myTab0_Content4" class="none">444</div>
<div id="myTab0_Content5" class="none">555</div>
</div>
</div>
<!-- 選項卡0結束 -->
<!-- 選項卡1開始 -->
<div class="nTab" style=width:288px>
<!-- 標題開始 -->
<div class="TabTitle">
<ul id="myTab1">
<li class="active" onclick="nTabs(this,0);">aaa</li>
<li class="normal" onclick="nTabs(this,1);">bbb</li>
<li class="normal" onclick="nTabs(this,2);">ccc</li>
<li class="normal" onclick="nTabs(this,3);">單擊</li>
</ul>
</div>
<!-- 內容開始 -->
<div class="TabContent">
<div id="myTab1_Content0"> 000 </div>
<div id="myTab1_Content1" class="none"> 111 </div>
<div id="myTab1_Content2" class="none"> 222 </div>
<div id="myTab1_Content3" class="none"> 333 </div>
</div>
</div>
<!-- 選項卡1結束 -->
</div>
</body>
</html>
這是模擬實現的！
具體的樣式你自己改改吧1！！
⑶ 用div和js做一個導航
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
<!--
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
li {
float: left;
}
a, a:visited {
display: block;
height: 40px;
width: 80px;
text-align: center;
line-height: 40px;
color: #000000;
background-image: url(normal.gif);
background-repeat: no-repeat;
text-decoration: none;
}
a:hover {
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
background-image: url(hover.gif);
}
-->
</style>
</head>
<body>
<ul>
<li><a href="#">dfsdf</a></li>
<li><a href="#">sdfasdf</a></li>
<li><a href="#">asdfasdf</a></li>
<li><a href="#">asdfasd </a></li>
<li><a href="#">新加</a></li>
</ul>
</body>
</html>
自己找兩個圖片，一個叫normal.gif.一個叫hover.gif