百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> web响应式下的下拉菜单实例教程
分享本文到:

web响应式下的下拉菜单实例教程

发布时间:01/15 来源: 浏览: 关键词:
很多网站有一个优雅的响应式设计的特点,当屏幕窗口变小时,上面菜单会在右上角或者左上角转换成一个下拉菜单。现在我们来学习一下web响应式下的下拉菜单。

HTML

两种菜单的HTML代码是不同的,因为到目前为止,你不能把<select>和<option>的样式设计成<a>有一样的外观和行为,反之也不能。所以二者都需要设计,而你做的就是把二者的标记都写出来。FSS的做法如下:

 代码如下

<nav>
  <ul>
    <li><a href="/" class="active">Home</a></li>
    <li><a href="/collections/all">Books</a></li>
    <li><a href="/blogs/five-simple-steps-blog">Blog</a></li>
    <li><a href="/pages/about-us">About Us</a></li>
    <li><a href="/pages/support">Support</a></li>
  </ul>
 
  <select>
    <option value="" selected="selected">Select</option>
    <option value="/">Home</option>
    <option value="/collections/all">Books</option>
    <option value="/blogs/five-simple-steps-blog">Blog</option>
    <option value="/pages/about-us">About Us</option>
    <option value="/pages/support">Support</option>
  </select>
</nav>



继续下一步

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
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});



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

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



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

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

责任编辑:
打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有6人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

订阅获得更多模板