firstAudience

CTmenu.js - ドロップダウンでメニューを整理

jsとCSSで、ウェブページにドロップダウンメニュー（プルダウンメニュー）を再現するコンポーネントです。

» Ver.1.0 Download

Demo


特長

  • ulリストがドロップダウンメニューに。
  • 外部ファイルにリンクして、リスト項目を必要分増減してください。
    イベントハンドラ記述など、個別の手間は不要です。
  • デザインはスタイルシート（CSS）でカスタマイズ可能。

仕様

利用方法 (3 Steps)

  1. CTmenu.js、CTmenu.css、必要イメージをダウンロードします。

  2. HTMLと、CTmenu.js、CTmenu.cssをリンクします。
    HTMLの<head>〜</head>内に以下の行を追加します。

    <script type="text/javascript" src="$設置先のパス$/CTmenu.js"></script>
    <style type="text/css">@import "$設置先のパス$/CTmenu.css";</style>

    $設置先のパス$ は、ファイルの置き場所に合わせて編集します。
    また、imgフォルダ以下の画像はcssから読み込んでいます。デフォルトではcssと同じディレクトリに置いてください。

  3. htmlは、リスト要素(ul)を、専用のdivで囲むだけです。
    以下サンプルコード。

    <div id="menuBar"><!--このidは変更不可-->
      <ul>
        <li><a href="$link$">メニュー大項目</a><!--大項目、必要分li要素を増減-->
          <ul>
            <li><a href="$link$">メニュー小項目</a></li><!--小項目、必要分li要素を増減-->
            <li><a href="$link$">メニュー小項目</a></li>
            <li><a href="$link$">メニュー小項目</a></li>
          </ul>
        </li>
        <li><a href="$link$">メニュー</a>
          <ul>
            <li><a href="$link$">メニュー小項目</a></li>
            <li><a href="$link$">メニュー小項目</a></li>
            <li><a href="$link$">メニュー小項目</a></li>
            <li><a href="$link$">メニュー小項目</a></li>
          </ul>
        </li>
        <li><a href="$link$">menu item</a>
          <ul>
            <li><a href="$link$">menu small item</a></li>
            <li><a href="$link$">menu small item</a></li>
            <li><a href="$link$">menu small item</a></li>
            <li><a href="$link$">menu small item</a></li>
            <li><a href="$link$">menu small item</a></li>
          </ul>
        </li>
        <li><a href="$link$">メニュー（小項目なし）</a>
          <!--小項目が不要な場合はul要素（子要素）を削除可能-->
        </li>
      </ul>
    </div><br style="clear: left;" /><!--br要素は必須-->

以上

お気づきの点はぜひこちらまで〜・
Eメール: info@firstaudience.com