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

jqueryプルダウンメニュー個別着色

解決済

  • 質問者：powbluesky
  • 質問日時：
  • 回答数：6件

すみません。デザイナーでjqueryの配布しているものをお借りしているのですが、
プルダウンメニューで、メニューの色を個別に変えたいのですが、
CSSクラス名ごとに、下記のスクリプトを書かないといけないのでしょうか？

それとも、$('.btn')のところを、＄（'.btn','.btn2','.btn3')とかって省略はできますか？
基本を解ってなくてすみません；
どうぞ宜しくお願い致しますm（＝＝）m

<script type="text/javascript">
$(function(){
$('.btn').hover(function(){
var btn = $(this).find('li').length;
$(this).animate({'height':24 * btn + 'px'},'fast');
},function(){
$(this).animate({'height':'24px'},'fast');
});
});
</script>

通報する

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

質問の本文を隠す

A 回答 (6件)

No.6ベストアンサー

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

　リンクによって個別に色を変えたい場合は、属性セレクタ(

http://momdo.s35.xrea.com/web-html-test/spec/CSS … )で指定するのが楽です。いちいちidを振るのは馬鹿げています。後々メンテナンスで困るのが目に見えている。

　なお、製作する立場になるとホムペなんて変な略語は使わないようにしましょう。
　ウェブサイトとかウェブページとか・・
ホームページとは、ブラウザを最初に起動した時に表示されるホーム(基点)のページです。「私はホームページはgoogleにしています。」と使います。
　ホームページ - Wikipedia( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC% … )

　まだ、始めたばかりのようですから、アドバイスを
まず基礎となる仕様書
HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
CSS 2.1仕様（日本語訳）( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　は一応、目を通しておきましょう。巷には本当にたくさんの？？？？のマニュアルサイトがたくさんあります。基本を身につけていれば、無駄なおかしなものを身につけて、本堂に戻るのに苦労するなんて事は減ります。
　DIVやSPANはclassやidを併用して文書構造を補完するためのものでデザインのためじゃない。その文書構造に基づいてスタイルシートでデザインする。という基本中の基本すら説明されていないことが多い。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951さまm（＝＝）m

早速やってみました。確かにjqueryなど入れなくてもゆっくり表示されますね。

○○入門ってページはよく利用させて頂いておりますm（＝＝）m

ORUKA1951さんが私の作ったページをみたら失神するかもしれません。。。

いままではとりあえず形にするだけで精一杯だったので、

基本を押さえて綺麗なソースのかけるようになりたいとおもいます♪

サンプル、検索等ありがとうございました☆

通報する
お礼日時：2014/06/27 19:24

No.5

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

私の示したサンプル、ゆっくりと開くはずです。


スタイルシートのこの三行がそれです。
transition-property:height;/* 高さを時間で制御する。 */
transition-duration:1s;/* 一秒 */
transition-timing-function:ease-in-out;/* 変化の仕方 */

＞普通、あのような、サンプルはプロの方は使わないってことでしょうか～？
　ど素人なクライアント受けはよいのですが(苦笑)。あまり使うとプロ間では馬鹿にされます。
　最後に、サンプルコード全体を上げて置きますが、試されたら分かるように印刷には適用されませんね。代わりに印刷ではリンク先が表示されます。
　なによりも、HTMLもCSSもメンテナンスが楽なのは分かりますよね。デザインを変更する時にHTMLを弄(いじ)くる必要ありませんし、スタイルシートも慣れればHTML見なくても良い。
★タブは＿に置換してあるので戻す。
★リキッドでスマホにも対応

<!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@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
<style type="text/css">
<!--
body{line-height:1.6em;}
h1,h2,h3,h4,h5,h6 p{margin:0;}
p{text-indent:1em;}
-->
</style>
<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}
div.header,div.section,div.footer{width:90%;min-width:470px;max-width:900px;margin:0 auto;padding:5px;}
div.section div.section{min-width:0;width:auto;}
div.header div.nav ul{
list-style:none;
margin:0 auto;padding:0;
width:80%;
line-height:30px;
text-align:center;
font-size:0;
z-index:100;
}
div.header div.nav ul li{
display:inline-block;
margin:0;padding:0;
width:20%;
position:relative;
height:30px;
font-size:16px;
}
div.header div.nav ul li ul{
display:block;
overflow:hidden;
width:100%;
transition-property:height;
transition-duration:1s;
transition-timing-function:ease-in-out;
position:absolute;
height:0;
top:30px;left:0;
}
div.header div.nav ul li:hover ul{
height:120px;
}
div.header div.nav ul li ul li{
display:block;
width:100%;
}
div.header div.nav li a{
display:block;
width:100%;
height:100%;
text-decoration:none;
}
div.section{position:relative;}
div.section div.aside{
position:absolute;
top:0;right:0;
width:180px;height:100%;
font-size:0.8em;
}
div.section h2,div.section p{margin-right:190px;}
div.section div.section p{margin-right:5px;}

/* 色を指定 */
body{background-color:silver;}
div.header,div.section,div.footer{color:white;background-color:gray;}
div.header div.nav ul li a:link{color:yellow;background-color:silver;}
div.header div.nav ul li a:hover{background-color:black;}
div.header div.nav ul li a[href="/Books/2.html"]{background-color:green;}
div.header div.nav ul li a[href="/Books/2.html"]:hover{background-color:lime;}
div.header div.nav ul li a[href="/Profile"]+ul li a{background-color:red;}
div.section div.aside{background-color:white;color:black;}
-->
</style>
<style type="text/css" media="print">
<!--
a:after{content:"(http://hoge.com"attr(href)")";}
-->
</style>
</head>
<body>
＿<div class="header">
＿＿<h1>ページタイトル</h1>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li><a href="/">Top</a></li>
＿＿＿＿<li><a href="/Books">Books</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/Books/1.html">Book1</a></li>
＿＿＿＿＿＿<li><a href="/Books/2.html">Book2</a></li>
＿＿＿＿＿＿<li><a href="/Books/3.html">Book3</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="/Products">Products</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/Products/1.html">Product1</a></li>
＿＿＿＿＿＿<li><a href="/Products/2.html">Product2</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="/Profile">Profile</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/Profile/info.html">Infomation</a></li>
＿＿＿＿＿＿<li><a href="/Profile/formMail.html">ContactUs</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="aside">
＿＿＿<h3>関連情報</h3>
＿＿</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.4

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

jqueryには無関係です。

firebugで調べたらお分かりのようにCSSで色は
ul.nav li:hover {
background: none repeat scroll 0 0 #333;
cursor: pointer;
}
と書かれていますよ。

　そもそも、この程度のプルダウンにjquery使用するのは問題です。
　javascriptが無効だとメニュー開きません。下記でも最初に否定されている。デザイナーと自称されるなら、基本的な事です。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン（品質に関するガイドライン） - ウェブマスター ツール ヘルプ( https://support.google.com/webmasters/answer/357 … )］より

<div class="header">
　<h1>ページタイトル</h1>
　<div class="nav">
　　<ul>
　　　<li><a href="/">Top</a></li>
　　　<li><a href="/Books">Books</a>
　　　　<ul>
　　　　　<li><a href="/Books/1.html">Book1</a></li>
　　　　　<li><a href="/Books/2.html">Book2</a></li>
　　　　　<li><a href="/Books/3.html">Book3</a></li>
　　　　</ul>
　　　</li>
　　　<li><a href="/Products">Products</a>
　　　　<ul>
　　　　　<li><a href="/Products/1.html">Product1</a></li>
　　　　　<li><a href="/Products/2.html">Product2</a></li>
　　　　</ul>
　　　</li>
　　　<li><a href="/Profile">Profile</a>
　　　　<ul>
　　　　　<li><a href="/Profile/info.html">Infomation</a></li>
　　　　　<li><a href="/Profile/formMail.html">ContactUs</a></li>
　　　　</ul>
　　　</li>
　　</ul>
　</div>
</div>
※多分このように、「id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )」してマークアップされていると思います。HTML5では<header></header><nav></nav>になります。

　それをスタイルシートでデザインしていけば、検索エンジンは無論、スタイルシートだけ変えるなりでスマホもフィーチャホンも印刷にも対処できる。
　色は、セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )を使ってお好きに設定すればよい。順番や項目数が変わっても使えるしね。

