FrontPage
g_modern01
g_modern01
使用デザイン: g_modern01
QHMのナビをCSSのみでプルダウンメニューにする方法
2年以上前に、jQueryを使用してナビをプルダウンメニューにしましたが、その方法はあまりお勧めできる方法ではありませんでした。
No.N01 プルダウンメニューを表示したい
それは、HTMLでナビの内容を書かないといけなかったので、少し不便でした。
そこで、誰にでも簡単にプルダウンメニューを設定できる方法を考えました。
ナビには、普通におまじないを書くだけです。
それと、そのデザインにあったCSSをナビにコピペするだけです。これだけで簡単にプルダウンメニューが表示できます。
【作成手順】
- デザインを選択。(現在、対応しているデザインは g_modern01)
- CSS #beforescript{{ 。。。 }} の内容をコピーしてナビに貼り付ける。
- ナビのおまじないを書く。サブメニューは --[[リンク先]] のように書く。(マイナス記号が2つ)
対応デザインは順次増やしていきます。(simple_black, g_blue06, gra_blue, simple05 対応中)
【解説】
- CSSで #navigator 配下の list1 と list2 に対しプルダウンメニューにする
- ナビ以外のリスト(マイナス記号のおまじない)は今まで通りの動き。
ナビの記述
- [[トップ>FrontPage]] -[[検索サイト]] -- [[Google>http://www.google.co.jp]] -- [[Yahoo>http://www.yahoo.co.jp]] -- [[Bing>http://www.bing.co.jp]] -[[アップル>http://www.apple.com/jp/]] --[[iMac>http://www.apple.com/jp/imac/]] --[[iPhone>http://www.apple.com/jp/iphone/]] --[[iPad>http://www.apple.com/jp/ipad/]] -[[長いタイトルの場合>長いタイトルのメイン]] -- [[長いタイトルのサブ1]] -- [[長いタイトルのサブ2]] -- [[長いタイトルのサブ3]]
CSS (対応デザイン:g_modern01)
#beforescript{{ <style type="text/css"> #navigator { line-height:25px; background: gray; } #navigator ul { height:25px; background: gray; } #navigator .list1 ul li { color: #ffffff !important; text-align: left; } /* Navigation */ #navigator .list1 ul, #navigator .list2 ul { list-style: none; margin: 0; padding: 0; } #navigator .list1, #navigator .list2 { font-family: Arial, Helvetica, sans-serif; z-index: 100; position: relative; } #navigator .list1 li, #navigator .list2 li { border-left: 1px solid gray; float: left; margin: 0; padding: 0; position: relative; } #navigator .list1 li a, #navigator .list1 li a:link, #navigator .list1 li a:active, #navigator .list1 li a:visited, #navigator .list2 li a, #navigator .list2 li a:link, #navigator .list2 li a:active, #navigator .list2 li a:visited { font: bold 1.22em/25px Arial, Helvetica, sans-serif; background: gray; color: #ffffff; display: block; padding: 0 9px; /* text-transform: lowercase;*/ text-decoration: none; } #navigator .list1 li a:hover, #navigator .list2 li a:hover { background: gray; color: #000; } #navigator .list1 li:hover a, #navigator .list1 li.sfHover a, #navigator .list2 li:hover a, #navigator .list2 li.sfHover a { background: gray; color: #000; } #navigator .list1 li:hover ul a, #navigator .list1 li.sfHover ul a, #navigator .list2 li:hover ul a, #navigator .list2 li.sfHover ul a { background: gray; color: #ffffff; } #navigator .list1 li:hover ul a:hover, #navigator .list1 li.sfHover ul a:hover , #navigator .list2 li:hover ul a:hover, #navigator .list2 li.sfHover ul a:hover { background: gray; color: #000; } #navigator .list1 ul, #navigator .list2 ul { background: gray; border-bottom: 1px solid #ccc; list-style: none; margin: 0; width: 200px; position: absolute; top: -999em; left: -1px; } #navigator .list1 li:hover ul, #navigator .list1 li.sfHover ul, #navigator .list2 li:hover ul, #navigator .list2 li.sfHover ul { top: 25px; } #navigator .list1 ul li, #navigator .list2 ul li { border: 0; float: none; } #navigator .list1 ul a, #navigator .list2 ul a { border: 1px solid #ccc; border-bottom: 0; padding-right: 20px; width: 200px; white-space: nowrap; } #navigator .list1 ul a:hover, #navigator .list2 ul a:hover { background: gray; color: #000; } </style> }}
ご意見箱
皆様のご意見をお待ちします。
- 業者に頼んで2週間ほどしても実現しなかった「プルダウン」が、簡単に装備でき感動です。後はg_wbrown01.にあったデザインが選択できればさらにいいです。更新をお待ちします。 -- 企画制作 楽大夢 岩瀬よしのり 2012-10-04 (木) 11:01:27
- ワイド画面にすると、ナビが左寄りに表示されます。センターに持ってくる方法はないでしょうか?あればお教えください。 -- 企画制作 楽大夢 岩瀬よしのり 2012-10-04 (木) 13:20:52
- 岩瀬さん こんにちは。g_wbrown01 に対応するデザインは、予定に入っていませんでしたが、時間があったらチャレンジしてみようと思います。あまり期待しないでください... ナビが左寄りになるのは、ちょっと調べましたが、もともとのデザインがそのようになっているので、ちょっと無理かもしれません。調査してみます。 -- tomzo 2012-10-17 (水) 09:00:09
- いつも拝見していあます。ありがとうございます。simple05で見ました。この表示はなかなかいいですね。吹き出し形式ではないメニューの方が自然でいいです。 -- esxtar 2013-04-13 (土) 09:44:45
- こんにちは。こちらで配布しているCSSを編集して、私のサイトのテンプレートに使わせていただきました。すごくいいですね。事後報告ですがお礼申し上げます。http://qhmtemps.com/index.php?QBlog-20140401-1 -- jun 2014-04-20 (日) 17:22:25
- junさん こんにちは。お役に立ててうれしいです。最近、サイトの更新ができてませんが、今後ともよろしくお願いいたします。 -- tomzo 2014-04-25 (金) 23:09:06
- こんにちは。こちらのサイトとjunさんのサイトのCSSを利用させていただき、私どものサイトにプルダウンメニューを設置することができました。まだ、色調等の調整等うまくいっていませんが、とても助かりました。お礼申し上げます。一般財団法人瑞陵高校助成基金 -- 日比野憲一 2015-01-28 (水) 00:09:07
- 日比野憲一さん、こんにちは。当サイトをご利用ありがとうございます。最近、更新していませんがこれからもよろしくお願いします。 -- tomzo 2015-04-06 (月) 08:54:28