修改了单个DOM元素的响应顶部导航/关闭帆布导航

问题描述

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

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

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

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

我可以使用CSS翻译来完成这个，除了

编辑

为了使小屋内的小屋水平，您需要使用 @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元素的响应顶部导航/关闭帆布导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！