ナビゲーション効果のjs css実装 example_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
 
 

 
 

 
 

 

 
 <スクリプトタイプ="text/javascript"> 
 for(var x = 1; x  {
 var menuid = document.getElementById("menu" x); 
 メニューID.num = x; 
 タイプ（）; 
 }
 関数 type()
 {
 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.length; i )
  {
  menuli[i].num = i; 
  var liul = menuli[i].getElementsByTagName("ul")[0]; 
   if(リル)
   {
   typeshow()
   }
  }
 関数 typeshow()
 {
 menuli[i].onmouseover = showul; 
 menuli[i].onmouseout = unshowul; 
 }
 関数 showul()
 {
 menuli[this.num].getElementsByTagName("ul")[0].className = "ブロック"; 
 }
 関数 unshowul()
 {
 menuli[this.num].getElementsByTagName("ul")[0].className = ""; 
 }
 }
  
 

2. 程序效果

ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。