- 締切済み
cssのみで折りたたみまたはプルダウン
javascriptを使わずに、IE６に対応させた 縦並びの「折りたたみ」または「プルダウン」メニューのようなものを、 いろいろやっても作れず、助けてください！ ソースは以下です <dl> <dt id="Name"><a href="#">おなまえ</a></dt> <dd id="Profile">プロフィールプロフィールプロフィールプロフィールプロフィールプロフィール</dd> <dt id="Name"><a href="#">おなまえ</a></dt> <dd id="Profile">プロフィールプロフィールプロフィールプロフィールプロフィールプロフィール</dd> <dt id="Name"><a href="#">おなまえ</a></dt> <dd id="Profile">プロフィールプロフィールプロフィールプロフィールプロフィールプロフィール</dd> </dl>
- myuaiturbo
- お礼率50% (6/12)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
CSSだけでやるためにはhtmlの構造的に:hoverのCSS2レベルに対応し、隣接セレクタが使える必要があります。 なので、IE7以上でないと無理です。
- singlecat
- ベストアンサー率33% (139/418)
▼これか参考になると思いますよ。
- 参考URL：
- http://www.cssmenumaker.com/
補足
ありがとうございます。 このサイトは、IE６ではドロップダウンしてくれないんです・・・
関連するQ&A
- Jqueryでのアコーディオン について
Jqueryでのアコーディオンのリンク について教えていただければ幸いです。 下記のアコーディオンを メニュー1をクリックするとリンク先に飛び さらに、アコーディオンが開くようにしたくて下記のアコーディオンを 作りましたが、 そのように、機能しませんでした。 全ての<a> タグにリンクを設定してみました。 ですが、 「サブメニュー」のリンクは機能するのですが 「メニュー1」等のリンクは機能しませんでした。 具体的には、リンク先に飛ばないまま、 アコーデイォンが開いてしまいます。 どうすれば、サンプル.html (dtタグ部分)をクリックするとリンク先に飛び さらに、アコーディオンが開くようになるのでしょうか？ もし、ご存じの方がいましたら力を貸していただければ幸いです。 よろしくお願いします。 $(function() { $('#accordion dd').hide(); $('#accordion dt a').click(function(){ $('#accordion dd').slideUp(); $(this).parent().next().slideDown(); return false; }); }); <dl id="accordion"> <dt><a href="サンプル.html">メニュー1</a></dt> <dd> <a href="#">サブメニュー1-1.html</a> <a href="#">サブメニュー1-2.html</a> </dd> <dt><<a href="サンプル.html"></dt> <dd> <a href="#">サブメニュー2-1.html</a> <a href="#">サブメニュー2-2.html</a> </dd> <dt><<a href="サンプル.html"></dt> <dd> <a href="#">サブメニュー3-1.html</a> <a href="#">サブメニュー3-2.html</a> </dd> </dl>
- 締切済み
- JavaScript
- プルダウンメニューについてです。
プルダウンメニューについてです。 http://javascript.eweb-design.com/0701_pdm.html こちらのサイトを参考につくっています。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID.style.visibility = "hidden"; else ID.style.visibility = "visible"; flag = !flag; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR> </BODY> </HTML> 説明がうまくできないのですが、、”メニューを表示する”をクリックしたときにドロップダウンメニューを開くと同時にページを開きたいと思っています。（”メニューを表示する”のページを作りたい。） どうしたらよいでしょうか?よろしくお願いします。
- ベストアンサー
- JavaScript
- cssとjavascriptでプルダウンメニュー
お世話になります。 いろいろとサンプルを試し、ハマっています・・・。どなたか助けてください！ 今下記のようなソースでメニューを作っています。 <ul id="globalnavi"> <li id="a"><a href="#">a</a></li> <li id="b"><a href="#">b</a> <ul id="subnav"> <li><a href="#">b-1</a></li> <li><a href="#">b-2</a></li> <li><a href="#">b-3</a></li> </ul> </li> <li id="c"><a href="#">c</a></li> </ul> このソースで、親階層のメニューは画像、submenuはテキストで表現したいのですが、FFやIE7、IE6、safariに使える方法でなにか簡単なものありましたら、教えていただきたいです。 よろしくお願い致します！
- 締切済み
- JavaScript
- CSSのみでプルダウンメニューを作りたい
CSSのみでプルダウンメニューを作りたい こんにちは。 WEB制作は全くの素人です。 CSSのみで下記のようなプルダウンメニューを作りたいのですが、 どうにもならず困っています。 http://c-brains.jp/blog/wsg/08/06/05-155929.php 現在使用中のCSS -------------------------------------- #header-menu { height: 23px; background-color: #333333; margin: 0px; padding: 8px 0 0 15px; background: url(img/head_menu_back.gif); background-repeat: repeat-x; text-align: left; width: auto; } #header-menu ul { text-align: left; margin: 0px; padding: 0px } #header-menu li { color: #ffffff; display: inline; padding-left: 13px; padding-right: 8px; background: url(img/l_icon.gif) no-repeat; background-position: left center; } #header-menu a { color: #ffffff; text-decoration: none; } #header-menu a:hover { color: #cccccc; } ------------------------------- 現在使用中のhtml -------------------------------- <div id="header-menu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="profile1.html">会社情報</a></li> <li><a href="service1.html">サービス</a></li> <li><a href="ethic1.html">企業理念</a></li> <li><a href="contact1.html">お問合わせ</a></li> <li><a href="job1.html">採用情報</a></li> <li><a href="indexeng.html">English</a></li> </ul> </div> ------------------------------------------------ 上記の各項目に追記しプルダウン式のリストにしたいです。 (カーソルを上にのせるとリストが開っく感じのものを希望します。） 恐れ入りますが、どなたかご教授いただきたくお願い致します。
- ベストアンサー
- ネットトラブル
- CSSのみでプルダウンメニューを作りたい
こんにちは。 WEB制作は全くの素人です。 CSSのみで下記のようなプルダウンメニューを作りたいのですが、 どうにもならず困っています。 http://c-brains.jp/blog/wsg/08/06/05-155929.php 現在使用中のCSS -------------------------------------- #header-menu { height: 23px; background-color: #333333; margin: 0px; padding: 8px 0 0 15px; background: url(img/head_menu_back.gif); background-repeat: repeat-x; text-align: left; width: auto; } #header-menu ul { text-align: left; margin: 0px; padding: 0px } #header-menu li { color: #ffffff; display: inline; padding-left: 13px; padding-right: 8px; background: url(img/l_icon.gif) no-repeat; background-position: left center; } #header-menu a { color: #ffffff; text-decoration: none; } #header-menu a:hover { color: #cccccc; } ------------------------------- 現在使用中のhtml -------------------------------- <div id="header-menu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="profile1.html">会社情報</a></li> <li><a href="service1.html">サービス</a></li> <li><a href="ethic1.html">企業理念</a></li> <li><a href="contact1.html">お問合わせ</a></li> <li><a href="job1.html">採用情報</a></li> <li><a href="indexeng.html">English</a></li> </ul> </div> ------------------------------------------------ 上記の各項目に追記しプルダウン式のリストにしたいです。 (カーソルを上にのせるとリストが開っく感じのものを希望します。） 恐れ入りますが、どなたかご教授いただきたくお願い致します。
- 締切済み
- レンタルサーバ・ASP
- cssの画像切り替え
宜しくお願いします。 cssでのhoverを使った画像の切り替えを教えてください。 ○html <dl id="dl"> <dt id="dt"><a href="#"><img src="img/image1.jpg" alt="" /></a></dt> <dd>あ</dd> </dl> ○css #dl { width: 170px; height: 170px; margin: 0; } #dt a { text-decoration: none; } #dt a:hover { background-image: url(img/image2.jpg); text-decoration: none; } というソースで、cssを使い画像を切り替えたいのですが、できません。 html指定で、<img src="～">で画像を表示させておき、 切り替える方法としましては、hoverを使いbackground-imageを使うしかないと思います。 background-imageからbackground-imageへの切り替えは、できるのですが、今回の場合は、どうしてもhtml指定で、<img src="～">からの切り替えを行いたいです。 そもそも、html指定の、<img src="～">で画像を表示する場合、cssで切り替えれるものなのでしょうか? 出来る限り、cssでの切り替えをしたいと考えています。 どなたか、分かる方お願いします。
- ベストアンサー
- HTML
- プルダウンメニューについて
ジャバスクリプトが全くの初心者です。 プルダウンメニューをつくりたくて http://javascript.eweb-design.com/0701_pdm.html こちらのサイトを参考につくっていますが、 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID.style.visibility = "hidden"; else ID.style.visibility = "visible"; flag = !flag; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR> </BODY> </HTML> とありますが、 ボタンが二箇所ある場合はジャバスクリプトの部分はどのように書けば良いでしょうか ？ <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag; flag = false; function pullDown() { if(flag) ID2.style.visibility = "hidden"; else ID2.style.visibility = "visible"; flag = !flag; } //--> （ＩＤの部分を変更しています。） こう書いてみましたがダメでした。 とても困っています、どなたか助けてください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 複数のプルダウンメニューの作り方。
質問内容に不備があったため再度質問させて頂きます。 前回答えて下さった方には大変ご迷惑をおかけします。 非常に多くのものを奇麗に見せたいのでプルダウンメニューがいいと思い、作りました。 ・Aリスト、Bリスト、Cリスト…とプルダウンメニュー（メニューを選ぶとアンカー先に飛ぶようにしたい）を複数含んだフォームを一つのhtmlに作ったのですが、動作しません。 一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。 とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。 今は、下記の状態になっています。 list.html <script language="JavaScript"> <!-- function MENU(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="list.html#a001">A001</option> <option value="list.html#a002">A002</option> <option value="list.html#a003">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="list.html#b001">A001</option> <option value="list.html#b002">A002</option> <option value="list.html#b003">A003</option> </select> </form> <a id="a001" name="a001"></a>A001<br> <a id="a001" name="a002"></a>A002<br> <a id="a001" name="a003"></a>A003<br> <a id="a001" name="b001"></a>B001<br> <a id="a001" name="b002"></a>B002<br> <a id="a001" name="b003"></a>B003<br> あと、このように同じhtml内でのリンクになる場合は、optionのvalueのlist.htmlを省いてもいいのでしょうか？ 当方、Javascriptに関してはコピペでしか使えない程度の知識の人間です。 ご指南の程宜しくお願いします。
- ベストアンサー
- JavaScript
- cssでプルダウンを追加したい♪
ウェブサイト作成で質問がございます。 http://www.sl-success.com/hallo-casino/ 上記のサイトの上部のメニューバーにプルダウンできるメニュー項目を追加したいのですが、cssを追加修正しましたら、レイアウトが崩れてしまい、うまく修正できません。 プルダウンを追加したいソース部分は以下のところです。 <tr> <td align="center" valign="top"><div id="menu"><a href="index.html" class="frist active">HOME</a><a href="review.html">casino bonus guide</a><a href="top10/top10index.html">Online Casino TOP10</a><a href="#">free casino games</a><a href="top.html">gaming guides</a><a href="contact/contact-index.html" class="last">Contact Us</a></div></td> </tr> CSSは以下のように設定しております。 #menu{ background:#1D3C55; border-bottom:#345065 1px solid;} #menu a{ color:#E9F1F9; text-transform:uppercase; border-left:#001F39 1px solid; border-right:#345065 1px solid; padding:20px 25px 14px 25px; line-height:42px; } #menu a:hover, #menu a.active{ background:#001F39; color:#E9F1F9; } #menu a.frist{ border-left:none;} #menu a.last{ border-right:none;} CSSあるいは、JAVAを使ってどのように修正をつければ宜しいか是非、ご教授お願いします。 下のURLにhtmlとcssのファイルをアップしております。 http://www.sl-success.com/hallo-casino/ask.rar
- 締切済み
- HTML
- プルダウンとチェックボックスの連動
はじめましてよろしくおねがいします。 やりたいことはプルダウンのメニューの中身を活性したり非活性に したいのですが、どのようにやるのか想像がつきません。 以下にソースを貼り付けました。 チェックボックスにチェックされた場合はメニューの中身の■Yahoo!をリンクさせない様にしたいです。 チェックが外れたときはメニューの中身はすべてリンクで表示します。 現状はすべてリンクしかできていないです。 チェックボックスとの連動の方法、メニューの中の非活性の方法を教えてください。よろしくおねがいします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID.style.visibility = "hidden"; else ID.style.visibility = "visible"; flag = !flag; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR><BR><BR> <FORM> <INPUT TYPE ="checkbox">ここにチェックを入れるとプルダウンの■Yahoo!のみ非活性にしたい。 </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
お礼
ありがとうございます！ すっきりしました。