使用单个 DOM 元素修复了响应式顶部导航/关闭画布导航 [英] Fixed Responsive Top Nav / Off Canvas Nav with Single DOM Element

问题描述

让我们先把这些问题排除在外(建立在 Foundation响应式框架):

Let's get the fiddles out of the way first (built on the Foundation responsive framework):

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

Fiddle 2:工作但有多个导航

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

Okay so, I have been racking my brain trying to develop and elegant solution for the following:

1) 制作响应式、固定导航，在较小的屏幕尺寸(类似于 Facebook 应用)上从顶部拉伸切换到滑出侧面

1) Make a responsive, fixed navigation that switches from stretching across the top to sliding out of the side on smaller screen sizes (ala the Facebook app)

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

2) I'd like to use the same DOM element for the navigation, rather than have two separate but identical elements

除了 翻译删除导航的固定属性(参见小提琴1).

I was able to accomplish this using CSS translations, except for the fact that translations remove the fixed property of the nav (see fiddle 1).

Fiddle 1 解决方案使用 CSS 翻译，如下所示:

The Fiddle 1 solution uses CSS translations like so:

-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 作用于内容的左右边距:

While Fiddle 2 acts on the left and right margins of the content:

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

我想以某种方式找到一种仅使用一个 DOM 元素的方法，既优雅又美观，因此与导航相关的插件仍然可以工作(如 scrollspy)

I'd like to somehow find a way to use just one DOM element for both elegance and so nav-related plugins will still work (like scrollspy)

推荐答案

一个解决方案是给 page position:absolute 并改变 left 定位而不是转换它.

One solution would be to give page position:absolute and change the left positioning instead transforming it.

.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 查询.这样的结果近似于您想要的结果

To make the nave be horizontal on small screen, you'll need to use @media queries. Something like this approximates the result you want

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

更新演示

这篇关于使用单个 DOM 元素修复了响应式顶部导航/关闭画布导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！