固定响应顶部导航/非画布导航，带有单个DOM元素

让我们先把小提琴放到一边（建立在响应框架之上）：

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

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

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

我能够通过CSS翻译来完成这一点，除了导航的翻译（参见fiddle 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）

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

这只是一个快速测试，我已按照建议将导航移出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;
}

（想想溢出：可见是另一个问题）

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

编辑

更新了fiddle以修复动画：

---

css需要一些整理，如果您正在使用的话，使用less/SCS要容易得多。一个解决方案是给

页面
位置：绝对
并更改
左侧的位置，而不是转换它

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

很抱歉耽搁了，一周没有答复，我已经放弃了希望。我认为这是朝着正确方向迈出的一步，但一个更彻底的答案将是有益的。例如，如果我使用非画布导航打开一个小窗口，然后将其加宽，则这两个菜单项不会显示在顶部bar@DougieBear我更新了我的答案，向你展示了你所寻找的东西的大致版本。我也接受这种方式，看起来可能更干净。你能修好提琴，让过渡正常工作吗（页面内容滑出，露出画布外的导航）？我也遇到了与上述解决方案相同的问题，我将很快更新小提琴。就我个人而言，我更喜欢这种方法，因为它看起来更干净。但是主要的优势是使用翻译而不是绝对定位-这意味着它是硬件加速的，在所有设备上都是平滑的，绝对定位是不正确的。请更新它，我很高兴切换选定的答案。我也更喜欢这种方式，即离开画布的导航弹出以显示其下方的选项卡，而不是让选项卡从侧面滑出。添加了一个简单的幻灯片动画-回答中的小提琴我对Alex发布的代码有问题：