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

マウスがホバーした時に開くメニュー

解決済

  • 質問者：shodan
  • 質問日時：
  • 回答数：3件

webの初心者です。
class="title"にマウスがホバーした時に
.menu : hoverに設定したアニメーションを動作させて
マウスがホバーすると開くメニューを作りたいのですが

この状態だとclass="menu"にホバーした時は開くのですが
class="title"の上にマウスが乗るとメニューが閉じてしまいます。
どうにかしてclass="title"にホバーした時もメニューが開くようにしたいです。
伝わりにくかったらすいません。
どなたか分かる方おられましたら回答お願いします。

<body>
<div class="wrap">
<div class="title"></div>
<div class="menu">
<h1 id="m1"></h1>
<h1 id="m2"></h1>
<h1 id="m3"></h1>
<h1 id="m4"></h1>
<h1 id="m5"></h1>
<h1 id="m6"></h1>
</div>
</div>
</body>


.menu {
height: 620px;
width: 150px;
background-repeat: no-repeat;
margin-left: 0px;
background-image: url(../img/menu.gif);
background-position: right;
-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-ms-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
transition: all 1s ease-in-out 0s;
}
.title {
background-image: url(../img/title.gif);
background-repeat: no-repeat;
height: 620px;
width: 130px;
float: left;
}

.menu:hover {
margin-left: 40px;
}

通報する

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

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

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

No.2のサンプルには、ベンダーフィックスつけてませんので、それを付けてください。

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

ありがとうございます。
アコーディオン無事作成することが出来ました。

通報する
お礼日時：2013/03/20 20:00

No.2

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

「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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.1

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

　どんなに工夫しても、そのHTMLでは、まったく不可能です。

hoverされる要素の子供じゃないから・・
　アコーディオンなど、凝ったデザインの前に基礎からきちんと、それもまずHTMLから学びなおしましょう。そのほうが断然早いです。
★HTMLは文書構造だけを正確に、スタイルシートはプレゼンテーション
　⇒構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★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 … )
★そして、class名は文書構造を補完するもの
　「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」デザインのためにつけるのじゃない。

　ここまでがきちんと出来ていないと、デザインも出来ません。
<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/HT … )
　ここで、ブラウザの表示メニューから色々なスタイルシートを選択するとこのあたりが良くわかるかも。★HTMLがきちんと書かれているから、HTMLは簡単なうえに、デザインの自由度が高くなる。

　まず、HTMLをきちんと書き直してみましょう。そこから始めないと・・

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

回答ありがとうございます。
HTMLのご指摘は有り難いのですが

僕が最も知りたい部分は
「div.nav ol li:hoverで、div.nav ol li olを広げれば」
この部分です。
cssをどのように記述すればいいかが分からなくて困っています。

通報する
お礼日時：2013/03/15 15:33

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報