こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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;
}

投稿日時 - 2019-04-14 09:20:33

QNo.9606569

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

こんな感じで。ナビメニュー用の<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;
}
}

投稿日時 - 2019-04-14 22:12:40

お礼

ご返答ありがとうございます。
アマナ社のイメージがピッタリでしたので、参考にしました。
https://amana.jp/
サイドメニュー
<ul id="hdSide" >
#hdSide {
position: fixed;
bottom: 0;
left: 0;
}
を追加することでできました。

投稿日時 - 2019-04-15 13:40:58

見た感じ、すでに階層構造が違う気がします。
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とみなす解像度を
入力して、レスポンシブ化完成という具合に。

では、どうでしょうか?

投稿日時 - 2019-04-14 21:47:40

お礼

ご返答ありがとうございます。
今は
<div id="pc">PC専用のレイアウト</div>
<div id="sp">SP専用のレイアウト</div>
メディアクエリでdisplay:none;を使用するといった形です。
何故かiPadでメニュー辺りをスワイプするとメニューが重ねたように出現してしまいます。
なので、上記のようなものはできいかと思った次第です。

投稿日時 - 2019-04-15 13:36:38

あなたにオススメの質問