最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
web响应式下的下拉菜单实例教程
时间：2022-06-25 18:21:39 编辑：袖梨 来源：一聚教程网
HTML
两种菜单的HTML代码是不同的，因为到目前为止，你不能把<select>和
| 代码如下 | 复制代码 |
继续下一步
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的支持很友好，因此并不用太担心。
相关文章
- 无期迷途局长长阶怎么样 无期迷途局长装束长阶介绍 11-25
- 重返未来1999J什么时候up 重返未来晴日决胜局卡池活动介绍 11-25
- 时空中的绘旅人罗夏妄语怎么样 11-25
- 重返未来1999J什么时候up 11-25
- 无期迷途哈梅尔依偎涟漪怎么样 四星装束哈梅尔依偎涟漪介绍 11-25
- 剑与远征折翼苍空攻略 剑与远征奇境探险折翼苍空怎么过 11-25