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

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

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

路透社:iPhone 6仅有4.7寸版本,将于5月量产,5.5寸遭冷冻 高端实战技术培训:OpenStack企业应用之路 据统计,Oracle已击败IBM跃居软件行业第二 【技术博客推荐】2014年值得关注的10个开源项目 Intel在深圳建立智能设备创新中心 将投入1亿美元 免费获得价值1200元Unity2014顶级盛会门票! IBM公布Softlayer中国业务落地时间表 推荐30款最佳的数据可视化工具 数据库迁移测试:选白盒还是黑盒? 东软发布首款英特尔架构企业级移动终端解决方案 英特尔与腾讯创立游戏创新实验室 推进RealSense技术 《近匠》系列沙龙之探寻绝密武器:移动跨平台开发 iOS走向开放:苹果新推iAd Workbench广告服务 腾讯薛伟:快速模型更新在精准广告推荐中的应用 微软Build2014第一天要点精华汇总(组图) Windows 8.1 Update 1五大改变:任务栏回归,增强鼠标支持(图) 【十大院士】怀进鹏:全球的计算模式可能重新形成 微软Build2014第一天应了解的15件事 TypeScript1.0发布,完美支持Visual Studio系列产品 欲与Android展开价格战,微软宣布在移动设备上免费开放Windows 2014深圳英特尔信息技术峰会次日要点汇总 4月4日:微软39周岁,生日快乐! 正式进军硬件市场 Atlassian发布可穿戴设备Bitband 云计算时代IT专业人员需具备的10项技能 【走近院士】李德毅:大数据是连接虚拟和现实世界的桥梁 微软Build2014大会第二天干货总结 Microsoft Azure拥抱Puppet、Chef、MongoDB... 唏嘘不已!Brendan Eich上任Mozilla CEO仅十天即因歧视同性恋被迫辞职 最火HTML5 JavaScript游戏引擎:国外篇(一) Facebook发布PlanOut 开源部分A/B测试源码 一周消息树:6款Java转C#的最佳工具、Web开发者必备的9个软技能 对话“宙斯杯”获奖代表:依托京东云平台,打造精品电商CRM xml与网格问题,高手请进!! 在ISAPI中如何用相对路径取得绝对路径,即类似asp中的Server.MapPath()! 如何学习??? 大侠帮忙!!!!关于打印问题(客户端控制服务端的打印),把分全送了!! 为什么我用了ejbstore就报错 启动2k时事件管理器中总有4个错误 高分求教 为什么提问前不自己查查以前的帖子 如何插入如下的结果集??? 如何吧一个xml文件写入byte[]流,然后再读出来写入另一个xml文件 关于ADO的问题。。很麻烦 救急 一个问题 谁有VB编的管理系统?能发个给我吗?? 如何解决VC++编译器的代码转换问题! 谁申请过电子信息技术应用贴息贷款? LDAP问题请指教,在线等待各位高手 有关DATAGRID中的DROPDOWNLIST问题 哈哈,两条三角裤啦!散分! adsl和windows2000 sever的问题 如何获得系统目录下的system路径? 请教一个双机间网卡互连的问题。 如何将 页面的条件转移 和 动态参数传递 结合起来? ftp传送文件 请教一个双机间网卡互连的问题 我在vs.net中使用cdo组件发信,编译出来的程序在没有安装vs.net的机器上报错(装了.net framework) 接着昨天的问题,Process.GetProcess()里的marchinename可以添别人的机器名。 写字板的颜色组合框是怎么做的? 错误代码:80020009??? 十万火急!谁知道怎么看sql都执行了哪些操作! 一个小问题? 哪有mandrake完整版下载? 他今天落荒而逃了!非常兴奋!!散分!!! 各位大虾帮忙,一个很菜的问题 请问如何在388手机上显示超过一屏幕的文本? 用vb6.0做的ftp下载的客户端程序 请问有为SUNPLUS16位机(MIUnSP™)开发平台的高手吗? 几经努力,没有经果.......(#if)真的很难吗? 涨分好机会,我有大问题:用什么方法可以实现——联接 电话网络(有线、无线)与电脑服务器,实现消息即时通信 欢迎多一些高手朋友提供 JAVA开发中的B/S方式,C/S方式到底是什么? 关于delphi中的查找赋值 >>>>>>关于new,delete 的简单问题《〈〈〈〈? 全国各地接吻比赛(想学习经验、姿势的进来) 数据挖掘关联规则算法的原代码能在哪里找到,譬如apriori算法? 请问16个主要颜色的RGB值。 使用过存储过程的大家帮忙呀。。。。。 websphere怎么啦? 救急:query回写 想学C#,有啥好书?? 如何动态地获得一个组件的属性、方法并调用? 请帮我看看这个小的asp程序为什么不能被网页调用?IE说这个网页不能显示 失业,散分!!! 合外力为零时,物体的速度一定不变 这句话对吗? 帮我去一个网名 带有 茹 字 要繁体 带符号 好看的 下列地理事务出现在黄河.a酥油茶吊脚楼蒙古包四合院b碉房拉面马头窑洞c蒙古包坎儿井窑洞京剧 0.01%二氯苯醚菊脂溶液这个真的很关用吗 新课改教学目标与传统教学目标的区别 高层楼房和四合院 蒙古包 竹楼有什么区别要求;用——画出每组中不同于其他三项的一项,并写出理由.1.苗族 汉族 藏族 维吾尔2.清明节 劳动节 端午节 重阳节3.工人 农民 老人 律师4.四合院 呼和浩特那里可以买到“0.01%二氯苯醚菊脂溶液”? 降雪的原因是什么 一道高一宇宙航行物理一物体在某星球表面时受到的吸引力是在地球表面所受吸引力的n倍,该星球的半径是地球的m倍,若该星球和地球的质量分布是均匀的,则该星球的密度是地球密度的( ) 瞬时速度不变没运动,一定是匀速直线运动为什么不是静止呢?打错字了,不变的运动 塔克拉玛干沙漠生成的原因? 几道关于高一物理人造卫星和宇宙的题(选择哦)地球的同步卫星质量为m,离地面的高度为h,若地球半径为R,地球表面出的重力加速度为g,地球自转的角速度为ω,则同步卫星所受地球对她万有 ABCD由一段倾斜直轨道和水平轨道相接,连接处以一小段圆弧来过度ABCD由一段倾斜直轨道和水平直轨道相接,连接处以一小段圆弧来过渡,小滑块在A点从静止状态释放,沿着轨道滑下,最后恰好停 如果合外力方向跟物体的速度方向垂直,为什么物体速度大小不变,方向改变? 关于人造卫星变轨!知道轨道半径越大,速度越小那些但是从椭圆轨道变到大圆轨道这些就不懂了.为什么是向后喷射啊?这不是加速咩?加速轨道半径就缩小了呀?怎么会变到大圆轨道? 一半径为R =25 m的四分之一光滑圆弧轨道,其下端与很长的水平雪道相接,如图所示,滑雪运动员在光滑圆弧轨道的顶端以水平速度v0=5 m/s 飞出,在落到光滑圆弧轨道上时,运动员靠改变姿势进行缓 滑雪痕迹为什么是曲线 人大声说话的声音是多少分贝?如果在室几十个室都大声说话有多少分贝?会损害听神经吗?人大声说话的声音是多少分贝?如果在室几十个人都大声说话有多少分贝?会损害听神经吗? 实践是检验真理的唯一标准!这个唯一性怎么用逻辑来解释证明? 想不通为什么合外力方向跟物体的速度方向垂直,为什么物体速度大小不变,方向改变?这样的话,在竖直方向不是会产生一个5m的加速度吗?为什么大小不变 人说话的声音平均是多少分贝? 鲜蘑菇经晾晒后失去原质量的17/20,干蘑菇10千克是由多少千克鲜蘑菇晾晒成的?列式为: 急急急急,为什么合外力与速度方向垂直速度大小不变那如果用因为合外力在速度方向上的分速度为0,所以只会改变方向来解释,那现在一个物体受到两个互相垂直的力最后的合力大小不就还是 在一次国际城市运动会中,要求运动员从高为H的平台上A点由静止出发,沿着动摩擦因数为的滑道向下运动到B点 瞬时速度保持不变的运动是匀速直线运动 这句话对还是错?瞬时速度保持不变的运动是匀速直线运动 对还是错?为什么? 为了帮助滑雪者登上长200m,高40m的山坡,滑雪场沿山坡铺设了一条直雪道把一位重600N的滑雪者沿此雪道由坡地匀速拉直坡顶需用拉力150N(1)拉力对滑雪者做的功(2)雪道斜面的机械效率 不要中医什么的 如果把中国所有人一天浪费的水集中起来,会不会让塔克拉玛干沙漠变成绿洲呢? 自来水净水器什么牌子好?家用自来水净水器什么牌子好?哪种好? 有什么例子可以说明,如果合外力方向跟物体的速度方向垂直,物体的速度大小不变,方向改变 假设某门课程一学期要留10次作业,每次老师要进行批改,给出分数后还要进行登记.用mfc实现 如果物质放到水里,与水发生反应,产生的物质不溶于水,那该物质算溶解了吗 四合院,屋顶也是平的的平房,窑洞,竹楼有什么功能?还有:冰屋,蒙古包,江南的房子,石板屋的功能.还有:冰屋,蒙古包,江南的房子,石板屋形成的原因. 教师批改作业时为什么在成绩下面划双线? 在2010年温哥华冬季奥运会中滑雪比赛惊险刺激,倾角θ=37°的雪道长L=50m,高h=30m,下端经过一小段圆弧过渡后与很长的雪道相接,如图所示.一滑雪运动员在倾斜雪道顶端以水平速度v0=10m/s飞出,在 滑雪者从A点由静止沿斜面滑下,经一平台后水平飞离B点,地面上紧靠平台有一个水平台阶.如图所示,各接触面动摩擦因数为u,滑雪者从斜面底端到平台速度大小不变(1)滑雪者离开B点的速度. 教师批改作业时为什么再成绩下面划双线 把2008千克含水量为95%的鲜蘑菇凉晒后含水量下降为92%,这时蘑菇的质量是多少千克? 塔克拉玛干沙漠的介绍不要太长, 什么成语,【风】字开头 什么是无意识记忆 如图所示如图所示,高为h=1.25m的平台上,覆盖一层薄冰,现有一质量为60kg的滑雪爱好者,以一定的初速度v向平台边缘滑去,着地时的速度方向与水平地面的夹角为45°(取重力加速度g=10m/s2)求: 匀速直线运动就是瞬时速度不变的运动是正确的吗? 家里喝什么水?好多人家里都是喝的净水,纯净水是经过分离过滤装置的饮用水,一方面滤掉了水中的有害物质,另一方面也滤掉了对人体有益的矿物质和微量元素.儿童和老人身体中钙的需要量30 17.如图所示,连同装备总重力为G的滑雪爱好者从滑雪坡道上由静止开始沿坡道ABC向下滑行,滑到B点时滑雪者通过改变滑雪板角度的方式来增大摩擦力的大小,使其到底端C点速度刚好减为零.已知 若有200g溶脂质量分数为8%的氢氧化钠溶液,电解一段时间后,溶质分数变为10%,则电解水的质量为多少克?跪求 !急需! zn和fe和fecl3为什么不能构成原电池. 塔克拉玛干沙漠里有什么生物?塔克拉玛干沙漠里有沙枣之类的植物吗?有哪种蛇、哪种狐狸、哪种蜥蜴?总之塔克拉玛干沙漠里有哪些生物是危险的,哪些生物是可食的? 芳基硼酸与氢氧化钠水溶液反应吗? 一道奥数题:采了蘑菇10千克,它的含水量为99%,稍经晾晒后,含水量下降到98%,晾后蘑菇重多少克? 请教滑雪爱好者,几个关于滑雪的问题我每次去乔波室内滑雪场,都是滑4个小时,总感觉每次滑到最后的时候就很有感觉了,我说的感觉就是对身体的控制力和那种在雪地随意穿梭的感觉.是不是 韩少华(老师窗内的灯光)还是母亲的奶最养人什么含义 假如东北要是像南方那么暖和就有南方那种气候了,会怎样 同源染色体总是成对存在于生物细胞中”是对还是错?why?但为什么啊? 为什么绿洲一定有水源 上海属于东北方还是西南方? 细胞既有同源染色体,又有染色单体的时期是有丝分裂间期还是减数第一次分裂后期 灯光(老师的智慧) 仿写灯光(老师的智慧) 灯光( )灯光( ) 灯光( ) 《眼睛看陋习——我身边的不文明行为》以他为题目写 一篇初中的五百字~六百字作文.要水平比较好的. 一下细胞中可能同时存在同源染色体和染色单体的是初级精母细胞 2 精原细胞 3 初级卵母细胞 4 第一极体 (不用解释) 5 效应B细胞 6神经细胞 7 根尖分生区细胞 A 137 B12 浙江永康华溪再遭劫 “牛奶河”变“凉日外务省前官员说安倍“积极和平主义”俄希望联合国继续充当和平的主要保障伊拉克又一媒体人员遭杀害德外长因总理手机遭窃听召见美大使 最德外长因总理手机遭窃听召见美大使 最美国上周首次申请失业救济人数继续回落吴士存:《联合国海洋法公约》在南海的中国与中东欧青年政治家论坛在京闭幕澳大利亚山火为军事训练导致 澳国防部伊朗议员:伊朗已暂停提炼纯度20%浓澳大利亚山火为军事训练导致 澳国防部全球最适宜工作跨国公司排行 谷歌名列美一农民发现两副恐龙骨架 有望拍出2澳大利亚灭火消防飞机坠毁 驾驶员被证国考网上报名结束 37个职位报名比例专家称考公务员热反映收入分配、社保制东京举行国际数字博览会 显示器也能卷美媒曝美无人机行动得到巴默许 巴政府伊朗议员:伊朗已暂停提炼纯度20%浓国际社会讨论在南极建立迄今规模最大海协同创新中心落户郑州郑州:双轮驱动大招商“摘星”不是酒店反转求存的根本之道将在金博大举行春节文化活动进取就是不断地超越自己陈新泰书法展开幕网络商品监管中心河南俩小丫入选中国女足猪肉鸡蛋价格下降精彩活动连连看大隗牛肉飘香百年荥阳39名特困幼师获资助情满旅途“文化共享闹新春”昨上线登封打造千亿元家居产业基地金融理财巩义春节设置8处临时市场郑州铁路局官方微视上线新密去年地税收入超12亿元让贫困老乡一起奔小康
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