jQueryでアコーディオンメニューを作る

デモ/サンプル

• メニュー 1
• メニュー 2
  • サブメニュー 2a
  • サブメニュー 2b
  • サブメニュー 2c
• メニュー 3
• メニュー 4
  • メニュー 4a
  • メニュー 4b
  • メニュー 4c
  • メニュー 4d
• メニュー 5
  • サブメニュー 5a
  • サブメニュー 5b
  • サブメニュー 5c

HTML

  
メニュー 1
   
  
メニュー 2   
    

      
サブメニュー 2a
            
      
サブメニュー 2b
   
      
サブメニュー 2c
    
    
   
  
   
  
メニュー 3
   
  
メニュー 4
  	

  		
メニュー 4a
  		
メニュー 4b
  		
メニュー 4c
  		
メニュー 4d
  	
  
   
  
メニュー 5   
    
   
      
サブメニュー 5a
   
      
サブメニュー 5b
   
      
サブメニュー 5c
   
    
   
  
 

JavaScript

JavaScriptファイルは「js」フォルダに格納されている設定なので自分のフォルダに合わせて下さい。

CSS

ul{
	list-style: none;
}

ul#accordionmenu{
	width: 300px;
	margin:50px 100px;
}

#accordionmenu a{
	text-decoration: none;
	color: #fff;
	display: block;
}

#accordionmenu a:hover{
	background-color: #7B7B7B;
	border-top: 1px solid #5F5F5F;
	border-bottom: 1px solid #7B7B7B;
}

#accordionmenu ul{
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#accordionmenu li{
	background-color: #848484;
}

#accordionmenu li a{
	padding: 5px;
	border-left: 1px solid #9A9A9A;
	border-top: 1px solid #9A9A9A;
	border-right: 1px solid #696969;
	border-bottom: 1px solid #757575;
}

#accordionmenu li li a {
    border-top: 1px solid #696969;
    border-left: 1px solid #696969;
    border-right: 1px solid #8A8A8A;
    border-bottom: 1px solid #7B7B7B;
    background-color: #757575;
    padding: 5px 10px 5px 15px;
}

#accordionmenu .closed{
	background-image: url(images/ha-down.gif);
}

#accordionmenu .closed, #accordionmenu .opened {
            background-position:98% center;
            background-repeat: no-repeat;
        }

#accordionmenu .opened{
	background-image: url(images/ha-up.gif);
}