CSS3でプルダウン
CSS3でQHMのナビをプルダウンメニュー化
CSS3でQHMのナビをプルダウンメニューにする方法です。ちょっとカッコイイサブメニューが表示されます。サブメニューのサブメニューには未対応です。
設定はとても簡単です。CSSのスクリプトをコピペするだけです。HTMLを書く必要はありません。
CSSは以下のサイトを参考にさせてもらいました。
- [CSS]IE6, 7も考慮した、CSS3で実装するドロップダウンメニュー
http://coliss.com/articles/build-websites/operation/css/css3-tutorial-dropdown-menu-by-red-team-design.html
【作成手順】
- デザインを選択。(現在、対応しているデザインは g_modern01 と g_wbrown01)
- CSS #beforescript{{ 。。。 }} の内容をコピーしてナビに貼り付ける。
- ナビのおまじないを書く。サブメニューは --[[リンク先]] のように書く。(マイナス記号が2つ)
対応デザインは順次増やしていく予定です。(simple_black, g_blue06, gra_blue, simple05, simple_white 対応予定)
【解説】
- 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 ul { height: 28px; } #navigator ul li a:hover { background-color: transparent; color: #FFFFFF; } /* Main menu */ #navigator, #menu { width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #111; background: -moz-linear-gradient(top, #444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); -moz-border-radius: 50px; border-radius: 50px; -moz-box-shadow: 0 2px 1px #9c9c9c; -webkit-box-shadow: 0 2px 1px #9c9c9c; box-shadow: 0 2px 1px #9c9c9c; } #navigator .list1 li, #navigator .list2 li, #menu li { float: left; padding: 0 0 10px 0; position: relative; } #navigator .list1 a, #navigator .list2 a, #menu a { float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #navigator .list1 li:hover > a, #navigator .list2 li:hover > a, #menu li:hover > a { color: #ffffff; } *html .list1 li a:hover, *html .list2 li a:hover, *html #menu li a:hover /* IE6 */ { color: #fafafa; background: #111; } #navigator .list1 li:hover > ul, #navigator .list2 li:hover > ul, #menu li:hover > ul { display: block; } /* Sub-menu */ #navigator .list1 ul, #navigator .list2 ul, #menu ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: -moz-linear-gradient(top, #444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); -moz-border-radius: 5px; border-radius: 5px; } #navigator .list1 ul li, #navigator .list2 ul li, #menu ul li { background-image: none; float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; } #navigator .list1 ul li:last-child, #navigator .list2 ul li:last-child, #menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #navigator .list1 ul a, #navigator .list2 ul a, #menu ul a { background: #111111; padding: 10px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } /* *html .list1 ul a,*/ /* *html .list2 ul a, */ *html #menu ul a /* IE6 */ { height: 10px; width: 150px; } /* *:first-child+html .list1 ul a, */ /* *:first-child+html .list2 ul a, */ *:first-child+html #menu ul a /* IE7 */ { height: 10px; width: 150px; } #navigator .list1 ul a:hover, #navigator .list2 ul a:hover, #menu ul a:hover { background: #0186ba; background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -moz-linear-gradient(top, #04acec, #0186ba) !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#04acec', endColorstr='#0186ba'); /* IE */ } #navigator .list1 ul li:first-child a, #navigator .list2 ul li:first-child a, #menu ul li:first-child a { -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #navigator .list1 ul li:first-child a:after, #navigator .list2 ul li:first-child a:after, #menu ul li:first-child a:after { content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } #navigator .list1 ul li:first-child a:hover:after, #navigator .list2 ul li:first-child a:hover:after, #menu ul li:first-child a:hover:after { border-bottom-color: #04aced; } #navigator .list1 ul li:last-child a, #navigator .list2 ul li:last-child a, #menu ul li:last-child a { -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Clear floated elements */ #navigator .list1:after, #navigator .list2:after, #menu:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } #navigator .list1 ul li:first-child a:after, #navigator .list2 ul li:first-child a:after, #menu ul li:first-child a:after { border-bottom-color: #111111; } /* .list1 * html #menu, */ /* .list2 * html #menu, */ * html #menu { zoom: 1; } /* IE6 */ /* .list1 *:first-child+html #menu, */ /* .list2 *:first-child+html #menu, */ *:first-child+html #menu { zoom: 1; } /* IE7 */ </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