テンプレートによる無料素材：ＣＳＳメニューボタンドロップダウンメニュー#dd1

スタイリッシュなCSSメニューを揃えてみました。そのままソースをダウンロードすることが出来ます。
色味、メニュー数のカスタマイズは自由にどうぞ。

ドロップダウンメニュー#dd1

ドロップダウンメニュー#dd1 Update : 09/12/30

インストール

1：『drop.down.menu.css』『drop.down.menu.js』をディレクトリにアップロードしてください。

2：下記のHTMLコードをコピーして、ペーストしてください。

<li>  
    <a href="#" class="menu" id="mmenu1" onmouseover="mopen(1);" onmouseout="mclosetime();">SAMPLE</a>  
    <div class="submenu" id="menu1" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">  
        <a href="#">SAMPLE</a>  
    </div>  
  </li>

<li>  
    <a href="#" class="menu" id="mmenu2" onmouseover="mopen(2);" onmouseout="mclosetime();">SAMPLE</a>  
    <div class="submenu" id="menu2" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">  
        <a href="#">SAMPLE</a>  
        <a href="#">SAMPLE</a>  
    </div>  
  </li>

<li>  
    <a href="#" class="menu" id="mmenu3" onmouseover="mopen(3);" onmouseout="mclosetime();">SAMPLE</a>  
    <div class="submenu" id="menu3" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">  
        <a href="#">SAMPLE</a>  
        <a href="#">SAMPLE</a>  
        <a href="#">SAMPLE</a>  
    </div>  
  </li>

<li>  
    <a href="#" class="menu" id="mmenu4" onmouseover="mopen(4);" onmouseout="mclosetime();">SAMPLE</a>  
    <div class="submenu" id="menu4" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">  
        <a href="#">SAMPLE</a>  
        <a href="#">SAMPLE</a>  
        <a href="#">SAMPLE</a>  
        <a href="#">SAMPLE</a>  
    </div>  
  </li>

<li>  
    <a href="#" class="menu" id="mmenu5" onmouseover="mopen(5);" onmouseout="mclosetime();">SAMPLE</a>  
    <div class="submenu" id="menu5" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">  
        <a href="#">SAMPLE</a>  
        <a href="#">SAMPLE</a>  
        <a href="#">SAMPLE</a>  
        <a href="#">SAMPLE</a>  
        <a href="#">SAMPLE</a>  
    </div>  
  </li>

</ul>

HTMLファイルから外部Style Sheet・外部JavaScriptへリンク

1：外部Style Sheet・外部JavaScriptを利用したいHTMLファイルのソースにリンク設定を追加する。各HTMLファイルの<head></head>の間に下記のコードを入力。

テンプレートによる無料素材：ＣＳＳ メニューボタン ドロップダウンメニュー#dd1

インストール

HTMLファイルから外部Style Sheet・外部JavaScriptへリンク

テンプレートによる無料素材：ＣＳＳメニューボタンドロップダウンメニュー#dd1