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

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

让我们首先找到小提琴（基于Foundation响应框架）：

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

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

好吧，我一直绞尽脑汁想要为以下方面开发和优雅的解决方案：

1）制作一个响应式，固定的导航，从较小的屏幕尺寸上的拉伸切换到侧面滑动（Facebook应用程序）

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

我能够使用CSS翻译完成此操作，除了翻译删除导航的固定属性这一事实（参见小提琴1）。

小提琴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）

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)

最满意答案

一种解决方案是给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%; } }

更新了演示

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