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

g_modern01

使用デザイン：　g_modern01

QHMのナビをCSSのみでプルダウンメニューにする方法

2年以上前に、jQueryを使用してナビをプルダウンメニューにしましたが、その方法はあまりお勧めできる方法ではありませんでした。
No.N01 プルダウンメニューを表示したい

それは、HTMLでナビの内容を書かないといけなかったので、少し不便でした。
そこで、誰にでも簡単にプルダウンメニューを設定できる方法を考えました。
ナビには、普通におまじないを書くだけです。
それと、そのデザインにあったCSSをナビにコピペするだけです。これだけで簡単にプルダウンメニューが表示できます。

【作成手順】

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

対応デザインは順次増やしていきます。（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/]]
-[[長いタイトルの場合>長いタイトルのメイン]]
-- [[長いタイトルのサブ１]]
-- [[長いタイトルのサブ２]]
-- [[長いタイトルのサブ３]]

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さんのサイトのＣＳＳを利用させていただき、私どものサイトにプルダウンメニューを設置することができました。まだ、色調等の調整等うまくいっていませんが、とても助かりました。お礼申し上げます。一般財団法人瑞陵高校助成基金 -- 日比野憲一 2015-01-28 (水) 00:09:07
• 日比野憲一さん、こんにちは。当サイトをご利用ありがとうございます。最近、更新していませんがこれからもよろしくお願いします。 -- tomzo 2015-04-06 (月) 08:54:28

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