マウスがホバーした時に開くメニュー
- webの初心者です。class="title"にマウスがホバーした時に.menu:hoverに設定したアニメーションを動作させてマウスがホバーすると開くメニューを作りたいです。
- class="title"の上にマウスが乗るとメニューが閉じてしまいます。class="title"にホバーした時もメニューが開くようにしたいです。
- どなたか分かる方おられましたら回答お願いします。
- ベストアンサー
マウスがホバーした時に開くメニュー
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; }
- shodan
- お礼率53% (17/32)
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （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をどのように記述すればいいかが分からなくて困っています。
関連するQ&A
- CSSのツールチップにアニメーションをつける方法
CSSだけでマウスホバー時にツールチップを表示しています。 以下のように記述することで、ホバー時にツールチップが出るようになったのですが、アニメーションをつけたいと思っています。 HTML ============ <a href='#' class='tooltip'>用語<span>用語の説明</span></a> ============ CSS ============ a:hover {background:#f7f7f7; text-decoration:none;} a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:200px;} a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;} ============ ただ、実際にホバーするのは、ホバー時に表示する文字ではないので、どこにtransitionを記述すればいいかわかりませんでした。 こういう場合、どこにtransitionを追加してあげれば、ホバー時にアニメーションを追加できるのでしょうか？ 以下のセレクタは試してみましたが、ホバー時にアニメーションはつきませんでした。 .tooltip{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } .tooltip span{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } ご教示いただけると幸いです。 よろしくお願いいたします。
- ベストアンサー
- CSS
- background-imageを徐々変化させたい
現在、二枚の画像を徐々に変化させたいと思い ～HTML～ <TABLE> <TBODY> <tr> <td><a href="http://www.abcd5.com/news" class="news_botan"></a></td> </tr> <tr> <td><a href="http://www.efgh5.com/news" class="news_botan"></a></td> </tr> </TBODY> </TABLE> ～CSS～ .news_botan{ width:110px; height:10px; display:block; background:url(IMGTXT/news0.gif) no-repeat; transition: background-image 4.0s ease 5s; -webkit-transition: background-image 3.0s ease 3s; -moz-transition: background-image 3.0s ease 3s; -ms-transition: background-image 3.0s ease 3s; -o-transition: background-image 3.0s ease 3s; } .news_botan:hover{ background:url(IMGTXT/news3.gif); } としましたが変化しませんでした。 どうすれば徐々にnews0.gifからnews3.gifに変化する事が出来るのでしょか？
- ベストアンサー
- CSS
- メニュー項目がずれて表示されてしまいます
本当は横一列になるはずなのですが、ブラウザで確認しても「メニュー項目」が段上にずれてしまいます。詳しい方がおられましたら間違いを修正していただけないでしょうか？ 「index.html」 <body> <div id="wrapper"> <div id="header"> <div id="head_logo"><a href="index.html"><img src="img/head_logo.gif" alt="head_logo" border="0" /></a></div><!-- ▼▼ロゴ画像▲▲ --> <div id="head_right"> <!-- ▼▼キャッチ＆案内テキストここから▼▼ --> <h1>想いを花に乗せて・・・・・・フラワーギフトのFLOWER GARDEN</h1> <h2>Tel.03-1234-5678｜営業時間 11:00～23:00</h2> <!-- ▲▲キャッチ＆案内テキストここまで▲▲ --> </div> </div> </div><!-- //wrapper --> <div id="main_vis"> <img src="img/img_01.jpg" alt="img_01" width="800" height="380" /></div><!-- ▼▼メイン画像▲▲ --> <div id="menubar"> <!-- ▼▼メニュー項目ここから▼▼ --> <div id="menubar_wrap"> <a href="index.html" class="menu_a"> <h2>Home</h2> </a> <a href="concept.html" class="menu_a"> <h2>Concept</h2> </a> <a href="pickup.html" class="menu_a"> <h2>Pick Up</h2> </a> <a href="menu.html" class="menu_a"> <h2>Menu</h2> </a> <a href="shop.html" class="menu_b"> <h2>Shop</h2> </a> <!-- ▲▲メニュー項目ここまで▲▲ --> </div> <!-- //menubar wrap --> </div> <!-- //menubar --> 「ｃｓｓ」 /* =============== MENU BAR ================= */ #menubar { background: url(../img/menubar_bg.gif) repeat-x; height: 55px; margin: 0 auto; text-align: center; } #menubar_wrap { margin: 0 auto; width: 800px; } #menubar a { display: block; float: left; height: 35px; padding: 20px 0 0; width: 160px; } #menubar a:hover { background-position: 0 -55px; text-decoration: none; } .menu_a { background: url(../img/menu_btn_bg.gif) no-repeat; } .menu_b { background-image: url(../img/menu_btn_bg_b.gif); } #menubar h2 { color: #7E0017; font-size: 14px; font-weight: normal; margin: 0; padding: 0 0 3px; }
- ベストアンサー
- HTML
- 外部スタイルシートは同じなのですが…
こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記／／／ <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div> ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス／設備</h2> ○○○徒歩３分<br /> 駐車場2台（バリアフリー）<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright © 2007 All Rights Reserved</div> </div> </body> CSSは下記／／／ * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか？ リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- リストタグを用いた縦メニューで画像に隙間ができます（IE6）
いつも皆さまには助けていただきありがとうございます。 さてまた今回も質問で申し訳ないのですが、リストタグを用いて縦のメニューを作成しています。 IE6でのみメニュー画像の上下に隙間が出来る現象が発生して困っております。（本当は隙間なくしたい） こちらの質問を参考にして左メニューの画像に「display:block;」や「vertical-align:bottom;」を付けてみましたが、変化なしです。 #left img{ border:none; display:block; vertical-align:bottom; } と入れたんですが、記入がおかしいでしょうか？ 色々調べてみましたが、これ以上どういじって良いのかよく分かりません。 一部省略していますがソースを載せますので間違いをご指摘いただければ大変助かります。 よろしくお願いします。 【HTML】 <html> <head> <link rel="stylesheet" href="css/ie6.css" type="text/css" /> <title>タイトル</title> </head> <body> <div id="container"> <!--ヘッダー部分--> <div id="header"> <div id="headerImg" title="タイトル"> </div><!--id:headerImgEnd--> <div id="headerMenu"> <ul> <li></li> <li></li> <li></a></li> </ul> </div><!--headerMenuEnd--> </div><!--id#headerEnd--> <div id="contents"> <!--左メニュー--> <div id="left"> <div id="left_menu"> <ul> <li><a href="a.html" id="a" title="a">a</a></li> </ul> <ul> <li id="b" title="b"></li> <li><a href="c.html" id="c" title="c"></a></li> <li><a href="d.html" id="d" title="d"></ul> </div><!--id:left_menuEnd--> </div><!--id:leftEnd--> <!--メイン--> <div id="main"> </div><!--mainEnd--> <!--フッター--> <div id="footer"> </div><!--id:containerEnd--> </div> </body> </html> 【CSS】 body{ margin:0; padding:0; text-align:center; font-size:14px; } #container{ margin:0 auto; width:800px; text-align:left; borer:solid 1px #999; } #header{ width:800px; } div#headerImg{ width:800px; height:138px; background-image:url(img/title.gif); background-color:#00FFcc; } div#headerMenu{ width:800px; } #contents{ width:800px; } /*左メニュー*/ #left{ float:left; width:180px; } #left_menu ul{ list-style:none; padding:0; margin:0; } #a{ background-image:url(../img/a.gif); width:180px; height:69px; display:block; margin-top:0px; margin-left:0px; } #b{ background-image:url(../img/b.gif); background-repeat:no-repeat; width:180px; height:30px; display:block; margin-top:0px; margin-left:0px; } #c{ background-image:url(../img/c.gif); background-repeat:no-repeat; width:180px; height:25px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#c:hover{ background-image:url(../img/c02.gif); background-repeat:no-repeat; } #d{ background-image:url(../img/d.gif); background-repeat:no-repeat; width:180px; height:24px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#d:hover{ background-image:url(../img/d02.gif); background-repeat:no-repeat; } /*メイン*/ #main{ float:right; width:620px; margin:-14px 0 0 0; } /*フッター*/ #footer{ clear:both; width:800px; height:47px; }
- ベストアンサー
- HTML
- jQueryで追加した要素がマウスホバーに反応しない
jQueryを使って、ボタンを押すと要素を追加しています。 後から追加された要素はマウスホバーなどが有効にならないのですが、 対象方法などあるでしょうか。 下記のようなソースで質問の状態になります。 よろしくお願いします。 <html> <head> <title>test</title> <script type="text/javascript" src="system/jquery-1.3.2.min.js"></script> <script type="text/javascript"> <!-- jQuery(document).ready(function($){ jQuery(".edit").hover( function () { jQuery(this).css("background","yellow"); }, function () { jQuery(this).css("background","none"); } ); jQuery(".insert").click(function () { var html = "<div class='edit'><p>add-text</p></div>"; jQuery("#sortable .edit:first").before(html); }); }); // --> </script> </head> <body> <div><INPUT class="insert" type="button" value=INSERT></DIV> <div id="sortable" style="width:200px;"> <div class="edit"> <p>text1</p> </div> <div class="edit"> <p>text2</p> </div> <div class="edit"> <p>text3</p> </div> </div><!-- id="sortable" --> </body> </html>
- ベストアンサー
- JavaScript
- IE6で見るとメニューバーが崩れてしまいます
ホームページを作成したのですが、ページによって上部に設置したメニューバーが見れたり見れなかったりしてしまいます。CSSハックでIE6でもページ自体は何とか見れるようにはなったのですが、何ページかはどういうわけかトップ部分にあるメニューが画像ではなく、文字で現れて正常に見ることができません。どなた様かお詳しい方、教えて頂けませんでしょうか。下記にhtmlとcssを記述します。 〈html〉 <html> <body> <div class="headbg"><img src="head_bg1.jpg" alt="" border="0"></div> <div class="header"><a href="#" border="0"> <div class="rogo"> </div> </a> <div id="globalnavi"> <ul> <li id="menu1"><a href="#">メニュー1</a></li> <li id="menu2"><a href="#" >メニュー2</a></li> <li id="menu3"><a href="#">メニュー3</a></li> <li id="menu4"><a href="#">メニュー4</a></li> <li id="menu5"><a href="#">メニュー5</a></li> <li id="menu6"><a href="#">メニュー6</a></li> </ul> </div> <div class="main"></div> </div> </body> </html> <CSS> .headbg { height:400px; width: 100%; min-width:900px; border:0px solid #F00; position:absolute; top:66px; left:0; overflow:hidden; background: url(head_bg_bg.jpg); background-repeat:repeat-x; } .rogo { background-image: url(rogo.jpg); background-repeat: no-repeat; height: 160px; width: 160px; padding: 0px; margin-top: 8px; margin-right: 0px; margin-bottom: 11px; margin-left: 33px; position: relative; border: 0px solid #000; clear: both; float: left; position:relative; } .header { width: 900px; height:300px; padding:0px; margin-left: auto; margin-right:auto; text-align:left; margin-top:0px; border:0px solid red; } .main { height:920px; width: 900px; min-width:900px; background-color:#ffffff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto; text-align: center; margin-top:65px; } #globalnavi { margin-left:auto; margin-right:auto; margin-top:-170px; text-align:left; top:0px; left:0px; padding:0px; width:700px; height:52px; list-style:none; overflow:hidden; border: 0px solid red; float:right; clear:both; } #globalnavi ul { list-style-type: none; margin: 0; padding: 0; height: 52px; overflow: hidden; } #globalnavi li { text-indent: -9999px; float:left; width: 116px; height: 52px; margin: 0; padding-right: 0px; border:0px solid #333; } #globalnavi a { display: block; position: relative; width: 100%; height: 52px; } #menu1 a { background: url(menu1_active.jpg) no-repeat 0 0; left:0px; margin-left:0px; } #menu2 a { background: url(menu2.jpg) no-repeat 0 0; margin-left:0px; } #menu3 a { background: url(menu3.jpg) no-repeat 0 0; margin-left:0px; } #menu4 a { background: url(menu4.jpg) no-repeat 0 0; margin-left:0px; } #menu5 a { background: url(menu5.jpg) no-repeat 0 0; margin-left:15px; } #menu6 a { background: url(menu6.jpg) no-repeat 0 0; margin-left:15px; }
- ベストアンサー
- ネットトラブル
- CSSでメニューバー
初心者の質問ですいません。 CSSでこのようにボックス分けして * { margin : 0 ; padding : 0 ; } body { width : 100% ; } #my_body{margin:0 auto; width:875px;} #my_header { width : 100% ; height : 80px ; } #my_header2{ width : 100% ; background-color: #0080ff;} #my_navigation{float:left; width:150px; background-color: #0080ff; min-height: 1000px;} #my_contents{float:left; width:725px; background-color: #e5f6ff; min-height: 1000px;} #my_footer { width : 100% ; clear : both ; background-color: #0080ff; } HTMLのコード <div id="my_body"> <div id="my_header">一番上のタイトルとグラデーション</div> <div id="my_header2"> グラデーション <style type="text/css"> body { background-image: url("縦長の写真"); background-repeat: repeat-x; } </style> メニューバー <form> <input type="button" value="" class="li01" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li02" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li03" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li04" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li05" onClick="URL'" /> </form> </div> 左のメニューバー <div id="my_navigation"> <div id="mynavi"> </div> </div> 本文 <div id="my_contents"> <div id="mymain"> </div> </div> フッダー <div id="my_footer"></div> </div> これで、my_header2で指定したグラデーションがメニューバーの両側に表示されると思うのですが、グラデーションが表示されません。 初心者なので根本的な間違えを起こしていたらすみません。 なぜ表示されないか教えていただけませんか。 長文失礼しました。
- 締切済み
- HTML
- ドロップダウンメニューについて
apycomでhttp://apycom.com/menus/1-yellow-green.htmlの ドロップダウンメニューをダウンロードして設定しているのですが、サブメニューのリンク文字の変更方法が分からなくて困っています。 サブメニューの背景を変更したのでリンクの文字をもっとハッキリ見える色に変更したいです。 マウスが乗った時の文字の色も変更できません。 昨日から色々やってるのですがどうしても解決できないのでお聞きしました。 よろしくお願いします。 /** ********************************************* * Prototype of styles for horizontal CSS-menu * @data 30.06.2009 ********************************************* * (X)HTML-scheme: * <div id="menu"> * <ul class="menu"> * <li><a href="#" class="parent"><span>level 1</span></a> * <ul> * <li><a href="#" class="parent"><span>level 2</span></a> * <ul><li><a href="#"><span>level 3</span></a></li></ul> * </li> * </ul> * </li> * <li class="last"><a href="#"><span>level 1</span></a></li> * </ul> * </div> ********************************************* */ /* menu::base */ div#menu { height:41px; background : transparent url(main-bg.png) repeat-x scroll 0% 0%; } div#menu ul { margin: 0; padding: 0; list-style: none; float: left; } div#menu ul.menu { padding-left: 30px; } div#menu li { position: relative; z-index: 9; margin: 0; padding: 0 5px 0 0; display: block; float: left; } div#menu li:hover >ul { left: -2px; } div#menu a { position: relative; z-index: 10; height: 41px; display: block; float: left; line-height: 41px; text-decoration: none; font: normal 12px Trebuchet MS; } div#menu a:hover, div#menu a:hover span { color: #fff; } div#menu li.current a {} div#menu span { display: block; cursor: pointer; background-repeat: no-repeat; background-position: 95% 0; } div#menu ul ul a.parent span { background-position:95% 8px; background-image : url(item-pointer.gif); } div#menu ul ul a:hover.parent span { background-image : url(item-pointer-mover.gif); } /* menu::level1 */ div#menu a { padding: 0 10px 0 10px; line-height: 30px; color : rgb(56, 56, 56); } div#menu span { margin-top: 5px; }/**@replace#1*/ div#menu li { background : transparent url(main-delimiter.png) no-repeat scroll 98% 4px; } div#menu li.last { background: none; } /* menu::level2 */ div#menu ul ul li { background: none; } div#menu ul ul { position: absolute; top: 38px; left: -999em; width: 163px; padding: 5px 0 0 0; background : rgb(179, 221, 81) none repeat scroll 0% 0%; margin-top:1px; } div#menu ul ul a { padding: 0 0 0 15px; height: auto; float: none; display: block; line-height: 24px; color : rgb(56, 56, 56); } div#menu ul ul span { margin-top: 0; padding-right: 15px; _padding-right: 20px; color : rgb(56, 56, 56); } div#menu ul ul a:hover span { color: #fff; } div#menu ul ul li.last { background: none; } div#menu ul ul li { width: 100%; } /* menu::level3 */ div#menu ul ul ul { padding: 0; margin: -38px 0 0 163px !important; margin-left:172px; color: #FFFFFF; } /* colors */ div#menu ul ul ul { background: rgb(41,41,41); } div#menu ul ul ul ul { background: rgb(38,38,38); } div#menu ul ul ul ul { background: rgb(35,35,35); } /* lava lamp */ div#menu li.back { background : transparent url(lava.png) no-repeat scroll right -44px !important; background-image : url(lava.gif); width: 13px; height: 44px; z-index: 8; position: absolute; margin: -1px 0 0 -5px; } div#menu li.back .left { background : transparent url(lava.png) no-repeat scroll left top !important; background-image : url(lava.gif); height: 44px; margin-right: 8px; } 【html】 <div id="menu"> <ul class="menu"> <li><a href="#"><span>Home</span></a> <li><a href="#" class="parent"><span>商品紹介</span></a> <ul> <li><a href="#"><span>コンクリート</span></a> <li><a href="#"><span>木材</span></a> <li><a href="#"><span>アクセサリー</span></a> <li><a href="#"><span>砂</span></a> <li><a href="#"><span>フード</span></a>
- 締切済み
- ホームページ作成ソフト
- 後付けでドロップダウンメニューを作りたい
現在画像で作った横並びのナビゲーションメニューがあります。 そこへマウスポントすることでドロップダウンのメニュー（出来れば半透明）を追加したいのですが うまくいきません。 既存のコードは以下の通りです。 --------------------------------------------------------------------- 【css】 #globalnavi{ margin: 0; padding: 0; width: 994px; height: 50px; background-image: url(../image/button/button-bg.png); background-repeat: no-repeat; } #globalnavi ul{ list-style-type: none; margin: 0; padding: 0; } #globalnavi li{ text-indent: -9999px; float:left; width: 142px; margin: 0; padding: 0; } #globalnavi a{ display: block; width: 100%; height: 50px; background-image: url(../image/button/button.png); background-repeat: no-repeat; } #menu1 a{background-position: 0 0;} #menu2 a{background-position: -142px 0;} #menu3 a{background-position: -284px 0;} #menu4 a{background-position: -426px 0;} #menu5 a{background-position: -568px 0;} #menu6 a{background-position: -710px 0;} #menu7 a{background-position: -852px 0;} #globalnavi a:hover{ background-image: url(../image/button/button.png); background-repeat: no-repeat; } #menu1 a:hover{background-position: 0 -50px;} #menu2 a:hover{background-position: -142px -50px;} #menu3 a:hover{background-position: -284px -50px;} #menu4 a:hover{background-position: -426px -50px;} #menu5 a:hover{background-position: -568px -50px;} #menu6 a:hover{background-position: -710px -50px;} #menu7 a:hover{background-position: -852px -50px;} 【html】 <nav id="globalnavi"> <ul> <li id="menu1"><a href="menu1.html" title="メニュー1">メニュー1</a></li> <li id="menu2"><a href="menu2.html" title="メニュー2">メニュー2</a></li> <li id="menu3"><a href="menu3.html" title="メニュー3">メニュー3</a></li> <li id="menu4"><a href="menu4.html" title="メニュー4">メニュー4</a></li> <li id="menu5"><a href="menu5.html" title="メニュー5">メニュー5</a></li> <li id="menu6"><a href="menu6.html" title="メニュー6">メニュー6</a></li> <li id="menu7"><a href="menu7.html" title="メニュー7">メニュー7</a></li> </ul> </nav> --------------------------------------------------------------------- どうぞ宜しくお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
お礼
ありがとうございます。 アコーディオン無事作成することが出来ました。