#054: 点击显示移动导航 | CSS-Tricks

我们已经为响应式设计打下了良好的基础。在最小的屏幕尺寸下，菜单会分解成 2×4 的网格。它在屏幕上非常适合，但在品牌标识和菜单之间，占据了大量的空间。我们在 iOS 模拟器上打开它，发现某些情况下根本看不到任何实际内容。

我们查看了一些关于如何处理导航模式的资源，例如 Brad Frost 的文章响应式导航模式和 Jason Weaver 的侧边栏。我们还查看了 MDN 上的一个很酷的演示，叫做 Paperfold.

我们添加了一个额外的导航链接，最终称为“导航和搜索”，它将充当点击时显示移动导航的按钮。通过媒体查询断点，我们根据需要隐藏和显示此按钮。

我们主要使用 JavaScript 来切换导航。这有点冒险，因为它会疏远那些在 JavaScript 禁用的小屏幕用户——但我只是这样做了。这个数字很小（比没有 JavaScript 的桌面用户少，当然小于 1%），所以我会做个混蛋，继续这样做。

我们实际上只是用 JavaScript 切换了一个类名。我认为这是一种状态驱动 CSS 开发。所有关于显示内容、时间和方式的控制都由 CSS 处理。JavaScript 只是设置了一个类来声明当前状态。

我们花了很多时间调整添加“纸张折叠”CSS，使其正常工作，然后将搜索放在通过一些填充创建的、位于主要内容之上的间隙中。

最终，尺寸和位置进行了调整，使其更适合，并添加了一个小的关闭按钮。我一直在纠结是否要为像这样切换状态提供 UI。一方面，现在用户已经显示了导航，他们为什么还需要关闭它？他们已经看到了。如果他们不想使用它，他们可以简单地将其滑过。另一方面，当我无法在其他应用程序中切换此类状态时（出于某种原因），我发现它有点令人讨厌，所以我很想提供一个机制来执行此操作。

Daz

# 2012 年 9 月 26 日

嗨，Chris，

我正在使用稍微不同的方法来显示/隐藏菜单。

我的 JavaScript 是

jQuery(document).ready(function($){
/* toggle nav */
$("#menutoggle").on("click", function(){
$("#nav").slideToggle(1000);
$(this).toggleClass("active");
});

});

我的 HTML 是

<div id="navtoggle" class="cf">
<div class="section">
<a href="#" id="menutoggle">Menu</a></div>
</div>
                                            
<div id="nav" class="cf"> 
<ul class="menu">
<li class="item-102"><a href="/basecamp/index.php/themes" >Themes</a></li><li class="item-103"><a href="/basecamp/index.php/icons" >Icons</a></li><li class="item-104"><a href="/basecamp/index.php/logos" >Logos</a></li><li class="item-105"><a href="/basecamp/index.php/support" >Support</a></li><li class="item-109"><a href="#" >Blog</a></li><li class="item-110"><a href="#" >Contact</a></li></ul>
</div>

它运行良好，但是选择切换按钮隐藏菜单后，当我重新调整浏览器窗口大小时，它仍然处于隐藏状态！我需要在将浏览器窗口拉伸到断点以外时，让切换按钮重置为显示菜单。

有什么建议吗？

Daz

# 2012 年 9 月 26 日

我认为我找到了一种使用最小宽度媒体查询和添加的解决方案

display: block !important;

使用 !important 正常吗？

ryandolankayak

# 2012 年 9 月 27 日

嗨，Chris，
抱歉打扰你，但我按照这个视频操作，但就是无法让导航在点击时显示任何内容。我已经仔细检查了所有内容，确保与你的一致，但似乎无法实现。你介意快速看一下我的代码，看看是否有任何突出的问题吗？

我的 CSS

nav {
background-color: rgb(92,107,127); // 旧浏览器
@include filter-gradient(#5c6b7f, #40536f, vertical); // IE6-8
// IE9 SVG，需要条件覆盖“filter”为“none”
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top, rgba(92,107,127,1) 0%,rgba(64,83,111,1) 100%));
-webkit-box-shadow: 1px 5px 6px -6px black;
-moz-box-shadow: 1px 5px 6px -6px black;
box-shadow: 1px 5px 6px -6px black;
border-top: 1px solid #666666;
border-bottom: 1px solid #666666;

// 菜单中各个链接的样式
a {
display: inline-block;
width: (100%/6);
text-align: center;
padding: 15px 30px 15px 30px;
color: $white;
@include font-stack-mainfont;
font-weight: 700;
font-size: 17px;
border-right: solid 1px #445368;
@include text-shadow(rgba(black, 0.1) 1px 1px 0, rgba(black, 0.1) 1px 1px 0, rgba(black, 0.1) 1px 1px 0);
@include breakpoint(iphone) {
width: (100%/1);
border-bottom: solid 1px #445368;
}
}
.show-hide-navigation {
display: none;
}
@include breakpoint(iphone) {
a:not(.show-hide-navigation) {
display: none;
body.show-nav & {
display: inline-block;
}
}
.show-hide-navigation {
display: inline-block;
width: 100%;
}

我的 JS

$(“#show-hide-navigation”).on(“click”,function() { $(“body”).toggleclass(“show-nav”); });

谢谢

ryandolankayak

评论永久链接# 2012 年 9 月 27 日

另外，当我像你一样在 Chrome 中检查元素时，我点击导航，它会吐出一个错误
“Uncaught TypeError: Object [object Object] has no method “toggleclass”

并且突出显示的代码是 fitvids 代码
marinade

评论永久链接# 2012 年 11 月 17 日
Ryan，你的问题可能是 jQuery 加载方式。我遇到了类似的问题，因为我严格按照 Chris 的操作进行。但由于他使用的是 CodeKit，而我没有，我必须以不同的方式处理。在这种情况下，Chris 不需要在 index.php 文件中全局引入 .js 后，使用这行代码来引入脚本。如果所有方法都失败，你始终可以联系 irc 频道 #jquery。他们非常乐于助人。
```
<script src="/js/jquery.fitvids.js"></script>
```

marinade

# 2012 年 11 月 17 日

$ 符号也存在一些问题，因此我将展示对我有用的方法。（实际上，对我来说所有内容都正常，除了应该关闭搜索输入并将其恢复为搜索图标的 x 按钮。但是，这里还是有：

jQuery(function($) {
$("article").fitVids();
});

var openSearch = $(".open-search, #x-search");

function toggleSearch() {
    $(".search").toggleClass("open");
    openSearch.toggle();
    $(".close-search").toggle();
}

openSearch.on("click", function() {
    toggleSearch();
})

$("#show-hide-navigation").on("click", function() {
$("body").toggleClass("show-nav");
})

评论

发表回复 取消回复

发表回复取消回复