Foundation 3 を使用してレスポンシブ サイトを構築しています。画面サイズが小さい場合、下のコンテンツをオーバーレイするのではなく、コンテンツを押し下げるドロップダウン メニューがあります。なぜこれが起こっているのか、またはこれを引き起こすために何をしたのかはわかりません。
問題のサイトはこちらです。このサイトには他にもいくつか問題がありますが、これが私を本当に当惑させた問題です。
ドロップダウンが残りのコンテンツを押し下げないように修正する最良の方法は何ですか?
あなたのフレームワークに固有の解決策を探していたかどうかはわかりませんが、あなたが要求したことを行うために行った変更を次に示します。
.nav-bar.right {
position:absolute;
z-index:100;
background-color:#fff;
top:5px;
border:2px solid #ccc;
border-top-width:0px;
}
.top-bar.expanded {
overflow:visible;
}
かなりうまくいくようです(Chrome 26でのみテストしました)。必要に応じて自由に微調整してください。
追加するだけです:
<nav class="top-bar" data-options="scrolltop: false">
または初期化時:
$(document).foundation('topbar', {scrolltop: false});
あの恐ろしいジャンプを止めるために