<style type="text/css" media="screen">
<!--
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 ul{
list-style:none;
margin:0 auto;padding:0;
width:80%;
line-height:30px;
text-align:center;
font-size:0;
}
div.header div.nav ul li{
display:inline-block;
margin:0;padding:0;
width:20%;
position:relative;
height:30px;
font-size:16px;
}
div.header div.nav ul li ul{
display:block;
overflow:hidden;
width:100%;
transition-property:height;
transition-duration:1s;
transition-timing-function:ease-in-out;
position:absolute;
height:0;
top:30px;left:0;
}
div.header div.nav ul li:hover ul{
height:120px;
}
div.header div.nav ul li ul li{
display:block;
width:100%;
}
div.header div.nav li a{
display:block;
width:100%;
height:100%;
text-decoration:none;
}
/* 色を指定 */
div.header div.nav ul li a:link{color:white;background-color:silver;}
div.header div.nav ul li a:hover{background-color:black;}
div.header div.nav ul li a[href="/Books/2.html"]{background-color:green;}
div.header div.nav ul li a[href="/Books/2.html"]:hover{background-color:lime;}
div.header div.nav ul li a[href="/Profile"]+ul li a{background-color:red;}



　
    • good
    • 0
    • 件
通報する
この回答へのお礼

すみませ～ん；
丁寧にサンプル提示ありがとうございます。

