修复了具有单个 DOM 元素的响应式顶部导航/画布外导航

Question

让我们先把小提琴移开（建立在基金会响应式框架上）：

小提琴 1：一个导航元素，但在侧面导航滑出时变得不固定

小提琴2：工作但有多个导航

好的，我一直在绞尽脑汁，试图为以下方面开发和优雅的解决方案：

1）制作一个响应式的固定导航，在较小的屏幕尺寸上从顶部拉伸切换到从侧面滑出（ala Facebook应用程序）

2）我想使用相同的DOM元素进行导航，而不是有两个独立但相同的元素

我能够使用 CSS 翻译完成此操作，除了翻译删除了 nav 的固定属性（参见小提琴 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 元素来实现优雅，因此与导航相关的插件仍然可以工作（如 scrollspy）

Answer 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%;
  }
}

更新的演示

Answer 2

我建议将元素移到div#page 之外。这样，您在页面上放置的任何样式都不会影响它（包括翻译），并且您可以根据需要自由设置导航列表的样式。

http://jsfiddle.net/mKAtM/3/

这只是一个快速测试，我已经按照建议将导航移出div 并添加了以下样式：

.top-bar {
    z-index:1000;
}
.top-bar.expanded{
    -webkit-transform: translate3d(250px, 0, 0);
    -moz-transform: translate3d(250px, 0, 0);
    -o-transform: translate3d(250px, 0, 0);
    transform: translate3d(250px, 0, 0);
    overflow:visible;
}

（认为溢出：可见是一个不同的问题）

显然，您需要添加过渡等，并且翻译应该在一个类中，但希望这是朝着正确方向迈出的一步

编辑

更新了小提琴以修复动画：http://jsfiddle.net/mKAtM/8/

CSS 需要一些整理，如果您正在使用您的 less/scss，则