本文共 1393 字,大约阅读时间需要 4 分钟。
原文:
译文:转换菜单为下拉式来适应小屏幕
译者:dwqs
(ps:称FSS)网站有一个优雅的响应式设计的特点,当浏览器窗口的变小时,右上角的菜单从规则的一行转换成一个下拉菜单。(PS:原文写于2011年,FSS网站的设计已经改变,具体可以参考原文的截图。)
HTML
两种菜单的HTML代码是不同的,因为到目前为止,你不能把<select>和<option>的样式设计成<a>有一样的外观和行为,反之也不能。所以二者都需要设计,而你做的就是把二者的标记都写出来。FSS的做法如下:
继续下一步
CSS
默认我们利用display:none隐藏select菜单,这个很好接受。对于屏幕的阅读者,将隐藏的多余的菜单。
nav select { display: none;}
然后利用媒体查询,针对一些特定宽度的突然变化。你可以根据实际情况来设计()
@media (max-width: 960px) { nav ul { display: none; } nav select { display: inline-block; }}
现在需要维护两个菜单吗?
恩,这是一个需要担心的问题。或许你的菜单是动态创建的并且你不能很好的控制的输出,或许你有技术处理菜单但想确保不会偶然同步出现两个菜单。能找到的一种方式是从一开始就动态创建下拉菜单。利用JQuery,很容易就能实现:
// Create the dropdown base$("").appendTo("nav");// Create default option "Go to..."$("", { "selected": "selected", "value" : "", "text" : "Go to..."}).appendTo("nav select");// Populate dropdown with menu items$("nav a").each(function() { var el = $(this); $("", { "value" : el.attr("href"), "text" : el.text() }).appendTo("nav select");});
然后确保下拉菜单能够运用
$("nav select").change(function() { window.location = $(this).find("option:selected").val();});
下拉菜单是不是有点唐突?
有一点。小屏幕大多数是移动设备,并且他们对JavaScript的支持很友好,因此并不用太担心。但是如果你想确保在没有JavaScript的情况下也能让它正常工作的话,可以参考我的另一篇文章:.
效果演示:
打包下载:
原文首发:
转载地址:http://jutgi.baihongyu.com/