CSSで個別に形や色をつけたりはできるんですけど、
プルダウンメニューのあの滑らかな動きを取り入れたく、
そこをjqueryの部分とどう対応させたらいいのかが解らないのですぅ（；；）
クラスに対して、ひとつずつ、scriptいれるととっても長くなっちゃうので
嫌かなぁと。。。

でも、メニューがでないと困りますね（汗
普通、あのような、サンプルはプロの方は使わないってことでしょうか～？
3作目のホムペなので試行錯誤してます（＾＾；

通報する
お礼日時：2014/06/27 17:06

No.3

  • 回答者： hitomura
  • 回答日時：

> btnってクラス名はいけないのですね；


異論はあるとは思いますが、自分は btn という名前はあっても問題ないと思います。
# 自分が新たにクラス名を付けられるなら menu_list とかいう感じでそのクラス名の意図を一目で理解できるものにしますが。
自分が問題があると言っているのは、btn と同じ動作・性質を持つものに対して btn2, btn3,...
といった名前を付けることです。それはあなたが id とクラスを混同していることの現れです。

id とクラスの使い分けについてもっと詳しい方が詳細な回答をなさると思いますが、とりあえず検索で見つかった以下のページをお読みください。
http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5 …
    • good
    • 0
    • 件
通報する
この回答へのお礼

なるほど。
では、画像等のボタンであれば、btnってクラス名はつけてもいいということですね。

私が混同したのはメニューリストをボタンだと思っていたことですね（汗

いつもはナビをfireworksで作っていたのですが、同じ動作ならjjqueryにしてみようと思って。

見た目が同じでもfireworksならボタンって名前ですから（＾＾；

いろいろ誤解があるみたいです（汗

大変勉強になります。

ありがとうございましたm（＝＝）m

通報する
お礼日時：2014/06/27 16:34

No.2

  • 回答者： hitomura
  • 回答日時：

> ボタンに個別に色を付ける


つ nth-child()
https://developer.mozilla.org/ja/docs/Web/CSS/:n …

念のために言っておきますが、btn2 とかいうクラス名を作ってはいけません。それはクラスの意味を誤解したデザインです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご参考ありがとうございます☆
ちょっとハードルが高いですが、がんばってみます～（＾＾；

btnってクラス名はいけないのですね；
多用してました（汗
ご指摘ありがとうございましたm（＝＝）m

通報する
お礼日時：2014/06/27 15:26

No.1

  • 回答者： hitomura
  • 回答日時：

すみませんが、この中に色の指定や変更を行っているところはありません。


おそらく JavaScript/jQuery の方ではなく CSS の方にメニューの色指定を行っている個所があるのではないでしょうか。

この回答への補足

すみません；
'.btn'が、CSSのクラス名なので、li タグにクラスをそれぞれ与えて色を付けるのですが、
jqueryの仕掛けを動かすために、＄の中にクラス名を入れてあげないといけないようなのです。
なので、ボタンに個別に色を付けると先程のスクリプト数行分が、
ボタンの数だけ書かないといけないので分量が多くなってしまうなと思って；
わかりにくくてすみません；宜しくお願いしますm（＝＝）m

以下見本のページでこれをメニューごとに色分けしたいのです；
http://zxcvbnmnbvcxz.com/demonstration/jqnav.html

補足日時：2014/06/27 14:45
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報