プロが教える店舗＆オフィスのセキュリティ対策術

急いでいます！

ドロップダウンするグローバルナビの選択時の色変更について

解決済

  • 質問者：hitoromoko
  • 質問日時：
  • 回答数：5件

HPを制作しております。
一部ドロップダウンするグローバルナビでメニューを作ったのですが
現在選択しているページを<body id="pege03">等として
CSSで定義して自動でマウスオン時と同じ色になる(背景は画像が変わる)ように設定しています。

添付画像の紫色の四角は文字を塗り消しただけですので気にしないでください。

通常時、プルダウンしたメニューはマウスオンで色が変わります。
しかし、現在選択しているページのメニューをプルダウンすると
こちらも自動で選択時の色に変ってしまっています。しかも、画像が端まで足りていない……。
これを通常時と同じようにするにはどうしたらよいのでしょうか？
プルダウンメニューはすべてマウスオンでしか色が変わらない様にしたいです。
選択しているページは自動で色が変わるままで。

以下はソースです。
宜しくお願いします。

HTML
<div>
<ul id="dropmenu">
<li id="li01"><a href="#">メニュー1</a></li>
<li id="li02"><a href="#">メニュー2</a>
<ul>
<li><a href="#">メニュー2-1</a></li>
<li><a href="#">メニュー2-2</a></li>
</ul>
</li>
<li id="li03"><a href="#">メニュー3</a>
<ul>
<li><a href="#">メニュー3-1</a></li>
　　<li><a href="#">メニュー3-2</a></li>
</ul>
</li>
<li id="li04"><a href="#">メニュー4</a></li>
<li id="li05"><a href="#">メニュー5</a></li>
<li id="li06"><a href="#">メニュー6</a></li>
<li id="li07"><a href="#">メニュー7</a></li>
</ul>
</div>

CSS
#dropmenu{
list-style-type: none;
width: 949px;
height: 42px;
margin: 0px auto 10px;
padding: 0;
background: url(画像) no-repeat;
}
#dropmenu li{
position: relative;
width: 14.07%;
float: left;
margin: 0;
padding: 0;
text-align: center;
background: url(画像) no-repeat;
border-right: 1px solid #aaa;
border-left: 1px solid #fff;
}
#dropmenu li a{
display: block;
margin: 0;
padding: 15px 0 11px;
color: #000080;
font-size: 15px;
line-height: 1;
text-decoration: none;
height: 24px;
}
#dropmenu li:hover > a{
background: url(画像) ;
color: #fff;
}
#dropmenu li ul{
list-style: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
#dropmenu li:last-child ul{
left: -100%;
width: 100%
}
#dropmenu li ul li{
overflow: hidden;
width: 150%;
height: 0;
color: #fff;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
#dropmenu li ul li a{
padding: 13px 15px;
background: url(画像) ;
text-align: left;
font-size: 14px;
font-weight: normal;
}
#dropmenu li:hover ul li{
height: 40px;
border-top: 1px solid #fff;
border-bottom: 1px solid #aaa;
}
#dropmenu li:hover ul li:first-child{
border-top: 0;
}
#dropmenu li:hover ul li:last-child{
border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
border-radius: 0 0 3px 3px;
}
body#pege01 ul li#li01 a,
body#pege02 ul li#li02 a,
body#pege03 ul li#li03 a,
body#pege04 ul li#li04 a,
body#pege05 ul li#li05 a,
body#pege06 ul li#li06 a,
body#pege07 ul li#li07 a{
display: block;
background: url(画像) no-repeat;
color: #fff;
margin: 0px;
}

「ドロップダウンするグローバルナビの選択時」の質問画像

