3

最初にフィドルを片付けましょう ( Foundationレスポンシブ フレームワーク上に構築されています)。

Fiddle 1: 1 つのナビゲーション要素ですが、サイド ナビゲーションがスライドすると固定されなくなります

Fiddle 2: 機能しているが、複数の nav elments がある

さて、私は頭を悩ませて、次のエレガントなソリューションを開発しようとしています。

1) 小さな画面サイズでは、上に横に伸びる状態から横にスライドする状態に切り替わる応答性の高い固定ナビゲーションを作成します (Facebook アプリのように)。

2) 2 つの別個の同一の要素を使用するのではなく、同じ DOM 要素をナビゲーションに使用したい

翻訳によってナビゲーションの固定プロパティが削除されるという事実を除いて、CSS 翻訳を使用してこれを達成することができました(フィドル 1 を参照)。

Fiddle 1 ソリューションは、次のような CSS 変換を使用します。

-webkit-transform: translate3d(250px, 0, 0);
-moz-transform: translate3d(250px, 0, 0);
-o-transform: translate3d(250px, 0, 0);
transform: translate3d(250px, 0, 0);

Fiddle 2 はコンテンツの左右の余白に作用します。

margin-right: -250px;
margin-left: 250px;

私はどうにかして DOM 要素を 1 つだけ使用して両方のエレガンスを実現する方法を見つけたいので、nav 関連のプラグインは引き続き機能します (scrollspy など)。

4

2 に答える 2

2

1 つの解決策は、位置を変換するのではなく、位置を指定page position:absoluteして変更することです。left

.page {
    transition:.3s ease-in-out;
    position:absolute;
    left:0px;
    top:0px;
}    
.page.navigating {
    left:250px;
}
.page.navigating .top-bar .top-bar-section {
    left:0px;
}

デモはこちら

編集

小さな画面でネイブを水平にするには、@mediaクエリを使用する必要があります。このようなものは、あなたが望む結果に近似します

@media all and (max-width: 310px) {
  .left li {
      display:inline-block;
  }
  .left li a {
  }
  section.top-bar-section {
      width:auto;
  }
  .left li:nth-child(odd) {
      display:none;
  }
  .left li:nth-child(even) a {
      display:inline-block;
      width:auto;
      padding:5px;
      font-size: 50%;
      background:black;
  }
  .page.navigating .top-bar .top-bar-section {
      left:40px;
  }
  .page.navigating {
      left:0px;
  }
  .name h1 {
      float:right;
      font-size:50%;
  }
}

更新されたデモ

于 2013-09-29T23:57:33.900 に答える