facebook - モバイル用のブートストラップ メニューを変更して Facebook のモバイル メニューに似せるにはどうすればよいですか?

Question

twitter ブートストラップを使用してモバイル Web サイトを作成しています。Twitterレスポンシブメニューを使用しています。

モバイルでメニューを表示すると、次のようになります

通常モードでは

メニュー展開時。

Facebookのモバイルスタイルのメニューのように見えるようにすることはできますか?つまり、メニューが上から下に来るのではなく、左から右に来るようにすることはできますか?

Answer 1

メニューを折りたたむと、トランジション付きの css クラスが追加されます (高さ 0 から自動)。この css クラスを上書きできます。

例：

.nav-collapse, .nav-collapse.collapse{
    height: 0;
    width: 0px;
    overflow: hidden;
    position: relative;
    left:100%;
    -webkit-transition: all 2s ease 0s;
     -moz-transition: all 2s ease 0s;
       -o-transition: all 2s ease 0s;
          transition: all 2s ease 0s;
}
.collapse.in {
    left:0;
    width: 100%;
    height: auto;
}   

このコードは説明のみを行います。このコードは、他の navbar コードを壊します。(小さな画面で開く) を参照してください: http://bootply.com/74938