说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

响应式导航设计案例解析(多图)

HTML文档下载 WORD文档下载 PDF文档下载
导航设计包含多种设计元素,本文收集了响应式设计网站中各种主流的导航设计趋势,如果你想设计出更好的导航设计或者了解新的响应式设计潮流,那么这篇文章不容错过!

响应式导航的设计遵循了响应式Web设计理念,页面的设计往往会根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的调整。通过同比例缩减元素尺寸、调整页面结构布局以及内容的优化调整等方式,使用户在不同的平台上有着独一无二的用户体验。

本文收集了响应式设计网站中各种主流的导航设计趋势,如果你想设计出更好的导航设计或者了解新的响应式设计潮流,那么这篇文章不容错过!

调整尺寸&定位

这是响应式导航设计首个步骤,也被视为最简约的方法。目的在于设计一款永不被隐藏且能优雅的调整窗口大小。设计简短的导航链接,让页面看起来更加简洁、亮丽。


Fiafo就是一款典型的案例。导航链接设计居右侧,当浏览器窗口被压缩后,链接呈现在Logo下方,就如同一个单一的导航栏。当你调整浏览器尺寸后,该页面也会随之而更改,完全不受影响。

这种设计风格非常具有吸引力,因为它不需要隐藏任何链接,无需CSS3或JavaScript,页面上任何条目都能显示出。最大的缺点是,该导航限制了最多链接数量。


Paid to Exist采用了另一种设计趋势,其链接是浮动的。当浏览器的尺寸缩小到最小尺寸时,该链接不会扩大到像100%宽度那样。其采用了区块层级设计元素,导航横向排列不变,由一行变为两行,页面简洁清晰且用户体验一致。

菜单选择样式

菜单选择在响应式导航设计中,被设计师认为一种较为棘手的设计。一起来看下设计案例。


从Apache CouchDB的设计案例中可以看出,其设计布局呈现细长型且容易操控,因为它是一款单页面设计。

在移动设备上用户可能不会在意导航设计样式。导航菜单选择并不一定要采用漂亮的解决按干,只要它们能易于操作即可!

随着响应式设计的发展趋势,未来可能会有其他的解决方案来替代菜单选择。如果你需要一个快速的导航,且能够用支持所有的操作系统,那么HTML元素倒是个不错的选择。

覆盖下拉菜单

在响应式设计中,隐藏菜单是一个非常流行的设计趋势。这是因为它能为页面节省更多的空间。

在移动设备上,屏幕的运用是极其宝贵的,因此,你要尽可能地向用户提供更多的空间。采用下单隐藏菜单是个完美的选择,突出高优先级内容的处理方式。


Designmodo便采用了这种布局,通过设定图标点击对菜单进行收缩或展开,列表将显示新的下拉元素。


StickyGram采用了区块级别链接,不会因调整尺寸大小而有所更改,适用于任何设备,以最好的方式呈现在你的面前。


 Tilde Inc采用了模块下拉菜单设计。

下拉菜单的共通点是:默认情况下菜单隐藏,一旦用户需要导航链接,点击图标菜单展开,选中后菜单自动消失隐藏,下一次操作时重复。优点是不会影响其他的页面内容。

多级导航

当你需要多个子链接的导航菜单,那么你不得不规划出一个完美的解决方案。除了采用区块层级下拉菜单,你还可以选择创建多级导航菜单。


以SonySony公司的网站设计为例。用户通过滚动页面找到任何他们想要的内容。

页脚链接

一旦用户点击导航按钮,它会自动跳转到采用哈希元素ID的页脚。用户可以快速访问页脚链接,无需手动滚动。


再来看下Contents Magazine设计风格,只有几个少有的顶部导航链接。调整浏览器,你就会看到一个搜索栏,并且会呈现出一些模块链接。目的是在于保持页面布局均匀,而无需额外的脚本,比如jQuery。

隐藏滑动菜单

这种设计趋势在AppleStore里经常可看到,这也是备受iOS开发者欢迎的设计风格。

虽然在CSS3中可创建这种效果,但请记住,不是所有浏览器都能支持。jQuery倒是个更加稳定的选择,甚至还有一些免费的开源插件可供你选择。


点击查看Sequence的设计风格。

英文出自:Teamtreehouse

