グローバルナビのドロップダウンメニュー化

Comments:4

nb September 8, 2008 3:24 PM

こんにちは。
グローバルナビにドロップダウンをつけようと悪戦苦闘していて、ここにたどり着きました。
こちらがイメージしているものにすごく似ているのと、vicunaさんのテンプレートを使われているので、参考にさせていただき作成中なんですが、どうにもうまくいきません（グローバルナビとメインの間に余白ができたのと、サブメニュー同士余白があります）。つきましては、お忙しいことろ恐縮ですが、どのようなことが考えられるかご教示いただければ幸いです。作成中サイトは、http://ohji.ne.jp/website/です。
mtについては、まったく一から始めたばかりなので、よくわからないことだらけで、何をお知らせすればよいかわかりませんが、
vicunaさんのgnaviのcssに、紹介されていたサンプル集のコードをそのまま貼り付けました。(以下です）
#dd {
margin-left: 25%;
padding: 0 0 20px 0;
}

#dd li {
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial;
}

#dd li a.menu {
display: block;
text-align: center;
background: #5970B2;
padding: 4px 10px;
margin: 0 1px 0 0;
color: #FFF;
width: 60px;
text-decoration: none;
}

#dd li a.menu:hover {
background: #49A3FF;
}

.submenu {
background: #EAEBD8;
border: 1px solid #5970B2;
visibility: hidden;
position: absolute;
z-index: 3;
}

.submenu a {
display: block;
font: 11px arial;
text-align: left;
text-decoration: none;
padding: 5px;
color: #2875DE;
}

.submenu a:hover {
background: #49A3FF;
color: #FFF;

レイアウトの幅は800pxで固定している。

ほかには、サンプル集に出ていたheaderに埋め込む
について、よくわからなかったので、何もしていない状態です。

かのえそうし September 9, 2008 1:40 AM

はじめまして、こんにちは。

サイトのほう拝見させていただきましたが、cssの記述が誤っているように見受けられました。

vicuna様のデフォルトのグローバルナビのソースはulを使用しているのですが、
参考サイト様のソースではdlを使用している為、css部分を書き換える必要があります。

詳細は私もいつも参考サイトさんを見ながら試行錯誤しつつ作業しているような感じですので
詳しく解説とまではいかないのですが（すみません）、代わりに
こちらのほうで試してみたコードを以下に貼り付けておきます。

まずコメントのほうにありますサンプル集のコードを全部削除していただいた上で、
スキンフォルダ/module/mod_gNavi/mod_gNavi.css内、
「Global Navigation Module」項（30行目辺り）の

ul#globalNavi {
	margin: 25px 0 -26px;
	padding: 0 0 0 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #e5e5e5;
	background: #eee url(../mod_subSkin/images/bg/m_grad01.gif) repeat-x 0 -3px;
}
ul#globalNavi li {
	margin: 0;
	padding: 0;
	float: left;
	width: 100px;
	line-height: 1;
	list-style-type: none;
	font-size: 12px;
}

部分を

ul#globalNavi {
	margin: 25px 0 -26px;
	padding: 0 0 0 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #e5e5e5;
	background: #eee url(../mod_subSkin/images/bg/m_grad01.gif) repeat-x 0 -3px;
}
ul#globalNavi li {
	margin: 0;
	padding: 0;
	float: left;
	width: 100px;
	line-height: 1;
	list-style-type: none;
	font-size: 12px;
}
ul#globalNavi li a {
	display: block;
	text-align: center;
	margin: 0px;
	text-decoration: none;
}
ul#globalNavi li a.menu:hover {
	color: #000;
	background-color: #fff;
	background-image: none;
}
.submenu {
	visibility: hidden;
	position: absolute;
	width: 100px;
	z-index: 3;
}
.submenu a{
	display: block;
	text-align: left;
	text-decoration: none;
}
.submenu a:hover {
	background: #fff;
}

のように書き換えてみて下さい。

nb September 9, 2008 11:30 AM

かのえそうし　様

おはようごいざます。
早速ありがとうございます。ご指示の修正でドロップダウン化できました。大感謝です。
今、トップページにswfを表示させていて、swfとドロップダウンメニューが重なる部分は、swf優先になってしまうんですが、これについては、また、調べてみます。
ありがとうございました。

nb September 9, 2008 8:28 PM

かのえそうし　様

こんばんは。
おかげさまで、flashと重なる件解決しました。
gnaviのcssにso.addParam("wmode", "transparent");を追加することで、うまくいきました。
重ね重ねありがとうございました。今後ともよろしくお願いします。