javascriptで縦に展開するシンプルなメニュー

非常にシンプルで軽くておしゃれなメニューです。縦に展開しますが親メニューは1つしか設置できません。できないことはないですがスタイルシートに記述が面倒なのでそれなら別にもっといいものがあると思います。




サンプルは上記サイトにありますので入手してください。注意点としてstyle.cssの1行目を次のように変えておいたほうがよいと思います。
#middlebar ul,#middlebar li{margin:0; border:0; padding:0; list-style:none;}
htmlも非常にシンプルです。

<div id="middlebar">
<ul class="menu">
<li><a href="#" onclick="javascript:showlayer('sm_1')">人気カテゴリ一覧</a></li>
<ul class="submenu" id="sm_1">
<li><a href="http://weboook.blog22.fc2.com/blog-category-2.html">javascript</a></li>
<li><a href="http://weboook.blog22.fc2.com/blog-category-7.html">google API</a></li>
<li><a href="http://weboook.blog22.fc2.com/blog-category-7.html">カスタマイズ</a></li>
</ul>
</ul>
</div>
展開した際に親メニューの横の色が変になる場合があると思います。Firefoxだと大丈夫ですがie7だと下のようになりました。これはメニューを展開すると画像lm.pngが全部表示されてしまうためです。対処としては画像のサイズを変更するか親メニューの文字数を調整するかがよいと思います。
date2008-4-12.png
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加