3

让我们先把这些问题排除在外（建立在Foundation响应式框架上）：

Fiddle 1：一个导航​​元素，但当侧导航滑出时变得不固定

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

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

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

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 元素的方法，既优雅又美观，因此与导航相关的插件仍然可以工作（如 scrollspy）

4

2 回答 2

2

一种解决方案是给出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 回答
1

我建议将元素移到 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 会更容易

于 2013-09-29T21:55:35.770 回答