1

私は現在、モバイルおよび固定デバイス用に最適化されたサイトに取り組んでいます。現在、 http://www.teehanlax.com/のように、下にスライドするオーバーレイのように機能するメインナビゲーションを考えています。

しかし、そのオーバーレイ効果を作成する方法がわかりません。私がやっている唯一のことは、メニューボタンをクリックするとページの一部が下にスライドすることです。しかし、これは実際のオーバーレイ効果ではありません。

メニューの構文:

<div id="navContainer">  
    <div id="topNav">
    <div class="top">
    <div class="heading">
        <div id="logo">LOGO</div>
    </div>
    <a href="#" class="menu">MENU</a> 
</div>

        </div>


    </div>

<div class="drawer">
<nav>
  <ul class="nav nav-tabs nav-stacked">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
  </ul>
</nav>
</div>

メニューはhttp://jsfiddle.net/RFpDJ/1/と同じように機能しますが、コンテンツをオーバーレイし、押し下げる必要はありません。
何か案は？

4

3 に答える 3

2

通常のレイアウトフローからメニューを削除したい場合は、単にそれを与えることができますposition: absolute;

.drawer {
    position: absolute;
    width: 100%;
}

http://jsfiddle.net/RFpDJ/12/

.drawerまた、メニューだけでなくコンテンツもプッシュダウンしたくないので、コンテンツを外部に移動しました。(他のいくつかの値も微調整しましたが、それらはほとんど無関係です。)

于 2013-08-12T11:00:17.840 に答える
0

私の解決策を見てください。

メニューを絶対配置 ( position:absolute;) に変更し、コンテンツ div をバナーの外に移動しました。

于 2013-08-12T11:02:51.823 に答える
0

これをチェックして：

.drawer {
  position: absolute;
  width:100%;
  top:-100px;
}

.content{
 top:90px;
 position:absolute;
 width:100%;
 height:400px;
}

ここでの作業: http://jsfiddle.net/RFpDJ/14/

于 2013-08-12T11:13:08.243 に答える