使用单个DOM元素修复响应式顶部导航/关闭画布导航

Question

让我们首先摆脱困境（建立在Foundation响应式框架上）：

Fiddle 1: one nav element, but becomes unfixed when side nav slides out

Fiddle 2: working but with multiple nav elments

好的，我一直在努力为以下方面开发优雅的解决方案：

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

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

我能够使用CSS翻译实现这一点，除了导航的translations remove the fixed property这一事实（见小提琴1）。

小提琴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);

虽然小提琴2作用于内容的左右边缘：

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

我想以某种方式找到一种方法，只使用一个DOM元素来优雅，因此与nav相关的插件仍然可以工作（如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;
}

Demo here

修改

要在小屏幕上使教堂中心水平，您需要使用@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%;
  }
}

Updated Demo

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