CSS1個とjsファイル2個で作る簡単2段メニュー
色々な応用ができるが、今回は、1段目のメニューは画像、1段目にオンマウスで2段目がニョロリと表れて、文字でリンクが入れれるような形。
必要なもの
まとめてダウンロードしよう → accordionmenu.zip からダウンロード。
中身：
・accordion.css ← 背景色や1段目のメニューの横幅を変える時に編集する
・accordion.js
・jquery.min.js
・index.html ← 必要ソースは後述
・メニュー画像数個
上記個別ファイルは、ファイル名を変えて .txt にしているので、こちらから右クリックでダウンロード保存した場合などは、ファイル名や拡張子を .js や .css なども含めて上記の状態に戻すこと。
HTMLソースコード
まずは <head> ….. </head> の間で CSS と js ファイルを読み込む。
<link rel=”stylesheet” type=”text/css” href=”css/accordion.css” /><!– accordionmenu –>
<script type=”text/javascript” src=”js/jquery.min.js” ></script><!– accordionmenu –>
<script type=”text/javascript” src=”js/accordion.js”></script><!– accordionmenu –>
メニューを作りたい場所で、HTMLソースを書く。
2段メニューの文字やリンク先はここに記述。
メニュー画像の横幅や背景色を変えたい時は、 accordion.css を編集。
<div id=”gnav”>
<ul>
<li><a href=”index.html” class=”n01″><span>ホーム</span></a>
<div class=”gnavList”>
<ul>
<li><a href=”リンク先1.html”>2段メニュー1</a></li>
<li><a href=”リンク先2.html”>2段メニュー2</a></li>
</ul>
</div><!– gnavList –>
</li><!– ホーム –>
～～～～～～
以下同じ形でメニューが続いて
～～～～～～
</ul>
</div><!– gnav end –>
accordion.js、jquery.min.js、accordion.cssの3つと、メニュー画像、HTMLをサーバーにアップロード
FTPソフトを使って、ホームページ上にアップロードする。
index.html
jsフォルダ
accordion.js
jquery.min.js
cssフォルダ
accordion.css
imgフォルダ
メニュー画像など
パーミッションなどは関係ないので、644などでOK。