質問者からの補足コメント

  • 初心者なので、もっと分かり易くご説明頂けると幸いです。
    ちょっと難しかったです。
    あと、時間があまりないので、参考ページやコピペでいけるものをお頼みしたいです。
    一応、今答えて頂いているものも、考えてやってみます。

      補足日時：2015/08/20 09:41
    通報する

  • いや、言い方が悪いですね。
    色が変わる部分について、どこが悪いのか、どこを直せばを
    端的にご説明いただけるとすごく有難いです。
    CSSもおかしな状態なようではあるので（どこかからコピーしてきたものなので）
    全部書き直し、というのが正しいのかもしれませんが……

      補足日時：2015/08/20 09:48
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

・まず示したサンプルをそのまま上げてから動作を確認する。


開発ツールの豊富なfirefoxをお使いだと思いますが、そのアドオンのfirebugを使うと理解しやすいかと。
　元々あったものも、参考にされたページも駄目なのでしょう。ちゃんとできていたら簡単なはずです。(^^)

　私は仕事でもそれをしてますが、ざっと見てダメだったらテキストと画像だけ抜き出してゼロから書き起こします。そのほうが早い。
    • good
    • 0
    • 件
通報する
この回答へのお礼

色々と教えて頂きありがとうございました。
ちょっと違う方向で私が作っていたものに手を加えて何とかなりました。

<body>タグは何も付けません。
あと、美しくない上に面倒くさいですが

<div>
<ul id="dropmenu">
<li><a href="#">HOME</a></li>
<li id="MenuOn"><a href="#"><font color="#fff">メニュー</font></a>
<ul>
<li><a href="#">メニュー</a></li>
<li><a href=".#">メニュー</a></li>
</ul>
</li>
<li><a>メニュー</a>
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</div>

として、CSSは

#MenuOn a, #MenuOn a:hover {
background: url(画像) no-repeat;
color: #fff;
}

を追加して、<body>タグ用に書いていたものを削除しました。

突貫工事ではありますが、なんとか思っていたものになったので
もうこれでひとまずは良しといたします。

ご回答くださった内容は、また時間のある時にでも挑戦してみたいと思います。
ありがとうございました。

通報する
お礼日時：2015/08/20 13:46

No.4

  • 回答者： ORUKA1951
  • 回答日時：

それを直すほうが「はるかに」難しいですよ。

私も投げ出した。
数学の勉強と同じで基礎からきちんと積み上げれば、短期間で、簡単に、応用が利く。
時間がないと言われますが、そのほうがはるかに早く解決するでしょう。
示したサンプルをそのままこぴぺすれば良い。
　そして、少なくとも
<br>
Cascading Style Sheets Level 2 Revision 1 (CSS2.1) Specification 日本語訳( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )<br>
　6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
くらいはマスターしないと、説明された意味が分からない。

★こぴぺはそのまま使うなら良いが、ちょっと手を加えようとしたら、ゼロからよりも時間がかかるものですよ。

　初心者で時間がないのなら、なおさらきちんと基礎から学びましょう。そのほうが断然早いですよ。HTMLやCSSなんて、一ヶ月もあれば身につけられるはず。きちんと仕様書を読みながら、書いてみる。
    • good
    • 0
    • 件
通報する
この回答へのお礼

やはりそうですよね。無理を言ってすみません。
しかし、残念ながら一か月も無いのです……。
というかもう作業自体は一週間も無いのです。
九月にはサーバーへ上げなければいけません。
そこからまた手直しはするのですが……。

あと、元々あったサイトを編集しているからか
コピペでもなんだか上手くいきません。
なんとかもう少しやってみます。

通報する
お礼日時：2015/08/20 10:55

No.3

  • 回答者： ORUKA1951
  • 回答日時：

スタイルシートです。

文書構造に基づいてきちんと子孫セレクタや属性セレクタを使って書かれているので、いちいちHTML見なくてもわかるはずです。
　説明は簡単に書いてありますが、詳細は仕様書を確認してください。仕様書に書かれている内容は聞かない・・くらいのつもりでないと身につきません。
　
★タブは＿に置換してあるので戻す。
★リキッドですからスマホでも幅広ディスプレイでも利用できる
★HTML側の指定を
　<link rel="stylesheet" type="text/css" media="screen" href="./standard1.css" media="screen">
　とすると携帯電話や印刷機には適用されません。

