星空网 > 软件开发 > 网页设计

响应式WEB设计:将导航菜单转换成下拉菜单以适应小屏幕设备

移动互联网时代的到来,使得我们在进行页面设计与开发时,应当根据用户行为以及设备环境(系统平台、屏幕尺寸)进行相应的响应和调整,这个理念也叫响应式WEB设计。今天我将给大家讲解当屏幕尺寸变小时,将横向菜单转换成下拉菜单的效果。

 

本文使用了HTML5标签以及CSS3技术,您在查看demo时需要您的浏览器支持HTML5和CSS3,建议使用Chrome,Firefox或者IE9等现代浏览器。

HTML

<nav> <ul>    <li><a href="http://www.cnblogs.com//">首页</a></li>    <li><a href="http://www.cnblogs.com//server.html">服务</a></li>    <li><a href="http://www.cnblogs.com//case.html">案例</a></li>    <li><a href="http://www.cnblogs.com//about.html">关于</a></li>    <li><a href="http://www.cnblogs.com//blog.html">BLOG</a></li> </ul></nav>

我们使用了HTML5标签nav,用它来定义导航链接,即navigation。接下来我们要用css来将导航菜单并排。

CSS

nav ul{width:500px;margin:20px auto;}nav ul li{float:left; width:100px; height:24px; line-height:24px}

那么,当我们缩小屏幕的时候,要将横向菜单转换成下拉select菜单,如何处理呢?别着急,先要在html中创建一个select下拉菜单,方式有两种,一是直接在html中写一段select;二是通过javascriot动态生成select菜单。由于第一种方式会在html直接产生两个select不可取,因此我们采用第二种方式动态生成select。

jQuery

我们用jQuery来很方便的实现动态创建select。

$(function(){	// 创建一个select标签  $("<select />").appendTo("nav");  // 创建默认选项 "Go to..."  $("<option />", {   "selected": "selected",   "value"  : "",   "text"  : "Go to..."  }).appendTo("nav select");  // 根据导航菜单中链接,获取下拉菜单选项,包括文本和链接  $("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();  });});

这个时候保存页面,预览可以发现有一个横向导航菜单和一个下拉select菜单,这两个菜单是同时存在的,那么要怎么才能达到不同屏幕尺寸显示不同的菜单效果呢?

回到CSS上面来,要实现切换效果需要借助CSS3利器Media Queries。

CSS

nav select {display: none;} //隐藏select@media (max-width: 960px) { nav ul   { display: none; } nav select { display: inline-block; float:right; margin:20px 100px}}

以上代码大意:先隐藏javascript生成的selelct菜单,当窗口尺寸小于960px时,隐藏横向导航菜单,显示下拉菜单。

在桌面浏览器上,当你改变窗口尺寸到达960像素的时候,就会看到布局的改变。需要注意的是,上面的max-width部分仅仅为了测试,如果你不希望用户在桌面浏览器中因为改变了窗口大小而导致你的布局改变,可以去掉max-width部分,而只针对那些移动设备。

现在你可以使用你手中的Iphone或者Android平台的手机访问地址xxx/demo/menu2drop看看效果了。

 




原标题:响应式WEB设计:将导航菜单转换成下拉菜单以适应小屏幕设备

关键词:web

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

提示丨英国REACH和欧盟REACH有何区别?:https://www.goluckyvip.com/news/8889.html
东南亚“超级应用”之争,Go-Jek 和Grab构建生态圈:https://www.goluckyvip.com/news/889.html
出口法国注意事项,清关要求,进口管制,认证要求等:https://www.goluckyvip.com/news/8890.html
达飞调整旺季附加费;顺丰国际上线亚马逊“购买配送”服务! :https://www.goluckyvip.com/news/8891.html
激励计划出炉!TikTok商店新进展 :https://www.goluckyvip.com/news/8892.html
东南亚市场新爆品“萌宠养生经济” :https://www.goluckyvip.com/news/8893.html
无锡旅游景点竹海 - 无锡的竹海:https://www.vstour.cn/a/363178.html
5月贾汪好玩的地方 贾汪哪有好玩的地方:https://www.vstour.cn/a/363179.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流