私の目標は次のとおりです。
- 全画面表示
- サイドバー メニューとコンテンツ
- モバイルにサイズ変更すると、上にメニュー、下に残り
- それでおしまい
Foundation グリッドが気に入りました。しかし、それを行う「正当な」方法は見つかりませんでした。
それは可能ですか、またはそのためにどのグリッドフレームワークをアドバイスしますか?
私の目標は次のとおりです。
Foundation グリッドが気に入りました。しかし、それを行う「正当な」方法は見つかりませんでした。
それは可能ですか、またはそのためにどのグリッドフレームワークをアドバイスしますか?
本当に必要なものは次のとおりです。
<body>
<div id="navbar">...</div>
<div id="content">...</div>
</body>
CSS:
#navbar {
position: fixed;
left: 0; top: 0; bottom: 0;
width: 150px;
overflow: auto;
}
#content {margin-left: 150px;}
@media all and (max-width: 480px) {
#navbar {
bottom: auto; right: 0;
height: 150px;
overflow: auto;
}
#content {margin-left: 0; margin-top: 150px;}
}
または、2 つのナビゲーション バー (通常のデバイス用とモバイル用) を用意し、メディア クエリを使用してそれらを表示/非表示にします。