@charset "Shift_JIS";
/* 基本的な指定 */
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{
width:90%;min-width:630px;max-width:900px;
margin:0 auto;padding:5px;
}

/* ここからプルダウンメニュー */
div.header div.nav{/* header内にあるナビゲーションの指定 */
＿font-size:0.9em;
＿text-align:center;
＿line-height:2em;
}
div.header div.nav ul{
＿list-style-type:none;
＿margin:10px 0;padding:0;
＿font-size:0;/* リンクの隙間 */
}
div.header div.nav ul li{/* このように文書構造に基づいてセレクタを書く */
＿display:inline-block;/* floatではなくinline-blockです */
＿margin:0;padding:0;height:2em;
＿font-size:medium;/* フォントサイズを戻す */
＿width:14%;/* 100/7は14.2% */
＿position:relative;/* 以下の位置やサイズの基準になる */
}
div.header div.nav ul li ul{
＿position:absolute;
＿top:2em;left:0;width:100%;
＿margin:0;
＿display:none;
}
div.header div.nav ul li ul li{
＿display:block;width:100%;
}
/* 動作に伴う色の変更(わかりやすいように別記した) */
div.header div.nav ul li:hover ul{
＿display:block;
}
div.header div.nav ul li a{
＿display:block;
＿width:100%;height:100%;
＿text-decoration:none;
＿background: linear-gradient(white, gray);
}
div.header div.nav ul li a:hover{
＿background: linear-gradient(white, aqua);
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

すみません。５番の回答のお返事を書いたものがえらいことになってしまいました。書き直させていただきます。

色々と教えて頂きありがとうございました。
ちょっと違う方向で私が作っていたものに手を加えて何とかなりました。

＜body＞タグは何も付けません。
あと、美しくない上に面倒くさいですが
変えておきたいメニューの＜li＞のidをMenuOnにして
font colorを白に指定しました。

CSSは
#MenuOn a, #MenuOn a:hover {
background: url(画像) no-repeat;
color: #fff;
}
を追加して、＜body＞タグ用に書いていたものを削除しました。

突貫工事ではありますが、なんとか思っていたものになったので
もうこれでひとまずは良しといたします。

ご回答くださった内容は、また時間のある時にでも挑戦してみたいと思います。
ありがとうございました。

通報する
お礼日時：2015/08/20 13:56

No.2

  • 回答者： ORUKA1951
  • 回答日時：

No.1です。


　簡単なサンプルです。

＞現在選択しているページを<body id="pege03">等として
＞通常時、プルダウンしたメニューはマウスオンで色が変わります。
＞しかし、現在選択しているページのメニューをプルダウンすると
＞これを通常時と同じようにするにはどうしたらよいのでしょうか？

※詳細度が同じ場合は後出のもので上書きされます。
　そのページだけのスタイルシートを後で書けばよい。

