ナビの下にスライドショー表示。アコーディオンメニューを表示

アコーディオンメニュー

アコーディオンメニューをメニューに設置する方法です。本文へ設置するときは、少し変更が必要です。メニューの色やサイズなどは適当に変更してください。

以下のサイトからコードをもらいました。
http://triplexxx.jp/archives/150

◆設置手順

1. jQuery (jquery-1.2.6.min.js )をダウンロードしてきて、QHMの　/jsフォルダにFTPでアップします。
2. メニューに設置するときはプラグインを改造します。
   /pluginフォルダ内の　menu.inc.php　56行目を変更する。

   return preg_replace('/<ul[^>]*>/', '<ul>', convert_html($menutext)); 
   　↓以下のように変更
   return convert_html($menutext);

   この変更を行わないと、テキスト表示されるだけでアコーディオンになりません。本文にアコーディオンメニューを設置するときは、menuプラグインは使用しないので、プラグインの改造をしなくても正常に動作します。
3. メニュー編集を開き、以下のコードに記入します。
   【注意】このサイトでは、このページのみアコーディオンメニューを挿入するために、以下のようにしています。
   1. accmenuというページを作成し、そこに　#beforescriptから始まるスクリプトを全部入れます。
   2. アコーディオンメニューを表示するページの先頭に　#menu(accmenu)　を記述します。
      全ページに同じアコーディオンメニューを入れるときは、#menu(accmenu)は使用しないで、メニューに直接以下の#beforescriptから始まるスクリプトを全部記述してください。
      【注意】本文にアコーディオンメニュー入れるときは一部CSSを追加する必要があります。コード内のコメントを見てください。

      #beforescript{{
      <script type='text/javascript' src='js/jquery-1.2.6.min.js'></script>
      
      <script type="text/javascript">
      <!--
        var j$ = jQuery;
      
        j$(function(){
      
        function setBackground() {
          var $last = j$(".acc > li:last > a");
          if($last.hasClass("close"))
            $last.css("background-position", "left bottom");
          else
            $last.css("background-position", "left -30px");
        }
      
        j$(".acc").each(function(){
          j$("li > ul"            , this).wrap("<div></div>");
          j$("li > div:not(:last)", this).append("<div class='notlast'>&nbsp;</div>");
          j$("li > div:last"      , this).append("<div class='last'>&nbsp;</div>");
      
          j$("li > a", this).each(function(index){
            var $this = j$(this);
      
            if(index > 0) 
              $this.addClass("close").next().hide();
            else
              $this.css("background-position", "left top");
      
            setBackground();
      
            var prms = {height:"toggle", opacity:"toggle"};
            $this.click(function(){
              j$(this).toggleClass("close").next().animate(prms, {duration:"fast"})
                  .parent().siblings().children("div:visible").animate(prms, {duration:"fast"}).prev().addClass("close");
              setBackground();
              return false;
            });
          });
        });
      });
      //-->
      </script>
      
      <style type="text/css">
      ul.acc {
        width: 150px;
      }
      
      ul.acc li div ul {
        height: 200px;
      }
      
      ul.acc, ul.acc li ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      
      ul.acc a{
        color: #feffff;
        display: block;
        height: 30px;
        line-height: 30px;
        text-indent: 10px;
        text-decoration: none;
        outline: none;
      }
      
      ul.acc li a {
        background: url(swfu/d/acc_bg.png) left -30px no-repeat;
      }
      
      ul.acc li div ul li a { 
        background: none; 
      }
      
      ul.acc li div ul li a:hover { 
        background-color: #185AAC; 
      }
      
      ul.acc li div ul,
      ul.acc li div div.notlast {
        background-color: #A6B5E2;
      }
      
      ul.acc li div div {
        height: 10px;
      }
      
      ul.acc li div div.last {
        background: transparent url(swfu/d/acc_menu_last.png) left bottom no-repeat;
      }
      
      /* 本文に設置するときは、ここから */
      /*      QHMのmain.cssで定義しているものを変更する */
      #body ul ul{
      margin-left: 0px;
      }
      #body ul{
      margin: 0 0 0 30px;
      }
      /* 本文に設置するときは、ここまで追加 */
      /*      メニューに設置するときは上記6行は不要です */
      
      </style>
      }}
      
      #html{{
      <ul class="acc">
        <li><a href="1">category1</a>
          <ul> 
            <li><a href="11">menu 1-1</a></li>
            <li><a href="12">menu 1-2</a></li>
            <li><a href="13">menu 1-3</a></li>
          </ul>
        </li>
        <li><a href="2">category2</a>
          <ul> 
            <li><a href="21">menu 2-1</a></li>
            <li><a href="22">menu 2-2</a></li>
            <li><a href="23">menu 2-3</a></li>
            <li><a href="24">menu 2-4</a></li>
          </ul>
        </li>
        <li><a href="3">category3</a>
          <ul> 
            <li><a href="31">menu 3-1</a></li>
            <li><a href="32">menu 3-2</a></li>
            <li><a href="33">menu 3-3</a></li>
            <li><a href="34">menu 3-4</a></li>
            <li><a href="35">menu 3-5</a></li>
          </ul>
        </li>
      </ul>
      }}

4. おまじないは使えませんので、実際のメニュー名やリンク先は、HTMLで記述する必要があります。上記#html{{　}}内のコードを適当に変更してください。

ご意見箱

皆様のご意見をお待ちします。

• 以下のコードをメニューに入れます。とありますが、具体的にどうすればよいのですか？ -- かんちゃん 2011-03-26 (土) 01:49:38
• かんちゃんへ
  説明を追加しました。メニュ編集でスクリプトを直接記述してください。 -- tomzo 2011-03-29 (火) 01:20:41

当ページは役に立ちましたか？