修改了单个DOM元素的响应顶部导航/关闭帆布导航 [英] Fixed Responsive Top Nav / Off Canvas Nav with Single DOM Element

问题描述

让我们先把这些谜语放在首位（建立在 基金会 上）响应框架）：

小提琴1：一个导航​​元素，但在侧面导航幻灯片之后变得不固定

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

好吧，我一直在劫掠我的大脑尝试开发和优雅的解决方案：

1）制作一个敏感的，固定的导航，从最上方的拉伸切换到较小屏幕尺寸的侧面（ala的Facebook应用程序）

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

我可以使用CSS翻译来完成这个，除了 翻译删除固定属性

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）; 
  

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

  margin-right：-250px; 
 margin-left：250px; 
  

我想以某种方式找到一种仅使用一个DOM元素来实现优雅和导航相关的插件仍然可以工作（如scrollspy）

解决方案

一个解决方案是给 code> position：absolute 并更改 left 定位，而不是转换。

  .page {
 transition：.3s ease-in-out; 
 position：absolute; 
 left：0px; 
顶部：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％; 
背景：黑色; 
} 
 .page.navigating .top-bar .top-bar-section {
 left：40px; 
} 
 .page.navigating {
 left：0px; 
} 
 .name h1 {
 float：right; 
 font-size：50％; 
} 
} 
  

更新演示

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

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

Fiddle 2: working but with multiple nav elments

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

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) I'd like to use the same DOM element for the navigation, rather than have two separate but identical elements

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).

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);

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

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

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)

解决方案

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

Demo here

EDIT

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

Updated Demo

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