选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

超大导航下拉菜单设计模式

今天为大家分享的是超大导航下拉菜单设计模式,它是高容量链接网站的典型解决方案。一下每一种模式都是通过精心挑选再加上在线实例来展示,如果您的项目需要一个超大导航下拉菜单设计,那么你要看看这篇文章。

1.超大导航设计模式和动画

该类型菜单包含一些图文结合的内容,典型的下拉菜单都依赖于JavaScript多年。CSS3是一个较新的方法,也被应用于大型的下拉菜单。你所期待的模式与动画和设计风格的一致性。

1-1.Mashable

超大导航下拉菜单设计模式mashable-dropdown-meganav-menu

Mashable是一个社会媒体杂志在线,它的布局是完全响应,菜单是建立在占据屏幕的100%。它可能不是最经典的例子,但一致性取代空想在UI设计领域。

1-2.Polygon

超大导航下拉菜单设计模式polygon-dropdown-mega-nav-thumbnails

另一个伟大的在线杂志是Polygon,具有非常相似的动画。在切换不同的内容样式时,它们的导航也占用了100%的屏幕。

2.多级菜单展示

真正的大的下拉菜单需要包括分层导航。这会发生在你有链接,包括子链接,需要在菜单中保留足够的空间,以显示他们在适当的时候。

2-1.tutsplus

超大导航下拉菜单设计模式tutsplus-dropdown-flyout-menu

一个最简单的例子,可以发现在tutsplus当你将“免费教程”链接。每一个教程类包括许多子类,可以快速选择适合用户的链接。

2-2.Walmart

超大导航下拉菜单设计模式dropdown-walmart-products-list-menu

一个更详细的例子是Walmart下拉式导航。本公司提供这么多的产品,每个部门需要包括一个弹出菜单。此菜单依次包含几个子类别与示例产品。

3.下拉菜单图标展示

3-1.NanoMag ThemeForest

超大导航下拉菜单设计模式nanomag-premium-wp-theme-dropdown

看一看NanoMag ThemeForest演示。它使用一个水平导航与向下指向箭头组成,这些箭头暗示了一些事情会发生在这个链接下面。

3-2.Nexus

超大导航下拉菜单设计模式Nexus

谷歌Nexus菜单效果,它有着非常好的滑动效果来展现菜单的全名,当鼠标悬停在菜单图标上市,侧边栏的图将会展示出来,鼠标移动到侧边栏菜单时展现出菜单的名称。

4.通过点击事件来展示二级菜单

4-1.Microsoft

超大导航下拉菜单设计模式microsoft-dropdown-nav-ui-website

一些开发人员更倾向于改变他们的界面设计,更多的交互作用。微软的主页使用下拉导航菜单的巨型顶部导航栏。

5.不同的下拉菜单布局

动态导航菜单可以包括不同的媒体,如缩略图,网格和块级别的链接很多。这些不同的表现看起来很好,但可能不适合所有类型的内容。

5-1.Food Network website

超大导航下拉菜单设计模式food-network-mega-navigation-dropdown

Food Network website有一个美丽的巨型菜单,每一个主要的链接都在导航。但每个下拉菜单是一个独特的结构联系,有不同的缩略图,和列表的样式。

5-2.Best Infographics

超大导航下拉菜单设计模式best-infographics-menu-dropdown-nav

Best Infographics展示一些下拉菜单都是普通的下拉菜单–没有大型导航,只是简单的文字。但是其他的下拉菜单是全尺寸水平巨型菜单缩略图和一切。

云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。