▲PAGE TOP

アコーディオン型メニューの設置方法




上のようなアコーディオン型メニューをBloggerに設置する方法です。

  • レイアウト>ガジェットの追加> HTML/Javascript を追加する
  • 下のHMTLをコピーして、保存する
  • Javascritp をテキストエディタ にコピー&ペーストして、ファイル名を java-ac.js にして保存する
  • 保存した java-ac.js を自分のサーバにアップロードして終了です。


///////////////////  HTML ///////////////////////




<style>




ul.acc, ul.acc li ul {
  margin: 0;
  padding: 0;
  list-style: none;
}


ul.acc a{
display: block;
height: 20px;
line-height: 20px;
color: #feffff;
}


ul.acc {
background-color: #185AAC;
}


ul.acc li ul {
background-color: #A6B5E2;
}








</style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"/></script>
<script src="http://www.******.com/java-ac.js"/></script>








<ul class="acc">
 <li><a href="1" class="open">menu1</a>
  <ul>
   <li><a href="http://www.hans-huber.com" target="main">menu 1-1</a></li>
   <li><a href="http://jp.0102030405.com" target="main">menu 1-2</a></li>
   <li><a href="#">menu 1-3</a></li>
  </ul>
 </li>
 <li><a href="2" class="open">menu2</a>
  <ul>
   <li><a href="#">menu 2-1</a></li>
   <li><a href="#">menu 2-2</a></li>
   <li><a href="#">menu 2-3</a></li>
  </ul>
 </li>
 <li><a href="3" class="open">menu3</a>
  <ul>
   <li><a href="#">menu 3-1</a></li>
   <li><a href="#">menu 3-2</a></li>
   <li><a href="#">menu 3-3</a></li>
   <li><a href="#">menu 3-4</a></li>
  </ul>
 </li>
</ul>




////////////////////////////////////////////////////////////////////

//////////////////////// Javascript ///////////////////////////////////



//jQuery アコーディオンメニュー 


var $j = jQuery;
$j(function(){
 $j(".acc").each(function(){
  $j("a.open", this).each(function(index){
   var $this = $j(this);
   if(index > 0) $this.next().hide();
   $this.click(function(){
    var params = {height:"toggle"};
    $j(this).next().animate(params).parent().siblings()
         .children("ul:visible").animate(params);
    return false;
   });
  });
 });
});

////////////////////////////////////////////////////////////////////











COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)