- ベストアンサー
ナビゲーションバーのポップアップについて
日本ユニセフ協会のページにあるナビゲーションバーには、ポップアップ機能が付いていますが、どのようにしたらできるのでしょうか？ UL.LIタグをCSSで加工している思うですが....。 サンプルなど詳しい情報がありましたらご指導お願い致します。 http://www.unicef.or.jp/
- ma1090ma
- お礼率33% (2/6)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ご参考 ドロップダウンメニューを作ろう http://allabout.co.jp/internet/hpcreate/closeup/CU20030917A/index.htm http://allabout.co.jp/internet/hpcreate/closeup/CU20030919A/index.htm マウスポインタが乗った時、リンク先を表示するメニュー http://www.wsb.jp/hpb/java_s/layer/ev00.htm ナビゲーションメニュー http://surviveplus.net/documents/javascript2/index.php AnyLink Drop Down Menu http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
関連するQ&A
- jqueryを使ってポップアップを作ろうとしています。
jqueryを使ってポップアップを作ろうとしています。 アイコンにマウスオーバーでポップアップ表示、ポップアップの×をクリックしてポップアップ削除という動きまではできています。 しかしマウスオーバーのアイコンはul liの中にあるのに、ポップアップはulの外に置かれているため、thisが使えず、アイコンにマウスオーバーすると全てのポップアップが表示されてしまいます。 これをマスウオーバーしたアイコンのポップアップのみ表示できるようにしたいです。 下記にソースになります。表示させたいのはアイコン02にカーソルを合わせた場合のみになります。 よろしくお願いいたします。 JS ---------------------------------------------------------------- $(function(){ $(".popup").hide(); $(".box ul li.icon02").mouseover(function(){ $(".popup").fadeIn("fast").css({ top:10+"px", left:-95+"px"}); }); $(".popup img.closed").click(function(){ $(".popup").fadeOut("fast"); }); }); html ---------------------------------------------------------------- <div class="box"> <div class="boxIn"> <ul> <li class="ico01"><a href="#"><img src="アイコン１url" /></a></li> <li class="ico02"><a href="#"><img src="アイコン２url" /></a></li> <li class="ico03"><a href="#"><img src="アイコン３url" /></a></li> </ul> <!--▼pop-up部分--> <div class="popup"> <p>●●<img src="クローズボタンurl" alt="close" width="12" height="12" class="closed" /> </p> <div class="popInner"> <p>ポップアップの中身</p> <!--#popInner--> </div> <!--#popup--> </div> <!--▲pop-up部分ここまで--> <!--#boxIn--> </div> <!--#box--> </div> 以下 <div class="box"> ～～同じ構成要素の繰り返し。
- ベストアンサー
- JavaScript
- ナビゲーションバーを端まで伸ばす方法
Webサイトのヘッダにあるナビゲーションバーのデザインに関する質問です。 ulタグでコンテンツを箇条書きにしたあと、CSSで横書きに変更して、borderで文字の上下左右に線を引くという方法でナビゲーションバーを作成していますが、この方法だと ┌─┬─┬─┐ │あ│い│う│ └─┴─┴─┘ （AAで上手く表現できているか分かりませんが） のように、バーの線がページの端まで届かず、ページの中央で浮いた状態になってしまいます。 http://award.sendenkaigi.com/ http://www13.koko-dake.jp/ 一方、上記のページを見ると ──┬─┬─┬─┬── │あ│い│う│ ──┴─┴─┴─┴── のように、バーの線が端まで伸びています。 こうしたバーを作成するにはどのようにCSSを書けばよいのでしょうか。
- 締切済み
- CSS
- CSSでポップアップメニューを作成したがIEだけメニューが表示されません。
下記のようなCSSでポップアップメニューを作成したのですが IEだけポップアップメニューが表示されませんでした。 IEでもポップアップメニューが表示されるようにするには どのようにすればよいのでしょうか？（JavaScriptは未使用で作成） <html> <head> <style type="text/css"> #menu { position: relative; width: 102px; height: 22px; } #menu li { list-style-type: none; float: left; } #menu li a { color: gray; width: 100px; height:20px; text-decoration: none; text-align: center; border: 1px solid gray; display: block; } #menu li a:hover { background-color:#FFFFCC; } #menu ul li ul { display: none; } #menu ul li:hover ul { display:block; position:absolute; top: 22px; left: 0; } </style> </head> <body> <div id="menu"> <ul> <li> <a href="#">home</a> <ul> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> </ul> </li> </ul> </div> </body> </html>
- ベストアンサー
- HTML
- CSSでポップアップしたけど変な場所でポップ？
CSSに詳しい方！！ どうかお助けください！ 不動産サイトの沿線の地図から駅名の上でボタンでポップアップするようにコーディングしました。 ・・・が本来駅名の上だけでポップアップするはずなので変な場所でもポップアップしてしまいます・・・！ 地図の右上らへん・・・ （駅名の上にテキストで駅名が出てるのはバグではなく故意です。） 誰かアドバイスいただけないでしょうか・・？！ どうぞよろしくお願いします。 ちなみにスタイルシートは以下のコードです。 ■■css■■■■■■■■■■■■■■■■■■■■■■■■■■■ /* navi-start 共通 ----------------------------------- */ #navi00 { width:570px; height:400px; background:url(../img/rosen04.jpg); position:relative; } /* いったんコメントアウト --------------------- #navi00 strong { text-indent:-9999px; visibility:hidden; font-size:0.1em; line-height:0; } /*----ナビ・ボタンごとの設定----*/ /* 01 本町-------------------------------------------------*/ #navi00 ul li.n_01 span { position:absolute; top:190px; left:204px; display:block; height:31px; width:101px; } #navi00 ul li.n_01_on span { position:absolute; top:190px; left:204px; display:block; height:31px; width:101px; } #navi00 li.n_01_on ul.sub { position:absolute; width:120px; top:165px; left:140px; z-index:10; background:none; } #navi00 li.n_01 ul.sub { display:none; } ///* 座標違いで02～06まで続きます。 /*----プルダウンの設定----*/ #navi00 ul li ul.sub li a { background:url(../img/bu_pop.jpg) no-repeat; filter:alpha(opacity=90); height:30px; padding:10px 0 0 10px; width:110px; display:block; z-index:10; color:#333; text-align:left; text-indent:1em; font-size:14px; font-weight:bold; font-family:"ヒラギノ角ゴ Pro W3" , "ＭＳ Ｐゴシック", Osaka; } head + body #navi00 ul li ul.sub li a { height:30px; } #navi00 ul li ul.sub li a:hover { background:url(../img/bu_pop_r.jpg) no-repeat; }
- ベストアンサー
- HTML
- リスト（ul / li）タグの左インデントの解除
HTML、CSSの初心者です。 リスト（ul / li）タグの左インデントの解除の仕方がわかりません。 IE系とMozila系でインデント解除の方法を教えていただけないでしょうか。 ◆現在の書き方 ----------------- ・HTML <ul id="navi"> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> </ul> ----- ・CSS #navi ul {list-style: none; margin: 0; padding: 0;} #navi li {list-style: none; float: left; margin: 0; padding: 0;} ----------------- よろしくお願いいたします。
- 締切済み
- HTML
- iPhoneでのナビゲーションバーの挙動について
Twitter Bootstrap(version2.2.2)を使いホームページの作成をしようとしています。プログレッシブデザインにしてPCとスマホで表示させたいです。 ナビゲーションバーでドロップダウンメニューを使いたいのですが、PCでは思うどうりに、ドロップダウンメニューのリンクがクリックできるのですが、iPhone(iOS6.0.2)ではクリックしようとするとドロップダウンではなく（そのメニューは消え）表示上ではその下のナビゲーションバー自体をクリックしてしまいます。どのように改善したら良いのでしょうか？ HTMLは以下のようなものです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>TEST SITE</title> <link href="./css/bootstrap.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./css/bootstrap-responsive.css" rel="stylesheet"> </head> <body style="padding-top:20px"> <div class="container"> <div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> NAVIGATION-BAR01 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="http://www.example.com/">DROP1-1</a></li> <li><a href="http://www.example.com/">DROP1-2</a></li> <li class="divider"></li> <li><a href="http://www.example.com/">DROP1-3</a></li> <li><a href="http://www.example.com/">DROP1-4</a></li> </ul> </li> </ul> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> NAVIGATION-BAR02 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="http://www.example.com/">DROP2-1</a></li> <li><a href="http://www.example.com/">DROP2-2</a></li> <li class="divider"></li> <li><a href="http://www.example.com/">DROP2-3</a></li> <li><a href="http://www.example.com/">DROP2-4</a></li> </ul> </li> </ul> </div> </div> </div> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="./js/bootstrap.min.js"></script> </body> </html>
- 締切済み
- CSS
- ナビゲーションバーの背景画像が表示されません（CSS）
私は今ホームページを作っておりまして、 先日ウェブデザインについての本を買ったのですがそこに書かれていた スタイルシートの記述例（ナビゲーションバーです）をまねて 自分で記述してみたのですが思うように表示できません。 どなたか教えてください。 ◆問題の部分です◆ スタイルシート div#navi{ width:900px; margin-bottom:7px; padding-bottom:7px;} ul ,li{ margin:0; padding:0; } ul#navbar{ list-style-type:none; width:900px; float:right; } ul#navbar li, ul#navbar li a{ float:left; text-indent:-9999px; display:block; width:100px; height:25px;} ul#navbar li#link a{ background:url(image/menu-kyousitu.png) no-repeat left top; float:right;} 以下同じ様にメニューが続き ul#navber li#sample1{background:url(image/menu-a5.png) no-repeat left top; float:right;} ↑最後のsampleの部分はリンクを張らないようにしたいのでこのように記述したところ、この部分には背景画像が表示されません。 HTML <div id="navi"> <ul id="navbar"> <li id="link"><a href="＊＊">リンク集</a></li> <li id="sample1">sample</li> </div> 見苦しい分で申し訳ありませんが、どなたかよろしくお願いします。
- ベストアンサー
- CSS
- ポップアップウィンドウをスクロールできるようにする方法
Dreamweaver8を使用しています。 ポップアップウィンドウに表示されるデータがウィンドウ画面より長いので、スクロールして最後まで読む必要があるのですが、スクロールができません。 スクロールバーも出ません。 どうすればポップアップ画面をスクロールできるようになるか教えて下さい。 ちなみに、下記のようになっています。画像をクリックするとポップアップ画面が出現するようになっています。 <ul class="specification"><li class="specification01"><a href="toroidalcoil.html" onClick="Open_popup1();" target="popup_win01"><img src="img/toroidalcoil.gif" alt="トロイダルコイル" width="128" border="0"></a></li></ul> 出現するポップアップウィンドウのサイズ（幅）も指定できる方法があれば教えて頂けると助かります。 宜しくお願いします！
- ベストアンサー
- ホームページ作成ソフト
- Dreamweaver2004でリストを利用してナビゲーションバーを作成しようとしていますがclass属性のつけかたが分かりません
初めてdreamweaverでweb制作を試みているビギナーです。Dreamweaver2004でリストを横に並べる形でナビゲーションバーを作成しようとしているのですが、どのように"ul"と"li"にclass属性を与えればよいのか分かりません。divタグではなく、<ul class="navi">というようにするには、Dreamweaver2004でどのように操作をすればよいのでしょうか？ ためしに直接タグ打ちをしてみたら、エラーが起きました（> <) 書籍でもネットでも出てこず、独学なので周りに聞く人もいなくてとても困っています。初歩的な質問でしたら恐縮ですがどうぞよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- css 横並びのナビゲーションバーを二段にする場合
CSSでデザインしてるのですが・・・。 ナビゲーションバーで横並びに４項目。 ここまでは出来るのですが、この４項目を ２段にして、８項目にするには、どのように書くのがスマートでしょうか。 テーブルにしたほうが早そうな気もしますが、 表かといいうと、違う気もします。 ulでリスト表示の途中で改行させる方法があるのか、 マークアップが適切とはいえないけれど、 リストが二つあることにして、ulを二つにするか、 などと考えています。 初心者でよくわかっていないのですが、 皆様はどのようにしたら良いと思われますか？ よろしくお願いします。
- ベストアンサー
- HTML
