一歩先を行く QHMユーザのためのTips

CSS3でプルダウン

CSS3でQHMのナビをプルダウンメニュー化

CSS3でQHMのナビをプルダウンメニューにする方法です。ちょっとカッコイイサブメニューが表示されます。サブメニューのサブメニューには未対応です。
設定はとても簡単です。CSSのスクリプトをコピペするだけです。HTMLを書く必要はありません。

CSSは以下のサイトを参考にさせてもらいました。

【作成手順】

  1. デザインを選択。(現在、対応しているデザインは g_modern01 と g_wbrown01)
  2. CSS #beforescript{{ 。。。 }} の内容をコピーしてナビに貼り付ける。
  3. ナビのおまじないを書く。サブメニューは  --[[リンク先]] のように書く。(マイナス記号が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

認証コード(2633)

当ページは役に立ちましたか?

選択肢 投票
たいへん役に立った 18  
ちょっとだけ役に立った 0  
普通 0  
あんまり 0  

powered by QHM 6.0.9 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional