- ベストアンサー
マウスがホバーした時に開くメニュー
- webの初心者です。class="title"にマウスがホバーした時に.menu:hoverに設定したアニメーションを動作させてマウスがホバーすると開くメニューを作りたいです。
- class="title"の上にマウスが乗るとメニューが閉じてしまいます。class="title"にホバーした時もメニューが開くようにしたいです。
- どなたか分かる方おられましたら回答お願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.2のサンプルには、ベンダーフィックスつけてませんので、それを付けてください。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
「div.nav ol li:hoverで、div.nav ol li olを広げれば」 この部分です。 CSSをどのように記述すればいいかが分からなくて困っています。 できれば、理屈を理解した上で自力で解決して欲しかったです。そのほうが絶対に身につくと思いましたから・・ div.header div.nav ol,div.header div.nav ol li{ display:block;list-style:none;margin:0;padding:0;text-align:center; line-height:40px;/* 行の高さを決めておきます */ } div.header div.nav ol{width:100%;} div.header div.nav ol li{ display:inline-block;/* これと先のtext-alignで中央 */ width:10%;height:40px; background-color:yellow;/* 色も変えてみます */ position:relative;/* 配下の要素の位置サイズの基準とするため */ } /* これ↓はなくても良いが、まぁせっかくだから */ div.header div.nav ol li a{display:block;width:100%;height:100%;text-decoration:none;} div.header div.nav ol li ol{ position:absolute;top:40px;/* 親のstaticじゃないブロックliを参照 */ } div.header div.nav ol li ol li{ display:block;width:100%; /* ここから時間的変化の指定 */ transition-property: background-color; transition-duration:1s; transition-timing-function:ease-in-out; } div.header div.nav ol li ol{ overflow:hidden;height:0; /* ここから時間的変化の指定 */ transition-property: height; transition-duration:1s; transition-timing-function:ease-in; } div.header div.nav ol li:hover ol{ height:200px;/* 高さは高めにしておいても表示されません */ } div.header div.nav ol li:hover ol li{background-color:rgb(255,200,0);} これだけです。ポイントは:hoverして開いたら、その子供もその対象内にないとポインターが逃げたら縮まってしまう */ 単に写すだけじゃなく、よく理解して、応用してください。 理屈さえ、わかれば簡単だと思います。色々な形で応用できるよう頑張ってください。 ★HTMLは、Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )でチェックしてあります。 HTML4.01strict+CSS3です。transitionに未対応の場合はぱっと開きます。 ★タブは＿ｉ置換してあるので戻してください。 <!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"> <!-- div.header div.nav ol,div.header div.nav ol li{display:block;list-style:none;margin:0;padding:0;text-align:center;line-height:40px;} div.header div.nav ol{width:100%;} div.header div.nav ol li{display:inline-block;width:10%;background-color:yellow;position:relative;height:40px;} div.header div.nav ol li a{display:block;width:100%;height:100%;text-decoration:none;} div.header div.nav ol li ol{position:absolute;top:40px;} div.header div.nav ol li ol li{display:block;width:100%; transition-property: background-color; transition-duration:2s; transition-timing-function:ease-in-out; } div.header div.nav ol li ol{overflow:hidden;height:0; transition-property: height; transition-duration:1s; transition-timing-function:ease-in; } div.header div.nav ol li:hover ol{height:200px;} div.header div.nav ol li:hover ol li{background-color:rgb(255,200,0);} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/Product">Product</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/Product/A">ProductA</a></li> ＿＿＿＿＿＿<li><a href="/Product/B">ProductB</a></li> ＿＿＿＿＿＿<li><a href="Product/C">ProductC</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Books">Books</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/Books/A">BooksA</a></li> ＿＿＿＿＿＿<li><a href="/Books/B">BooksB</a></li> ＿＿＿＿＿＿<li><a href="/Books/C">BooksC</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Profile">Profile</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-15</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
どんなに工夫しても、そのHTMLでは、まったく不可能です。hoverされる要素の子供じゃないから・・ アコーディオンなど、凝ったデザインの前に基礎からきちんと、それもまずHTMLから学びなおしましょう。そのほうが断然早いです。 ★HTMLは文書構造だけを正確に、スタイルシートはプレゼンテーション ⇒構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) ★DIVは他に適切な要素がないときの最後の手段です。 ⇒Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. ( http://www.w3.org/TR/html5/grouping-content.html#the-div-element ) ★そして、class名は文書構造を補完するもの 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」デザインのためにつけるのじゃない。 ここまでがきちんと出来ていないと、デザインも出来ません。 <div class="wrap"><!-- wrapって何？ --> <div class="title"></div><!-- 見出しならh1です --> <div class="menu"><!-- menueでもいいけど、ひょっとしてナビゲーションじゃないの --> <h1 id="m1"></h1><!-- 見出しがこの様に並ぶことはあってはなりません。HTML５ではひとつのセクションに、ひとつしか書けなくなります。 --> 書き直すと <body> <div class="header"> <h1>ページタイトル</h1> <div class="nav"> <ol> <li><a href="/">TOP</a></li> <li><a href="/Products">Products</a><!-- 親項目 --> <ol> <li><a href="/Products/Tools">Tools</a></li><!-- 子項目 --> <li><a href="/Products/parts">部品</a></li> </ol> </li> とか・・になるはずです。 こうなっていれば、アコーディオンだろうが、なんだろうが自由自在にデザインできます。 div.nav ol li:hoverで、div.nav ol li olを広げれば、そのどこにいても広がったままですし・・ 将来、気が変わってまったく異なるデザインにするのも簡単です。 [参考にしたサイト] ⇒ナビゲーションリストを様々にデザインしてみよう。 ( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) ここで、ブラウザの表示メニューから色々なスタイルシートを選択するとこのあたりが良くわかるかも。★HTMLがきちんと書かれているから、HTMLは簡単なうえに、デザインの自由度が高くなる。 まず、HTMLをきちんと書き直してみましょう。そこから始めないと・・
お礼
回答ありがとうございます。 HTMLのご指摘は有り難いのですが 僕が最も知りたい部分は 「div.nav ol li:hoverで、div.nav ol li olを広げれば」 この部分です。 cssをどのように記述すればいいかが分からなくて困っています。
お礼
ありがとうございます。 アコーディオン無事作成することが出来ました。