一聚教程网:一个值得你收藏的教程网站

热门教程

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
$("



然后确保下拉菜单能够运用

 代码如下 复制代码
$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});



下拉菜单是不是有点唐突?

有一点。小屏幕大多数是移动设备,并且他们对JavaScript的支持很友好,因此并不用太担心。

热门栏目