如何在响应式布局中为移动屏幕添加另一个导航
如何在响应式布局中为移动屏幕添加另一个导航
提问于 2012-12-21 19:53:40
我正在与响应式布局的wordpress主题设计。响应式布局是使用css3媒体quires.Currently安排的，该主题导航依赖于大屏幕尺寸的水平superfish导航。我想使用superfish或accordian将导航更改为垂直导航。如何更改移动屏幕的导航？
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-12-22 01:03:01
这实际上取决于菜单的输出代码是如何构造的，以使其具有响应性。然而，这里有几个想法可能会有所帮助。有时你可以在手机上把菜单全部隐藏起来，让另一个版本显示出来。这很棘手，因为隐藏DOM中的项仍然会将HTML输出到移动浏览器上，这会增加加载时间，但有时这是最好的修复方法，具体取决于可用性。
下面是在iPhone等移动设备上输出滚动选择的快速代码片段
<select class="iphone-menu" ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="" selected="selected">Main Menu</option>
<option value="/">Home</option>
<option value="/portfolio">Portfolio</option>
<option value="/services">Services</option>
<option value="/knowledge">Knowledge</option>
<option value="/blog">Blog</option>
<option value="/about">About</option>
<option value="/contact">Contact</option>
</select>我认为对于你想要的东西，你需要的是这样的东西：http://wpmegamenu.com/
我通常不推荐插件，但这个菜单确实可以很好地折叠，以及你想要的。也许这可以作为一个很好的参考点。它们使列表项在某一点达到100%的宽度，然后以不同的方式设置下拉菜单的样式。
它不能做手风琴，但它能做下拉。要做一个手风琴，你必须用javascript激活一个调整窗口大小的脚本，这样它在移动设备上只起到手风琴的作用，在台式机和平板电脑上则被关闭。我绝对不是js的专家，所以也许其他人可以更好地指导你，但一个基本的调整大小的函数应该是这样的：
function checkWidth(init)
{
/*If browser resized, check width again */
if ($(window).width() < 979 ) {
// accordion script here
}
else {
if (init == false) {
// deactivate script here
}
}
}
// this function returns the width of the browser window
$(document).ready(function() {
checkWidth(true);
$(window).resize(function() {
checkWidth(false);
});
});希望这能将您引向正确的方向。我使用这些不同的方法在响应式网站上实现了不同的菜单，它们对我来说效果很好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13989703
复制相关文章
相似问题
腾讯云开发者
