二個簡單的選單導覽列範例_HTML/Xhtml_網頁製作

選單列範例一：

複製程式碼

程式碼如下:

ttp://www.w3.org/TR/xhtml1/DTD/ xhtml1- transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

http://ajax.googleapis.com/ajax/ libs/jquery/1/jquery.min.js”>
$(function() {
$("#container .menu1 ul li") .click(function() {
var index = $("#container .menu1 ul li").index( this);
$(this).addClass("bg").siblings().removeClass ();
$("#container .menu2 ul li ul").eq(index).show() .parent().siblings("li").children("ul").hide();
})
})

• 第一欄


• 第二欄


• 第三欄

第四欄

• 第五欄 a>
• 第六欄

• 
  
  
  
  • 第一欄
  
  
  • 第一欄
  
  
  • 第一欄 li>
    
  
  


• 
  
  
  
  • 第二欄
  • 第二欄
  • 第二欄
  
  
  
  


• 
  
  
  
  • 第三欄
  • 第三欄
  • 第三欄 li>
    
  
  


• 
  
  
  
  • 第四欄
  • 第四欄
  • 第四欄
  
  
  
  


• 
  
  
  
  • 第五欄
  • 第五欄
  • 第五欄 li>
    
  
  


• 
  
  
  
  • 第六欄
  • 第六欄
  • 第六欄
  
  
  
  

;

菜單欄示例二：

複製代碼

程式碼如下：

• http://www.jb51.net/" title="首頁">首頁


• http://www.jb51.net/cat.html” title="分類清單" rel="nofollow">分類清單


• http://www.jb51.net/loc.html a>" title="地區列表" rel="nofollow">地區列表


• http://www.jb51.net/trade.html" title="供需商機" rel="nofollow">供需商機

http://www.jb51.net/news.html" title="產業新聞" rel="nofollow">產業新聞

• http: //www.jb51.net/submit.html" title="提交企業" rel="nofollow">提交企業


• http://www.jb51.net/join.html" title="發布商機" rel="nofollow">發布商機


• http://www.jb51.net/ find.html" title="進階搜尋" rel="nofollow">進階搜尋