Q&A
現在レスポンシブサイトを作成しています。
やりたいこととして、デスクトップ上で見た場合のサブメニューをレスポンシブではメインコンテンツの下に配置したいです。
html
1<html> 2 <body> 3 <div class="sub-menu"> 4 </div> 5 <main> 6 </main> 7 </body> 8</html>
大体このような構造をしており、デスクトップで見た時にはサブメニューはメインの左側にあります。
このサブメニューをスマホで見た際にはメインの下に置きたいのですがなにかいい方法をご存じないでしょうか。
よろしくお願いいたします。
回答2件
0
ベストアンサー
flexboxで
html
1<html> 2 <body> 3 <div class="sub-menu">sub</div> 4 <main>main</main> 5 </body> 6</html>
css
1body { 2 display: flex; 3 flex-direction: row; 4} 5@media (max-width: 480px) { 6 body { 7 flex-direction: column; 8 } 9 main { 10 order: 1; 11 } 12 .sub-menu { 13 order: 2; 14 } 15}
投稿2016/08/06 14:22
総合スコア604
0
HTML
1<body> 2<div id="wrapper"> 3 <div id="main"></div> 4 <div id="sub"></div> 5</div> 6</body>
CSS
1#main { 2 float:right; 3} 4#sub { 5 float:left; 6}
と、先にメインを記述してしまえば、あとはブレイクポイントで、
CSS
1#main,#sub { 2 float:none; 3 width:100%; 4}
とかでサブは下に表示されます。サイズはデザインに合わせ、
wrapperには、Clearfixを当てれば完成ですね。
投稿2016/08/06 14:02
総合スコア1084
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。