借助三大技巧 助你提升API状态页面 集成GemFire,Hadoop生态圈的又一把火 次世代光照体验:Unity 5面世,功能系统全升级 深入浅出,以咖啡店为例演示Web应用程序扩展 百度Clouda:可依赖的实时JavaScript开发框架 Oracle发布Java 8正式版及JDK 8 编程语言中一些令人抓狂的规则 廉颇未老,微软股价创14年新高 中国云计算大会PPT集萃(三):核心架构及应用实践 特性是增多了,但是Google的云服务仍然不温不火 全国云计算大数据创新项目评选活动正式启动 【独家专访】Perl发明者首次来华:将在OSTC大会分享其编程人生 腾讯核心创始人张志东半年后卸任首席技术官 改任终身荣誉顾问和学院讲师 咱们约会吧,Web设计师教你不一样的语言 开发者不容错过的10款免费JavaScript游戏引擎 付费授权、开放源码,全新虚幻引擎4正式发布! Larry Page未来计划:用科技创造美好生活 AWS 8周年,收入超四主要对手之和 分析:北京网络广播电视台私有云实践 腾讯云总经理陈磊分享微信云三步曲 十大技术,十家机构,从行业制高点一览大数据 【OSTC讲师专访】严旭:文艺豆瓣也很开源 大姨吗携手睿仁医疗 推智能体温贴Raiing 三个火枪手将重袭传统零售业 网易王健宗:革命Hadoop,Spark带来百亿市场价值! MediaTek高级总监Chien-Ping Lu:HSA在下一盘大棋 Docker一周岁生日快乐 虚拟现实,正在改变什么? 一周消息树:腾讯CTO张志东离职 未来希望帮技术人成长 又见真人CS:13th Lab推出移动FPS对战平台 前瞻、教育、创业:Maker Faire演讲嘉宾揭晓 谁能介绍几本国外专家编写SQL Server的进阶教程(最好有电子版) 我也不得不说了,为了我的朋友,为了随风,也为了我自己。。。。。。。。。。。。(贴子长,上班的时候还是别看了好:) 请推荐几本用vc开发服务程序的书籍 请问如何在TC30中使用并连接第三方LIB??? 曾经有一个中毒的人…… to: nononono(null,null),再来! 导入的数据,字符型输出为乱码在oracle8.05中,如何解决?谢谢! 做设计文档时,是先进行详细设计还是数据库设计? csdn我爱你........ oracle8.05中如何察看记录?谢谢! 哪位兄弟见过可以收发邮件(SMTP)的源码,做成动态连接库的那种。别的程序可以调用 关于tedit控件(很弱智的问题,但是小妹妹我就是不会做) 请问一个简单的条件是用Ttable的filter还是Tquery? 选DCOM还是CORBA? 倒库出现的问题 寻求怎样写SQL语句的教程 JNI的问题: dll文件放在哪里能被servlet调用到? 好不容易收到第一份海外定单! 问ListCtrl的item上的右键菜单 怎样求出一个点的坐标??????急急!!!! 请大家看一看这个分页程序,为什么在页数大于20时,按下一页时下面的页数还是显示的1~10页!!谢谢!! 我的linux在放mp3時總愛死,為甚麼? 唉,弄了好几天了,如何解决?????????????? 请问哪里有免费的PHP+MYSQL主页空间呀! 大家快来帮忙:数据库的一个小问题 我现在想学一门新技术,不知道是学VC++,JAVA,还是刚刚出来的。NET技术呢?请高手指点呀。 高分征解:一个动态提示窗口的问题,给出答案必定给分!!!求救我啊!! 在这里赚分真不容易呀! 怎样检查FORM中CHECKBOX和RADIO的值呢 那里有在asp中操作word对象的详细教程? 请问:如何得到TForm的窗口句柄? authorware中的按钮。 哪里有发送mail成功的php程序!! 关于上传数据的一个特殊问题,有点难 怎么用OLE实现与手机的通讯?? 汉语分词算法 grid显示问题 成为Delphi高手须看哪方面的书籍,请高高手指教? 关于属性页的小问题? 为水园增加点正气: 大家都是斯文人吗,呵呵||||| 诗经国风2001版----之桃夭 高手高手教教我 +++++++++++++一个很奇怪的问题************* 请问:有没有专门介绍C++函数使用的书籍? 提個有點難度的問題.看問題的有獎. 高手请看:这语句错在哪? 哪儿有dos的原代码? 谁能平息这几天水园的争端^^^^^^^^^^一个详和的水园^^^^^^^^^^^我只能拿分支持 为何显示黑乎乎的一片,chick!!!!!!! 原来女人也好色,欢迎MM。 心芯蕊~来拿分~~~~MM要分能不给吗??砸锅卖铁也要给啊!~~~~55555,可怜我的分啊~~~~~~~~~~~ 着急??一小段代码!!谁来看一下?? 过氧化钠能否在常温下与二氧化碳反应生成氧气?过氧化钠是一种淡黄色固体,它能否在常温下与二氧化碳反应生成氧气?在什么地方可以买到过氧化钠? 1.5摩尔铁完全燃烧生成四氧化三铁多少克 要列式子 给9.8克氯酸钾加热,完全分解能产生多少摩尔氧气 过氧化钠与CO2反应产生氧气之后变成的Na2CO3物理性质怎么样? 现用氯化钾和二氧化锰混合加热制取氧气.反应前混合物的质量是25克,加热到再放出气体时现用氯化钾和二氧化锰混合加热制取氧气.反应前混合物的质量是25克,加热到不再放出气体时,得到剩 实验室需要22.4L氧气做实验,需要多少克过氧化氢完全反应?(氧气密度为1.48g/L,保留到整数) 在常温下过氧化钠与二氧化碳反应生成碳酸钠和氧气.此反应中氧元素有几种化合价?分别是什么? 实验室加热氯化钾和二氧化锰的混合物之取样器.若收集到的标准状态下3.36L氧气至少需要多少克氯化钾?同时生成氯化钾的物质的量为多少? 2.4g的镁完全燃烧需要多少升氧?氧气密度1.4g/L 过氧化钠与二氧化碳反应生成的氧气中氧元素是从哪一种物质获得的? 实验室加热氯酸钾和二氧化锰的混合物制取氧气,若收集到标准状况下22.4升氧气,至少需要氯酸钾多少克,同时生成氯酸钾的物质的量为多少同时生成氯化钾的物质的量为 实验室现需1.12L纯净的氧气(标准状况下,氧气密度是1.43g/L),某同学加热氯酸钾和二氧化锰混合物制氧气,并回收二氧化锰和氯酸钾,下表为实验的有关数据:实验收集所需1.12L氧气后试管内固 物质与氧发生的反应叫氧化反应 这里的氧是指氧元素么?还是只是指氧气?辅导书的概念就是这么讲的……(BD百科上也有这句话...)仅仅现定于初三化学... 实验室用氯酸钾制取氧气,加入二氧化碳是为了什么? 完全分解5%的过氧化氢溶液680g,可制得氧气多少克?合多少升?(标准情况下氧气的密度为1.43g/L) 氧化反应是指一种物质与氧气反应还是反应物中有氧气就是?氧化反应是物质与氧反应 氧是有氧元素,还是氧气? 实验室用加热24.5克氯酸钾完全反应后可生成多少克氧气? 实验室需制取3瓶氧气,每瓶氧气的体积为250ml,需用多少克过氧化氢氧气密度为1.429g/L 氧气在氧化反应中提供氧,具有氧化性,是一种常见的什么剂?在学初三的空气那一张,课题2 氧气的知识要点三:(氧化反应)中提到RT,请问这是一种常见的_____剂? 实验室用氯酸钾制氧气,现需16克氧气,求需分解多少克氯酸钾,同时生成多少克氯酸钾? 实验室用34g双氧水最多可制得氧气多少克?在标准状况下,其所占体积又是多少升?(密度 )氧气的密度为 1.429g/L 氧气在氧化反应中具有氧化性的原因是 实验室要用氯酸钾和二氧化锰加热制氧气,要制取96g氧气需要多少克氯酸钾分解才能制得? KClO3与MnO2制取氧气化学方程式 氧气常温下能与所有的物质发生化学反应吗如果不能请举例.急 有什么氧化反应不是物质与氧气发生反应的,什么气体也像氧气一样具有氧化性吗? 实验室用氯酸钾制氧气还有FeO和Fe2O3有什么区别 氧气的化学性质是不是化学反应 氧气是一种化学性质比较活泼的气体,它在氧化反应中提供氧,具有氧化性.下列说法中正确的是A.酿造酒和醋时都发生了剧烈的氧化反应B.白磷自燃既含缓慢氧化C.蜡烛燃烧发生了化合反应D.将 将0.04摩尔氯酸钾与二氧化锰共热,完全分解时可生成氧气___________摩尔,相当于生成氧气___________克. 请问:氧气是不是能与所有物质发生反应? 煤气罐在多高的温度下会爆炸 用30克氯酸钾和5克二氧化锰制取氧气,反应后,得到25.4克固体,生成氧气几摩尔? 过氧化钠与水反应怎样知道生成的是水还是氧气,能不能通过化学方程式直接弄出来,背得多了,都记乱了,还比方说二氧化碳与氢氧化钠反应生成的是水还是氢气 实验室加热氯酸钾和二氧化锰的混合物制取氧气.若收集到标准状况下3.36L氧气,至少需要多少克氯酸钾?同时生成氯化钾的物质的量为多少? 实验室用氯酸钾和二氧化锰混合物加热制氧气,反应前后二氧化锰的质量分数(变小,变大,不变)要原因 过氧化钠和水反应为什么氧气的氧来自于过氧化钠的氧,别用电子的解释为什么不多此一举的把氧作为是产生的水中的氧然后水中氧变成氧气虽然知道能量不够水分解, 实验室加热氯酸钾和二氧化锰的混合物制取氧气.实验室加热氯酸钾和二氧化锰的混合物制取氧气,若收集到标准状况下3.36L氧气,至少需要多少克的氯酸钾?同时生成氯化钾的物质的量是多少? 实验室加热4克氯酸钾和二氧化锰的混合物来制取氧气,当加热到不再产生氧气时,剩余固体物为3.04克,求 1.生成氧气多少克?2.原混合物中氯酸钾和二氧化锰各多少克?3.若改用加热高锰酸钾来制 1000克过氧化钠和水反映能产生多少氧气? 试题 用一定量的KClO3与MnO2的混合物共热制取氧气,开始时,MnO2在混合物中的质量分数为25%,当MnO2的质量分数提高到30%时,求分解的KClO3的质量是多少 实验室用氯酸钾和二氧化锰制取6mol氧气,问同时生成氯化钾多少摩尔?生成氯化钾多少克 为什么过氧化钠与水反应有氧气生成 将一定量MnO2和KClO3混合物共热制取氧气,开始时MnO2在混合物中占20%,加热后MnO2在混合物中含量提高到25%,求kclo3的分解百分率 氯酸钾加上二氧化锰生成氯化钾和氧气时的化学现象?KClO3(MnO2)→KCl+O2↑ 还有高锰酸钾加热生成锰酸钾,二氧化锰和氧气的化学现象!还有碳酸钠加上氯化氢生成氯化钠,二氧化碳和水的化学 急 过氧化钠和水反应为什么不生成氧气 初三化学催化剂MnO2与KCL,H2O2反应后如何分离好像最后一步都是结晶 之前有点不一样、、是甚 氯化钾和二氧化锰生成的氧气里有二氧化锰里的氧气吗 钠在空气中能够与氧气反应生成过氧化钠吗 MnO2为催化剂分解H2O2制取氧气的化学反应方程式实验室常以MnO2为催化剂分解H2O2制取氧气,请写出此反应的化学反应方程式 取制1mol的氧气要多少氯酸钾 如何判断过氧化钠与物质反应是否有氧气生成在什么时候过氧化钠与物质反应时,首先生成氧气,再由氧气氧化该物质?在什么时候过氧化钠直接氧化该物质?例如:过氧化钠与硫酸钠反应时是先 1.5摩尔铁在足量纯氧中完全反应生成四氧化三铁物质的量为多少摩尔 若有0.1mol纯氯酸钾,可制得氧气多少mol 氧化钠和氧气反应生成过氧化钠? 铝和四氧化三铁的反应中,每生成一摩尔铁转移2.67mol电子,为什么?4Al+3Fe3O4=高温=9Fe+4Al2O3 用氯酸钾制备氧气,若要制得标准状况下的氧气33.6L,至少需要氯酸钾多少摩尔?相当与氯酸钾多少克?麻烦把解题的步骤写下来 还有解题思路 最好能完整 具体一点 过氧化钠和二氧化碳反应生成碳酸钠和氧气啊是置换反应? 5摩尔三氧化二铁,4摩尔四氧化三铁,3摩尔氧化亚铁,的混合物,加入纯铁1摩尔并在高温下合三氧化二铁反应若纯铁完全反应则反应后混合物中氧化亚铁和三氧化二铁的物质的量之比可能是?A 4:3 给9.8g氯酸钾加热完全分解能产生多少摩尔氧气?要得到相同质量的氧气,需要分解多少克高锰酸钾?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn