すみません。デザイナーで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>
No.6ベストアンサー
- 回答日時:
リンクによって個別に色を変えたい場合は、属性セレクタ(
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を併用して文書構造を補完するためのものでデザインのためじゃない。その文書構造に基づいてスタイルシートでデザインする。という基本中の基本すら説明されていないことが多い。
ORUKA1951さまm(==)m
早速やってみました。確かにjqueryなど入れなくてもゆっくり表示されますね。
○○入門ってページはよく利用させて頂いておりますm(==)m
ORUKA1951さんが私の作ったページをみたら失神するかもしれません。。。
いままではとりあえず形にするだけで精一杯だったので、
基本を押さえて綺麗なソースのかけるようになりたいとおもいます♪
サンプル、検索等ありがとうございました☆
No.5
- 回答日時:
私の示したサンプル、ゆっくりと開くはずです。
スタイルシートのこの三行がそれです。
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>
No.4
- 回答日時:
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;}
すみませ~ん;
丁寧にサンプル提示ありがとうございます。
CSSで個別に形や色をつけたりはできるんですけど、
プルダウンメニューのあの滑らかな動きを取り入れたく、
そこをjqueryの部分とどう対応させたらいいのかが解らないのですぅ(;;)
クラスに対して、ひとつずつ、scriptいれるととっても長くなっちゃうので
嫌かなぁと。。。
でも、メニューがでないと困りますね(汗
普通、あのような、サンプルはプロの方は使わないってことでしょうか~?
3作目のホムペなので試行錯誤してます(^^;
No.3
- 回答日時:
> btnってクラス名はいけないのですね;
異論はあるとは思いますが、自分は btn という名前はあっても問題ないと思います。
# 自分が新たにクラス名を付けられるなら menu_list とかいう感じでそのクラス名の意図を一目で理解できるものにしますが。
自分が問題があると言っているのは、btn と同じ動作・性質を持つものに対して btn2, btn3,...
といった名前を付けることです。それはあなたが id とクラスを混同していることの現れです。
id とクラスの使い分けについてもっと詳しい方が詳細な回答をなさると思いますが、とりあえず検索で見つかった以下のページをお読みください。
http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5 …
なるほど。
では、画像等のボタンであれば、btnってクラス名はつけてもいいということですね。
私が混同したのはメニューリストをボタンだと思っていたことですね(汗
いつもはナビをfireworksで作っていたのですが、同じ動作ならjjqueryにしてみようと思って。
見た目が同じでもfireworksならボタンって名前ですから(^^;
いろいろ誤解があるみたいです(汗
大変勉強になります。
ありがとうございましたm(==)m
No.2
- 回答日時:
> ボタンに個別に色を付ける
つ nth-child()
https://developer.mozilla.org/ja/docs/Web/CSS/:n …
念のために言っておきますが、btn2 とかいうクラス名を作ってはいけません。それはクラスの意味を誤解したデザインです。
ご参考ありがとうございます☆
ちょっとハードルが高いですが、がんばってみます~(^^;
btnってクラス名はいけないのですね;
多用してました(汗
ご指摘ありがとうございましたm(==)m
No.1
- 回答日時:
すみませんが、この中に色の指定や変更を行っているところはありません。
おそらく JavaScript/jQuery の方ではなく CSS の方にメニューの色指定を行っている個所があるのではないでしょうか。
この回答への補足
すみません;
'.btn'が、CSSのクラス名なので、li タグにクラスをそれぞれ与えて色を付けるのですが、
jqueryの仕掛けを動かすために、$の中にクラス名を入れてあげないといけないようなのです。
なので、ボタンに個別に色を付けると先程のスクリプト数行分が、
ボタンの数だけ書かないといけないので分量が多くなってしまうなと思って;
わかりにくくてすみません;宜しくお願いしますm(==)m
以下見本のページでこれをメニューごとに色分けしたいのです;
http://zxcvbnmnbvcxz.com/demonstration/jqnav.html
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jquery中のmatch関数が正常に動...
-
ネストされたチェックボックス...
-
jqueryのsortableで一部ソート...
-
【jQuery】hoverしたn秒後にイ...
-
JS外部ファイル
-
【短い】1つだけ展開/表示/非表...
-
チェックボックスに入っている...
-
クリックで表示、非表示するメ...
-
スムーズスクロールとfleXcroll...
-
DOM の 要素の数え方について
-
多階層ドロップダウンのスマホ...
-
大量のチェックボックス状態取...
-
jqueryにてIEでの不具合 each...
-
jQueryにて現在表示しているURL...
-
MAX関数を使ってからLEFT JOIN...
-
背景色を透明化
-
複数画像のランダム複数表示(...
-
変数内容をHTML内で表示する方法
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
jquery ドロップダウンメニュー...
-
JQueryタブのアクティブ アン...
-
jQueryのeqで最後からn番目以降...
-
チェックボックスに入っている...
-
「jQuery」アコーディオンメニ...
-
クリックした<a>タグのみにClas...
-
javascriptでEnterキーをtabキ...
-
【JQuery】アコーディオンの入...
-
タブ切り替えの初期表示について
-
jQueryでネスト構造の<li>がク...
-
どの<li><a> が押されたか判別...
-
大量のチェックボックス状態取...
-
フルスクリーンについて・・・
-
jQueryのhide,showで中の要素が...
-
【jQuery】遅延実行(タイムラ...
-
アコーディオン自動開閉メニュ...
-
jQueryで表示する吹き出しdivの...
-
JqueryFileTree.js でフォルダ...
-
タブ切り替えの初期表示に関して
おすすめ情報