＞CSSで定義して自動でマウスオン時と同じ色になる(背景は画像が変わる)ように設定しています。
※一意セレクタ(#)は詳細度が[0100]でとても高い。

＞こちらも自動で選択時の色に変ってしまっています。
　詳細度や出現順位を確認する。

＞しかも、画像が端まで足りていない……。
　その要素の背景ですから、その要素を広げないと

＞プルダウンメニューはすべてマウスオンでしか色が変わらない様にしたいです。
＞選択しているページは自動で色が変わるままで。
　意味不明です。いずれにしても好きになります。

★HTML、CSSの書き方の基本がまったくできていません。
　すくなくとも、HTML4.01やCSSの仕様書は最低限目を通しておきましょう。必要なときにどこを見ればよいかわかる程度でよいです。数学や理科と同じで基礎からきちんと学ぶほうが、ずっと早いし、簡単ですし、応用もできます。
HTML 4.01 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　→構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )とか

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 日本語訳( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　などは特に重要。これがわかっていないと、
・HTMLが汚くなる--メンテナンスが大変。
・CSSが書けない

[補足]
　HP(ヒューレッドパッカード社)を作るとはすごい(^^)
　ウェブサイト、ウェブページですね。
　ホームページ - Wikipedia( https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC … )

下記をよく読んでテストして御覧なさい。

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　のDATAで検証済みのHTML4.01strict+CSS2.1--ウェブ標準です。
★このページだけに適用されるスタイルは<head></head>内に<lin>の後から記述
★HTMLには文書構造しか書かない。【重要】
　ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　をIEやfirefoxで表示して、[表示]→[スタイル]→で任意のスタイルを選択して御覧なさい。HTMLに文書構造以外書かれていないから何でもできる。
★タブは＿に置換してあるので戻すこと
★ナビゲーションのリンクは絶対パスで書かれています。
　そのページがどの階層、ディレクトリにいても統一のものが使えます。(SSIが使える)スタイルシートも同様
★背景画像(グラデーションはCSS3のlinear-gradientを使っています。画像を使用する場合は変更してください。

【サンプルでは下記は相対パスになっています。】
　ローカルサーバーをお持ちでない場合絶対パスでは期待通り動作しないからです。
<link rel="stylesheet" type="text/css" media="screen" href="./standard.css">
　standard.cssは、サンプルHTMLと同じ階層においてください。
　background: linear-gradient(silver, black);
　　　　↓
　background: url();


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<link rel="stylesheet" type="text/css" media="screen" href="./standard.css">
＿<style type="text/css">
<!--
＿div.header div.nav ul li a[href="/manual"]{background: linear-gradient(silver, black);}
＿-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿＿<div class="nav"><!-- ここはナビゲーション(ヘッダ内のあるのでグローバル) -->
＿＿＿<ul>
＿＿＿＿<li><a href="/">トップ</a></li>
＿＿＿＿<li><a href="/products">製品</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/products/1">製品1</a></li>
＿＿＿＿＿＿<li><a href="/products/2">製品2</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="/manual">マニュアル</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/manual/1">マニュアル1</a></li>
＿＿＿＿＿＿<li><a href="/manual/2">マニュアル2</a></li>
＿＿＿＿＿＿<li><a href="/manual/3">マニュアル3</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="/books">参考書</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/books/1">参考書1</a></li>
＿＿＿＿＿＿<li><a href="/books/2">参考書2</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="/old">過去の製品</a></li>
＿＿＿＿<li><a href="/other">その他</a></li>
＿＿＿＿<li><a href="/form">問い合わせ</a></li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

そんなHTML書くからむちゃくちゃになる。



<div class="nav"><!-- ここはナビゲーション -->
　<ul>
　　<li><a href="#">メニュー1</a></li>
　　<li><a href="#">メニュー2</a>
　　　<ul>
　　　　<li><a href="#">メニュー2-1</a></li>
　　　　<li><a href="#">メニュー2-2</a></li>
　　　</ul>
　　</li>
　　<li><a href="#">メニュー3</a>
　　<ul>
　　　<li><a href="#">メニュー3-1</a></li>
　　<li><a href="#">メニュー3-2</a></li>
以下省略

[HTML5]なら
<nav><!-- ここはナビゲーション -->
　<ul>
　　<li><a href="#">メニュー1</a></li>
　　<li><a href="#">メニュー2</a>
　　　<ul>
　　　　<li><a href="#">メニュー2-1</a></li>
　　　　<li><a href="#">メニュー2-2</a></li>
　　　</ul>
　　</li>
　　<li><a href="#">メニュー3</a>
　　<ul>
　　　<li><a href="#">メニュー3-1</a></li>
　　<li><a href="#">メニュー3-2</a></li>
以下省略

<body id="pege03">もいらない(^^)

　div（に限らず)『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』であってデザインのためではない。
　あとでさっぱりわからなくなるし、リストが増減したらわけがわからなくなる。そもそもスタイルシートが煩雑すぎる。

　今は時間がないので、明日にでも・・
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報