js css實作導航效果實例_javascript技巧

本文實例講述了js css實現導航效果的方法。分享給大家供大家參考。具體實作方法如下：

1. 程式碼如下：

複製程式碼 程式碼如下:

  
 
 
 
 
 
 
 
 

 
 

 
 

菜单1

 
  

 
   

 
    
• 菜单选项1-2
 
    
•  
        菜单选项1-2 
       
   
        
  • 菜单选项1-2-1
   
        
  • 菜单选项1-2-2
   
       
   
      
 
    
• 菜单选项1-2
 
    
• 菜单选项1-2
 
   

 
  

 
 

 
 

 
 

菜单2

 
 

 
 

 
 
• 菜单选项2-2
 
 
• 菜单选项2-2 
   
   
   
  • 菜单选项2-2-1
   
   
  • 菜单选项2-2-2 
     
     
     
    • 菜单选项2-2-1
     
     
    • 菜单选项2-2-2 
       
     
     
     
     
   
   
   
   
 
 
• 菜单选项2-2
 
 
• 菜单选项2-2
 
 

 
 

 
 

 
 

 
 

菜单3

 
 

 
 

 
 
• 菜单选项3-2
 
 
• 菜单选项3-2 
   
   
   
  • 菜单选项3-2-1
   
   
  • 菜单选项3-2-2 
     
     
     
    • 菜单选项3-2-1
     
     
    • 菜单选项3-2-2 
       
       
       
      • 菜单选项3-2-1
       
       
      • 菜单选项3-2-2
       
       
       
       
     
     
     
     
   
   
   
   
 
 
• 菜单选项3-2
 
 
• 菜单选项3-2
 
 

 
 

 
 

 

 
  
 for(var x = 1; x  { 
 var menuid = document.getElementById("選單" x); 
 menuid.num = x； 
 類型（）; 
 } 
 函數類型()
 { 
 var menuh2 = menuid.getElementsByTagName("h2"); 
 var menuul = menuid.getElementsByTagName("ul"); 
 var menuli = menuul[0].getElementsByTagName("li"); 
 menuh2[0].onmouseover = 顯示； 
 menuh2[0].onmouseout = 取消顯示； 
 menuul[0].onmouseover = 顯示； 
 menuul[0].onmouseout = 取消顯示； 
 函數 show()
 { 
 menuul[0].className = "clearfix typeul 區塊" 
 } 
 函數 unshow()
 { 
 menuul[0].className = "typeul" 
 } 
 for(var i = 0; i   { 
  menuli[i].num = i； 
  var liul = menuli[i].getElementsByTagName("ul")[0]; 
   if(liul)
   { 
   類型顯示（）
   } 
  } 
 函數 typeshow()
 { 
 menuli[i].onmouseover = showul； 
 menuli[i].onmouseout = unshowul; 
 } 
 函數 showul()
 { 
 menuli[this.num].getElementsByTagName("ul")[0].className = "block"; 
 } 
 函數 unshowul()
 { 
 menuli[this.num].getElementsByTagName("ul")[0].className = ""; 
 } 
 } 
 腳本> 
正文>