• 締切済み

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
  • 回答数1
  • ありがとう数2

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

なぜそのような複雑なHTMLになるのでしょう。 単純に <nav> 　<ol> 　　<li><a href=""></a></li> 　　<li><a href=""></a> 　　　<ol> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ol> 　　</li> 略 　で良いです。

Woertet
質問者

お礼

回答有難う御座いました。 自分ではどうしてもBootstrapを使いたいために回答してくださった仕方ではサイトの目的を達成できないため（これは自分の実力がないせいでもありますが）残念ですが利用いたしませんでした。 質問した後に自力で検索を続けたら下のサイトで古いBootstrapのバージョン(2.1.0)ながら解決の方法があり（Bootstrapのバグのようでした）、最新のBootstrapのJavascriptと見比べ修正したら思うような動作になりました。 同じ様なことで困っている方がいらっしゃったら参考にしてください。 https://github.com/twitter/bootstrap/issues/4756 このコメントの　tkawa さんの回答で解決できました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • wordpressの個別投稿ページのリンク

    解説書を読みながらwordpressを使ってホームページの作成をしているのですが、 CSSフレームワークの種類などで躓いて、 ある部分は本のコード、ある部分は解説サイトのコードを貼り付けて進めていたのですが、 個別投稿ページの項でわからなくなってしまいました。 サイトのトップページから個別投稿ページにはどこをクリックすれば辿り着けるのでしょうか。 ↓header.phpの内容です <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; --> <title>たいとる</title> <nav class="navbar navbar-inverse navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><?php bloginfo('name'); ?></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="/news">お知らせ</a></li> <li><a href="#">記事一覧</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <?php wp_head(); ?> </head> ↓front-page.phpの一部です。 <header> <section id="news"> <?php $news = get_posts('posts_per_page=1'); ?> <?php foreach($news as $post): ?> <?php setup_postdata($post); ?> <a href="<?php the_permalink(); ?>"> <div class="alert_box"> <p><?php the_title(); ?> - <?php the_date(); ?></p> </div> </a> <?php endforeach; ?> <?php wp_reset_postdata(); ?> </section> </header> 直感的にはsingle.phpは「/var/www/html/wordpress/wp-content/themes/sample」内にあるので 「」内のリンクがコード内に有るような気がするのですが、どこにも見当たりません。 single.phpにアクセスするためにはトップページ内のまたはトップページコード内のどの記述からアクセスできるのでしょうか。 読みづらくてすみません。よろしくお願いします。

    • ベストアンサー
    • PHP
  • luxbarの表示について3

    Proof4さん回答ありがとうございます。お陰様で改善できました。 申し訳ないのですがあと数点教えてください。 1.luxbarの上部にヘッダー用のlogo画像等設置用のスペースの開けたいのですが可能でしょうか？試しに<br>でスペースを開けてみたのですが不可でした。もしもスペースが確保できた場合のスマホ用の大きさになった場合、ハンバーガーメニューは右上に表示しているのでしょうか？ 2.配色を試しに#91D0CDで行ってみましたが色は変わりませんでした。 3.全てのメニューに多階層を設置したいのですが、メニュー一番初めの 　<li class="luxbar-item active"><a href="#">Home</a></li>を 　<li class="luxbar-item dropdown"><a href="#">Home</a></li> にすると問題があるのでしょうか？ 4.https://okwave.jp/qa/q9621783.htmlにFlexboxのレシポンシブCSSで困って質問しています。かなりお詳しそうなので是非教えて頂けないでしょうか？ 初心者なものですから多数質問して申し訳ないのですが宜しくお願い致します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css"> <style> <!-- .luxbar-navigation{ justify-content: flex-start; } .dropdown >ul{ display: none; } /******* カスタムの色設定 *******/ .luxbar-menu-custom, .luxbar-menu-custom .dropdown ul{ background-color: #91D0CD; /* 背景色 */ color: #fff; /* 文字色 */ } .luxbar-menu-custom .active, .luxbar-menu-custom .luxbar-item:hover{ background-color: #91D0CD; /* アクティブなメニューとhover時の色 */ } .luxbar-menu-custom .luxbar-hamburger span, .luxbar-menu-custom .luxbar-hamburger span::before, .luxbar-menu-custom .luxbar-hamburger span::after { background-color: #91D0CD; /* ハンバーガーメニューの色 */ } --> </style> </head> <body> <br> <br> <br> <br> <div class="luxbar luxbar-static"> <input type="checkbox" id="luxbar-checkbox" class="luxbar-checkbox"> <div class="luxbar-menu luxbar-menu-right luxbar-menu-dark"> <ul class="luxbar-navigation"> <li class="luxbar-header"> <a class="luxbar-brand" href="#">Brand</a> <label class="luxbar-hamburger luxbar-hamburger-doublespin" for="luxbar-checkbox"> <span></span> </label> </li> <li class="luxbar-item dropdown"><a href="#">Home</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> <li class="luxbar-item dropdown"><a href="#">Users</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> <li class="luxbar-item dropdown"><a href="#">HomeHome</a> <ul> <li class="luxbar-item" ><a href="#">MaxMaxMax</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">JohnMax</a></li> </ul> </li> <li class="luxbar-item dropdown"><a href="#">HomeHomeHome</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">EdgarMax</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> </ul> </div> </div> </body> </html>

  • 複数トリガーで動作するアコーディオンメニュー

    お世話になります。 シングルページでページ内リンクでコンテンツ移動するタイプのページ作成を現在やっているのですが、急に標題の内容の要望が急ぎ対応として来まして、困っております。 具体的に言うと、 通常アコーディオンメニューは、 隠してある部分の見出しなんかをトリガーにして、開閉して内容を表示・非表示させると思いますが、今回要望としてあるのは、 グローバルナビもそのトリガーにしたいということです。 グローバルナビをクリックすると、該当箇所に移動しつつ、普段見出しだけで内容が隠してあるものも展開されるということができればと思っております。 参考までにコードを記載しておきます。 js部分 //accordion $('#sub01 h4').click(function() { $(this).toggleClass("open").next("div").slideToggle(); }).next().hide(); // drop down $("#nav li.drop").hover(function() { $(this).children('ul').show(); }, function() { $(this).children('ul').hide(); }); }); <div id="nav"> <ul class="clear"> <li><a href="#menu1">メニュー１</a></li> <li class="drop"><a href="#menu2">メニュー２<span>▼</span></a> <!-- InstanceBeginEditable name="planList" --> <ul> <li><a href="#sub01">サブ1</a></li> <li><a href="#sub02">サブ2</a></li> </ul> <!-- InstanceEndEditable --> </li> <li><a href="#menu3">メニュー3</a></li> <li><a href="#menu4">メニュー4</a></li> </ul> </div> ------省略-------------- <div id="sub01" class="subcontent"> <h4><span>項目名</small></span></h4> <div class="sub01Inner clear"> 内容内容内容</div><!-- /planInner --> </div><!-- /planBox -->

  • jQueryスライドメニューの初歩的な質問です

    以下のスライドメニューは、それぞれブロック要素で構成されていて、リンク文字や余白をクリックするとスライドトグルで開閉が行われます（htmlファイルにコピーすれば動作すると思います）。 ひとまずイメージ通りに完成したのですが、1つ困ったことがあります。それはリンク文字をクリックしたときにトグルが実行されてしまうことです。ページ遷移する間にメニューが一度開閉してしまうので見た目にあまりスマートではありません。 それを修正するためいろいろ試行錯誤したのですが、どうやってもわからなかったので質問いたしました。リンク文字をクリックしたときは、ページ遷移のみでトグルを実行しないようにするにはどのように書けばよいのでしょうか？ また、このソースはjQueryを1.7.2以上にすると動作しなくなってしまいます。この原因が分かる方がいらしたらぜひお教えください。 どうぞよろしくお願いいたします。 <!----------------------------------> <script type='text/javascript' src='http://www.google.com/jsapi'></script> <script type='text/javascript'>google.load('jquery', '1.7.1')</script> <script type='text/javascript'> <!-- $(function(){ $('span.tree_a').click(function() { $(this).next().slideToggle(); }).next().hide(); }); //--> </script> <!----------------------------------> <style type="text/css"> span.tree_a{ width: 100%; display: block; } </style> <!----------------------------------> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー1</a></span> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー1</a></span> <ul> <li><a href='http://www.google.co.jp/'>孫メニュー1</a></li> </ul> </li> </ul> </li> <li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー2</a></span> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー2</a></span> <ul> <li><a href='http://www.google.co.jp/'>孫メニュー2</a></li> </ul> </li> </ul> </li> </ul> <!---------------------------------->

  • luxbarのIE表示について

    HP作成でハンバガーメニューの作成が難しく、ネットで探していたらluxbarが便利そうでした。早速作成して色々なブラウザで検証してみたのですがIEのみ表示が上手くできません非対応なのでしょうか？ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css"> </head> <body> <div class="luxbar luxbar-static"> <input type="checkbox" id="luxbar-checkbox" class="luxbar-checkbox"> <div class="luxbar-menu luxbar-menu-right luxbar-menu-dark"> <ul class="luxbar-navigation"> <li class="luxbar-header"> <a class="luxbar-brand" href="#">Brand</a> <label class="luxbar-hamburger luxbar-hamburger-doublespin" for="luxbar-checkbox"> <span></span> </label> </li> <li class="luxbar-item active"><a href="#">Home</a></li> <li class="luxbar-item dropdown"><a href="#">Users</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> </ul> </div> </div> </body>

  • luxbarの表示について2

    luxbarについて再度お聞きしたいです。 .luxbar-navigation{ justify-content: flex-start; } でIE11でもうまく表示されましたが、どのブラウザもハンバーガーメニューにした時、階層下メニューは開いたままでした。これを閉じた状態から開くように修正できないのでしょうか？また、ナビバー時の背景色は任意で好みの色に変更できないでしょうか？よろしくお願いいたします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css"> <style> <!-- .luxbar-navigation{ justify-content: flex-start; } --> </style> </head> <body> <div class="luxbar luxbar-static"> <input type="checkbox" id="luxbar-checkbox" class="luxbar-checkbox"> <div class="luxbar-menu luxbar-menu-right luxbar-menu-dark"> <ul class="luxbar-navigation"> <li class="luxbar-header"> <a class="luxbar-brand" href="#">Brand</a> <label class="luxbar-hamburger luxbar-hamburger-doublespin" for="luxbar-checkbox"> <span></span> </label> </li> <li class="luxbar-item active"><a href="#">Home</a></li> <li class="luxbar-item dropdown"><a href="#">Users</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> </ul> </div> </div> </body>

  • CSSについて初歩的ですがわかりません

    こんにちは。ＣＳＳＰＬＡＹと言うサイトでCSSをＤＬしたのですが、 手を加えて、ページとして成り立つようにしたいのですが、 なぜか形が崩れてしまいました。自分じゃ何がおかしいかさっぱりわからないので、 どなたか、詳しい方指摘してもらえませんか？ 参考ＵＲＬ＝http://www.cssplay.co.uk/menus/pro_drop13.html <html lang="ja"><head> <meta http-equiv="content-style-type" content="text/css"> <link rel=stylesheet type="text/css" href="1.css"> <style> body {text-align:center;} .end {clear:both;} .box {width:85%; margin:0 auto 0 auto; text-align:center;} .main {width:80%; float:left;} .side {width:20%; float:left;} .top {width:80%; margin:0 auto 0 auto; text-align:center;} .top1 {width:20%; float:left;} .top2 {width:80%; float:left;} </style> </head> <body><div class="box"> <div class="top"> <div class="top1"> トップ </div> <div class="top2"> <div> <span class="preload1"></span> <span class="preload2"></span> <ul class="prodrop4"> <li class="top"><a href="./index.html" id="home" class="top_link"><span>Home</span></a></li> <li class="top"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span>Sales</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub1"> <li><a href="../menu/" class="fly">Digital SLR Cameras</a></li> <li><a href="../boxes/">Interchangeable Lenses</a></li> <li><a href="../mozilla/">Flash Guns and Accessories</a></li> <li><a href="../ie/">Professional Tripods</a></li> <li><a href="../opacity/">Filters &amp; Lens Hoods</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul></div> </div><div class="end"></div> </div> <div class="side"> サイド </div><!-- サイドここまで --> <div class="main"> メイン </div><!-- メインここまで --> <div class="end"></div> </div></body> </html> 文字制限で入りきらないので、メニューのほうは参考URLからみてください・・・ すいません

  • ドロップダウンメニューについて

    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>

  • クリックで表示、非表示するメガメニュー

    クリックで表示して再度クリックすると非表示になるメガメニューを作ろうと思ってます。 下記のページを参考にjQueryでマウスオーバーによるメガメニューは作成しました。 http://www.skuare.net/test/jmegadropdown.html ただ、jQueryどころかjavascriptも昔少しやった程度しか知識がありませんので、ソースはほぼ上記のページと同じです。 これをクリックでメニュー表示して、再クリックで非表示にするにはどうしたらよいでしょうか？ 具体的にはマイクロソフトのページの上にあるようなメニューです。 http://www.microsoft.com/ja-jp/default.aspx 自分の今の知識でjavascriptを使って書いたコードは下記のとおりです。 このように書いていけば出来るとは思うのですが、もっと効率よく出来る方法はあるでしょうか？ よろしくお願いします。 function test1() { $("#topnav li .products1 .sub").toggle(); $("#topnav li .sale1 .sub").css("display", "none"); } function test2() { $("#topnav li .products1 .sub").css("display", "none"); $("#topnav li .sale1 .sub").toggle(); } <ul id="topnav"> <li> <a href="#" class="products" onclick="test1()">Products</a> <div class="products1"> <div style="opacity: 0; display: none; width: 600px;" class="sub"> <ul> <li><h2><a href="#">menu1</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> <ul> <li><h2><a href="#">menu2</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> </div> </div> </li> <li> <a href="#" class="sale" onclick="test2()">Sale</a> <div class="sale1"> <div style="opacity: 0; display: none; width: 450px;" class="sub"> <ul> <li><h2><a href="#">menu</a></h2></li> <li><a href="#">Link - 1</a></li> <li><a href="#">Link - 2</a></li> <li><a href="#">Link - 3</a></li> <li><a href="#">Link - 4</a></li> </ul> </div> </div> </li>

  • cssで背景を重ねることができるのでしょうか？

    CSSでナビゲーションバーを作っていますが、ナビゲーションバーのボタンの一つ一つを背景画像であらわしています。ナビゲーションバー全体の背景にまた違う画像を表示させたい（ボタンが途切れた後ろにも画像があるように）のですが、そういうことは可能なのでしょうか？ちなみにＨＴＭＬは <body> <div id="navigation"> <div> <ul> <li class="linkhome"><a href="/"><span>Home</span></a></li> <li class="linkkaisha"><a href="/"><span>kaisha</span></a></li> <li class="linkdoituriq"><a href="/"><span>doituriq</span></a></li> <li class="linkwine"><a href="/"><span>wine</span></a></li> <li class="linkchugoku"><a href="/"><span>chugoku</span></a></li> <li class="linkotoiawase"><a href="/"><span>otoiawase</span></a></li> </ul> </div> </div> </body> </html> という感じで、最初のdivにz-index2を次のdivにz-index1を指定したらできると思ったのですが、表示はナビゲーションバーの後ろに表示させたい画像がまず表示され、その下にナビゲーションバーが表示されます。 重ねて表示するのはどうすればいいのでしょうか？ 質問が分かりづらくて申し訳ございません。どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する