jqueryのドロップダウンメニュをアメブロに設置する方法教えてください
- アメブロにjqueryのドロップダウンメニュを設置するための方法を教えてください。PC上では上手く動作しているが、アメブロに設置すると制限があるため上手くいかない。
- jqueryのドロップダウンメニュをアメブロに設置する際の制約や問題点について教えてください。
- アメブロにjqueryのドロップダウンメニュを設置する方法について詳細な手順を教えてください。
- ベストアンサー
jqueryのドロップダウンメニュをアメブロに。
ドロップダウンメニューを 現在、活動しているアメブロに設置したくて jqueryを利用したものがあるのを知り さっそく本を買ってサンプルを見ながら自分なりの手を ほんの少しだけ加えて作ってみたのですが PC上では上手く動作してはいるものの アメブロに設置するとなると禁止タグや htmlなど、制限があるらしく 試行錯誤しても上手くいかず…。 どうしても、ここまでやったからには 設置してみたいとは思いつつも どこに、どのようにすればいいものか 全くわからないので お力を借りたいと思いokwaveに登録してみました。 設置の仕方や、余計な箇所や改善箇所など お分かりになる方 ぜひ、教えてください。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>sample2</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.menu li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }); }); </script> <style type="text/css"> *{ margin:0; padding:0; list-style-type:none; } #container{ margin:100px auto; width:800px; } ul.menu li{ float:left; width:200px; height:40px; background:url("画像URL1"); position:relative; } * html ul.menu li{ display:inline; zoom:1; } *+html ul.menu li{ display:inline; zoom:1; } ul.menu li a{ display:block; width:100%; height:100%; line-height:40px; text-indent:30px; font-weight:bold; text-decoration:none; position:relative; } ul.menu li a:hover{ background:url("画像URL2"); } ul.sub{ display:none; } * html ul.sub{ zoom:1; position:relative; } *+html ul.sub{ zoom:1; position:relative; } ul.sub li{ float:none; } ul.sub li ul.sub{ position:absolute; left:200px; top:0; } ul.menu{ zoom:1; } ul.menu:after { height:0; visibility:hidden; content:"."; display:block; clear:both; } </style> </head> <body> <div id="container"> <ul class="menu"> <li><a href="#"><img src="画像URL3" align="left" width="200" height="40 "border="0"></a> </li> <li><a href="#"><img src="画像URL4" align="left" width="200" height="40 "border="0"></a> <ul class="sub"> <li><a href="#"><img src="画像URL5" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL6" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL7" align="left" width="200" height="40 "border="0"></a></li> </ul> </li> <li><a href="#"><img src="画像URL8" align="left" width="200" height="40 "border="0"></a> <ul class="sub"> <li><a href="#"><img src="画像URL9" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL10" align="left" width="200" height="40 "border="0"></a> <ul class="sub"> <li><a href="#"><img src="画像URL11" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL12" align="left" width="200" height="40 "border="0"></a></li> ・ ・ ・ ・ 字数制限があるので省略します…。 ・ ・ ・ ・ </ul> </div> </body> </html> ※ もっと簡潔なやり方があるとは思うのですが 無い知恵を振り絞った結果で 画像３～は オリジナルのフォントを使いたいが為に 透過の画像でオリジナルフォントを メニュ背景画像の上に使っています。
- janne_yuzuoil
- お礼率50% (1/2)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>これらのタグというのは消しても大丈夫なのでしょうか。 必要なタグは、JavaScript部と、 <ul class="menu"> （省略） </ul> なので、他はいりません。 むしろHEAD、BODYなどを入れたらおかしくなります。 >記述はどのようになるのでしょうか…。 フリープラグインの中にそのまま入れても良いのでしたら、 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.menu li").hover( function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); } ); }); </script> <ul class="menu"> （省略） </ul> で良いです。 でも、li はfloatされているので、きっと横並びなんですよね？ そうするとフリープラグインに入れたいわけじゃないんですよね？ 表示させたいところに、 <ul class="menu"> （省略） </ul> を入れればいいと思います。
その他の回答 (1)
- mikemike7
- ベストアンサー率87% (97/111)
>PC上では上手く動作してはいるものの PC上でうまく動作しているなら、アメブロでもいけるのでは？ >アメブロに設置するとなると禁止タグや >htmlなど、制限があるらしく >試行錯誤しても上手くいかず…。 基本的にJavaScriptは認められていなかったような。 管理画面のサイドバーの設定で、 「フリープラグイン」枠でのみ使えたと思います。 そこに、 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.menu li").hover( function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); } ); }); </script> を放り込んであげれば動作するんじゃないかな。
補足
回答ありがとうございます。 javascriptの件は帰ってみてから試そうと思います。 javascript以下の記述なのですが headやbodyが禁止タグになってるみたいで… これらのタグというのは消しても大丈夫なのでしょうか。 もしも消す場合 記述はどのようになるのでしょうか…。
関連するQ&A
- ドロップダウンメニューの方法を教えてください
■ドロップダウンメニューでサブメニューが横並びで出るようにしたいと思っています。 HTMLは下記のように記述しています。どのようにJavascriptを記述すると良いのか教えてください。よろしくお願いします。 【html】 <div id="menuber"> <a href="#"><IMG src="test/m1.gif" width="101" height="20" border="0" align="left"></a> <div class="hiddenmenus"> <span id="sub"> <a href="#"><IMG src="test/sub1.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub2.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub3.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub4.gif" width="101" height="20" border="0" align="left"></a> </span> </div> </div> 【CSS】 .hiddenmenus {position:absolute; top: 20px; left: 0px;} #sub1 { visibility: hidden; }
- ベストアンサー
- JavaScript
- CSS画像・文字混在縦メニュー
画像と文字使った縦メニューを作成しています。 レイアウトがズレたり隙間ができたりでどうしてもうまくいきません。 どうぞお知恵をお貸しください。 よろしくお願いいたします。 【CSS】 @charset "utf-8"; /* CSS Document */ /* ナビ設定 */ #navi1 { margin: 0px; padding: 0px; position: relative; right: 10px; width: 200px; float: right; } #navi1 li { margin: 0px; padding: 0px; position: relative; width: 200px; float: right; } #navi1 #navi1_title { width: 200px; position: relative; } .sub_menu { width: 190px; position: relative; float: right; left: 5px; } .sub_menu ul { list-style: none; border-top: 1px solid #CCCCCC; width: 190px; position: relative; } .sub_menu li { border-bottom: 1px dashed #CCCCCC; background: #F3F0EA url(img/xx.jpg) no-repeat left center; width: 190px; } .sub_menu a { display: block; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 180px; /*Window IE5用の値を指定 */ color: #666; text-decoration: none; font-size: 11px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 10px; background-color: #F3F0EA; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; left: 3px; } .sub_menu a:hover { color: #666; width: 180px; background-color: #E4DECF; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; } 【HTML】 <div id="navi1"> <h2><img src="img/menu1_title.png" width="200" height="50" alt="qqq" /></h2> <ul> <li><img src="img/menu_y.png" width="200" height="32" alt="zzz" /></li> </ul> <ul class="sub_menu"> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> </ul> <ul> <li><a href="#"><img src="img/menu_a.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_b.jpg" width="200" height="32" alt=xxx" /></a></li> <li><a href="#"><img src="img/menu_c.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_d.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_e.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_f.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_g.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_h.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_i.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_j.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_k.jpg" width="200" height="32" alt="xxx" /></a></li> </ul> </div>
- ベストアンサー
- HTML
- ドロップダウンの残像
どなたか教えていただけないでしょうか。 ドロップダウンメニューを設置した所、一部のメニューで残像が残ります。 【css】 ul.menu { width: 960px; position: relative; list-style:none; float:left; margin:0; padding:0; text-align: left; } ul.menu * { margin:0; padding:0; } ul.menu a { display:block; color:#fff; text-decoration:none; font-weight: bold; } ul.menu li.a { position: relative; float:left; } ul.menu ul { position:absolute; top:50px; left: 4px; background: url(../images/navi/bg.png) repeat; display:none; opacity:0; list-style:none; border: 1px solid #ccc; } ul.menu ul li { position:relative; border-top:none; width:150px; margin:0; border-top: 1px solid #bad7dd; } ul.menu ul li a { display:block; padding:3px 7px 5px; background: url(../images/navi/bg.png) repeat; } ul.menu ul li a:hover { background-color:#c5c5c5; } ul.menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } ul.menu ul ul { left:160px; top:-1px; } ul.menu .menulink { width:160px; } ul.menu .topline { border-top:1px solid #aaa; } 【html】 <ul class="menu" id="menu"> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> </ul> png画像を使って背景透過をしています。 htmlとかcssは勉強中です…宜しくお願いします。
- ベストアンサー
- HTML
- <li>メニューの背景画像、IEだけ出ない
どうぞよろしくお願いします。 あれこれやったのですが、なぜかwin IE7でだけ（IE6は未確認） メニューの背景画像（グラデーションを使ったもの）が表示できません。 モダンブラウザとmacでは確認しました。 今日一日悩んでるのですが、どうしても分かりません。 【HTML】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="../css/01.css" rel="stylesheet" type="text/css"> </head> <body><div class="right">【ダミーテキスト】</div> <div id="menuarea"> <!--メニューエリア--> <ul id="menu"> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">あいうえお</a></li> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">かきくけこ</a></li> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">たちつてと</a></li> </ul> <ul id="bnr"> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> </ul> </div> <!--/メニューエリアここまで--> </body> </html> 【CSS】 .right { width:300px; float:right; border:1px solid red; } #menuarea { font-size:80%; width:168px; height:100%; } ul#menu { width:168px; margin-left:0px; padding-left:1em; padding-top:1em; padding-bottom:100px;/*メニュー下の余白*/ background:url(../common/menu-up.jpg)no-repeat;/*メニュー画像上部*/ } ul#bnr { width:168px; background:url(../common/menu-btm.jpg)no-repeat;/*メニュー画像下部*/ margin-left:0px; padding-left:0.7em; padding-bottom:10px; background-position:0 100%; }
- ベストアンサー
- HTML
- アメブロの新CSSで設置するダウンメニューについて
アメブロ新規IDへ引っ越しする際、 旧CSSのフリースペース、プラグインの内容を新CSSに 全てコピーして貼り付けてみたのですが マウスをメニューのところへ置いてもメニューが降りなくなってしまいました。 どのように記述すればいいかご教示ください。 ブログは今日引っ越しし始めたばかりなのでまだ 手つかずですがhttp://ameblo.jp/yuzu-oilです。 以下、CSS フリースペース フリープラグインの記述したものになります。 CSSは下部に /* その他、拡張があれば記述 */ #container{ margin:10px auto; width:800px; top:400px; left:20px; position: absolute; } ul.menu li{ float:left; width:200px; height:40px; background:url("http://stat.ameba.jp/user_images/20121030/17/yuzu-oil/fb/1d/g/t02000040_0200004012262011304.gif"); position:relative; } } ul.menu li a{ display:block; width:100%; height:100%; line-height:40px; text-indent:30px; font-weight:bold; color:#CFDFB5; text-decoration:none; position:relative; } ul.menu li a:hover{ background:url("http://stat.ameba.jp/user_images/20121030/17/yuzu-oil/d0/00/g/t02000040_0200004012262011303.gif"); } ul.sub{ display:none; } ul.sub li{ float:none; } ul.sub li ul.sub{ position:absolute; left:200px; top:0; } ul.menu{ zoom:1; } ul.menu:after { height:0; visibility:hidden; content:"."; display:block; clear:both; } フリースペースは （画像の部分はそれぞれ別のオリジナルフォント画像を入れるのに使います） <div id="container"><ul class="menu"><li><a href="#1"><img src="#1画像.png" align="left" width="200" height="40 "border="0"></a></li><li><a href="#2"><img src="#2画像" align="left" width="200" height="40 "border="0"></a><ul class="sub"><li><a href="#2-1"> ～～省略～～ </li></ul></li></ul></li></ul></div> フリープラグインは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>sample2</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.menu li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }); }); </script> にしてあります。 回答よろしくお願いいたします。
- 締切済み
- CSS
- CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
- IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）
こんにちは、質問させて下さい。 現在 li タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。 マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。 どうぞご回答お願いいたします。 以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。
- ベストアンサー
- HTML
- 画像を挿入して横並びのメニューリストを作ったのです
が、margin-top,margin-bottom(margin-leftはききます）がききません。何が原因でしょうか？ 以下がソースです。 ～html～ <ul id="menu"> <ul> <li>a href="#"><img src="〇〇.jpg"alt="〇〇" width="167" height"59"/></a></li> <li><a href="#"><img src="△△.jpg"alt="△△" width="167" height"59"/></a></li> 省略 </ul> ～css～ ul#menu {margin-left: 45px} ul#menu li {list-style-type: none; float: left} ul#menu li a {display: block; width: 181px} ul#menuのところに記述しましたが、変化ありませんでした。
- ベストアンサー
- CSS
- メニューバーが消えて困っています。
メニューバーの下に画像を挿入すると、メニューバーが消えてしまいます。 また文章を挿入しようとすると、メニューバーの下から文章が続かず、中盤からはじまってしまいます。 すいませんが原因がわかりません。下記にHTMLコード・CSSコードを記載したので、すいませんがわかる方がおりましたら、教えてください。 HTML；<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="test.css"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>What is HTML?</title> </head> <body> <div id="header-top"> <div id="menu1"> <ul id="down1"> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> </ul> </div> </div> <ul id="dropmenu"> <li><a href="#">Home</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">About US</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Buy</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Q&A</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> </ul> <p class="test">Hello</p> ← 問題の箇所、中盤から始まる。 CSS： /*As for header */ #header-top{ width: 100%; position: fixed; top: 0; left: 0; background: linear-gradient(90deg, #05a 10%, #21b3b2 90%); height: 60px; } } #header-in{ width: 997px; margin: 0 auto; } /*As for header top of website */ #menu1 ul{ margin-left: 1000px; margin-top: 10px; padding :0; list-style: none; } #menu1 li{ padding: 0; margin: 0; float: left; } #menu1 li a{ background: url(最初の画像のアドレス) no-repeat left center; padding: 2px 0px 3px 18px; color: #555; width: 100px; margin: 1px 0px; text-decoration: none; border-bottom: 1px dotted #666666; font-size: 18px; } #menu1 li a:hover{ background: url(入れ替わる画像のアドレス) no-repeat left center; } /* drop menuw */ #dropmenu{ list-style-type: none; width: 800px; height: 10px; margin: 30px auto 300px; padding: 0; background: #8a9b0f; border-bottom: 5px solid #535d09; border-radius: 3px 3px 0 0; } #dropmenu li{ position: relative; width: 20%; float: left; margin: 0; padding: 0; text-align: center; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; color: #fff; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; } #dropmenu li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #dropmenu li:last-child ul{ left: -100%; width: 100% } #dropmenu li ul li{ overflow: hidden; width: 200%; height: 0; color: #ff33ff; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; background: #ff33ff; text-align: left; font-size: 12px; font-weight: normal; } #dropmenu li:hover > a{ background: none; color: #ff33ff; } #dropmenu > li:hover > a{ border-radius: 3px 3px 0 0; } #dropmenu li:hover ul li{ overflow: visible; height: 38px; border-top: 1px solid #7c8c0e; border-bottom: 1px solid #616d0b; } #dropmenu li:hover ul li:first-child{ border-top: 0; } #dropmenu li:hover ul li:last-child{ border-bottom: 0; } #dropmenu li:hover ul li:last-child a{ border-radius: 0 0 3px 3px; } #top-pic{ } #test{ float: right; }
- ベストアンサー
- CSS
- HTML/CSSで配置の仕方がわかりません。
メニューバーの下に画像を挿入すると、メニューバーが消えてしまいます。 また文章を挿入しようとすると、メニューバーの下から文章が続かず、中盤からはじまってしまいます。 すいませんが原因がわかりません。下記にHTMLコード・CSSコードを記載したので、すいませんがわかる方がおりましたら、教えてください。 HTML；<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="test.css"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>What is HTML?</title> </head> <body> <div id="header-top"> <div id="menu1"> <ul id="down1"> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> </ul> </div> </div> <ul id="dropmenu"> <li><a href="#">Home</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">About US</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Buy</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Q&A</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> </ul> <p class="test">Hello</p> ← 問題の箇所、中盤から始まる。 CSS： /*As for header */ #header-top{ width: 100%; position: fixed; top: 0; left: 0; background: linear-gradient(90deg, #05a 10%, #21b3b2 90%); height: 60px; } } #header-in{ width: 997px; margin: 0 auto; } /*As for header top of website */ #menu1 ul{ margin-left: 1000px; margin-top: 10px; padding :0; list-style: none; } #menu1 li{ padding: 0; margin: 0; float: left; } #menu1 li a{ background: url(最初の画像のアドレス) no-repeat left center; padding: 2px 0px 3px 18px; color: #555; width: 100px; margin: 1px 0px; text-decoration: none; border-bottom: 1px dotted #666666; font-size: 18px; } #menu1 li a:hover{ background: url(入れ替わる画像のアドレス) no-repeat left center; } /* drop menuw */ #dropmenu{ list-style-type: none; width: 800px; height: 10px; margin: 30px auto 300px; padding: 0; background: #8a9b0f; border-bottom: 5px solid #535d09; border-radius: 3px 3px 0 0; } #dropmenu li{ position: relative; width: 20%; float: left; margin: 0; padding: 0; text-align: center; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; color: #fff; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; } #dropmenu li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #dropmenu li:last-child ul{ left: -100%; width: 100% } #dropmenu li ul li{ overflow: hidden; width: 200%; height: 0; color: #ff33ff; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; background: #ff33ff; text-align: left; font-size: 12px; font-weight: normal; } #dropmenu li:hover > a{ background: none; color: #ff33ff; } #dropmenu > li:hover > a{ border-radius: 3px 3px 0 0; } #dropmenu li:hover ul li{ overflow: visible; height: 38px; border-top: 1px solid #7c8c0e; border-bottom: 1px solid #616d0b; } #dropmenu li:hover ul li:first-child{ border-top: 0; } #dropmenu li:hover ul li:last-child{ border-bottom: 0; } #dropmenu li:hover ul li:last-child a{ border-radius: 0 0 3px 3px; } #top-pic{ } #test{ float: right; }
- ベストアンサー
- HTML
お礼
再度の回答ありがとございます。 帰ってから、何時間も試行錯誤を繰り返しました・・・ 。 何をやっても設置位置がおかしなところへ行ってしまったり 設置位置が思ってたところに行ったと思ったら、 ドロップダウンが機能してくれなかったりでしたが できました・・・。 フリープラグインやタグの意見はとても今回の件では 参考になりました。 本当にありがとうございます