- 締切済み
menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- 4017B
- ベストアンサー率73% (1335/1813)
こんな感じで。ナビメニュー用の<div>や<ul>を動的に横幅変化させるとなるとJavascript使うしか無いので、z-indexと組み合わせて処理します。要は見た目上でそう見えれば良いだけなので。 ━ HTML記述例 ━━━━━ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>TEST</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="menu-top"><ul class="my-menu"><li>TOP-01</li><li>TOP-02</li><li>TOP-03</li><li>TOP-04</li></ul></div> <div class="main"> <p>画面表示サイズが 425px 以下になった場合、動的に表示が変化します。</p> <p>動的に <div> などの表示位置を変化させるい場合、{float:left;} などよりも {position:relative;top:0;left:0;} で指定した方が確実で安定します。</p> <p>(max-width:425px) だと以下、(min-width:425px) だと以上で変化します。</p> </div> <div class="menu-sub"><ul class="my-menu"><li>SUB-01</li><li>SUB-02</li></ul></div> <footer class="footer"> <address>foo@example.com</address> </footer> </body> </html> ━ CSS記述例(style.css) ━━━━━ @charset "UTF-8"; body { margin: 0 auto; color: #111; background-color: #fff; font-size: 14px; } div { margin: 0; padding: 0; } .main { width: calc(100% - 22px); margin: 4em 1.5em 2em 1.5em; position: relative; top: 0; left: 0; } .menu-top { width: 100%; height: 2.5em; background-color: #ccc; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 1; } .menu-sub { width: 240px; height: 2.5em; background-color: #999; overflow: hidden; position: absolute; top: 0; right: 0; z-index: 2; } .footer { width: calc(100% - 16px); height: 99px; margin: 0 0 8px 0; padding: 8px; border-top: 2px solid #333; position: relative; buttom: 0; left: 0; } .menu-top ul, .menu-sub ul { margin: 0; padding: 0; } .menu-top li, .menu-sub li { margin: 0; padding: .7em .5em 0 .5em; display: inline-block; line-height: 100%; list-style: none; overflow: hidden; } @media screen and (max-width: 425px) { .menu-sub { width: 100%; position: relative; buttom: 0; left: 0; } }
- AsarKingChang
- ベストアンサー率46% (3467/7474)
見た感じ、すでに階層構造が違う気がします。 PCは、(2)の1直線で、 SPが、(1)を2つに分けたデザインなので、 一つのコードでは無理があると思われます。 また、SPで、下のバーを下に固定している（これをFooterという）として 一番上のバー（Headerという）を分離していることから この場合は、メディアクエリを使って <div id="pc">PC専用のレイアウト</div> <div id="sp">SP専用のレイアウト</div> とHTMLを2層にしたほうが思った通りのレイアウトになると思います。 もちろん、どちらかは、display:none;になります。 後は、メディアクエリでSPとみなす解像度とPCとみなす解像度を 入力して、レスポンシブ化完成という具合に。 では、どうでしょうか？
お礼
ご返答ありがとうございます。 今は <div id="pc">PC専用のレイアウト</div> <div id="sp">SP専用のレイアウト</div> メディアクエリでdisplay:none;を使用するといった形です。 何故かiPadでメニュー辺りをスワイプするとメニューが重ねたように出現してしまいます。 なので、上記のようなものはできいかと思った次第です。
お礼
ご返答ありがとうございます。 アマナ社のイメージがピッタリでしたので、参考にしました。 https://amana.jp/ サイドメニュー <ul id="hdSide" > ＃hdSide { position: fixed; bottom: 0; left: 0; } を追加することでできました。