如果您是在网上购物，则很有可能已经浏览了一个大型菜单。
这是一个巨大的菜单，带有指向网站各个部分和子部分的链接。 它们在内容丰富的网站（尤其是零售网站）中很受欢迎。
如果您经营的是在线商店或其他站点，并且有很多链接供人们浏览，那么大型菜单似乎毫无疑问。 但是吗？
在本文中，我将介绍大型菜单可以改善您的网站的某些情况，以及大型菜单不能改善您的网站的情况。
什么是超级菜单？
大型菜单是一种导航菜单，可以使所有选项同时可见（水平和垂直排列）。 有时它们会分成几部分，有时不会。
一个示例是亚马逊英国网站上的此菜单，该菜单占据整个屏幕：
但是在美国网站上，亚马逊不使用大型菜单，而是使用标准的下拉导航菜单：
这只是表明大型菜单并不总是答案！
大型菜单往往具有：
- 一个或多个大面板，分为多个导航选项
- 使用布局，版式和（有时）图标进行结构化的导航选择
- 一次性显示所有内容，因此用户无需滚动或单击子菜单
超级菜单和用户体验
使用大型菜单的主要原理应该是一个简单问题的答案：
大型菜单是否可以使人们更轻松地浏览我的网站？
您不应该只添加一个，因为它们是最新的好东西。 向站点添加大型菜单时应考虑用户体验（UX）。 如果您的大型菜单将使导航过程更流畅，更直观，请添加一个。 如果不需要，或者您只需要菜单中没有那么多项目，请坚持使用常规的下拉菜单。
在决定是否使用大型菜单时，您可能想问自己另一个问题：
大型菜单会帮助我的网站实现其目标吗？
您可能会认为这是一个模糊的问题，很难回答，但是网站设计和内容的所有方面都应与您网站要实现的目标有关。 这可能是许多事情之一：
- 在线销售产品
- 鼓励人们与您联系以购买您的服务
- 发展一个追随者
- 促进慈善事业
- 建立一个社区
- 获得订户
- 出售活动门票
我相信网站还有更多目标，但这是最常见的目标。 了解您的网站将有助于您准确了解要让用户访问网站中哪些页面以实现您的目标。
因此，如果您希望人们在线购买产品，并且拥有一家大型而复杂的商店，那么大型菜单很可能是您的最佳选择。 但是，如果您有一个非常特定的产品或服务，并且想为此吸引人们进入销售页面，那么大型菜单可能会分散您的注意力。
在决定是否添加大型菜单之前，花点时间考虑一下您希望网站实现的目标，要鼓励访问者在站点中的哪个位置以及鼓励他们这样做的导航方式。
以下是一些大型菜单何时可以改善您的网站的具体示例。
何时使用超级菜单
让我们看一下大型菜单对您的站点有用的一些情况。
1.当用户期望一个
如果您的站点是零售站点，则用户将习惯于查看大型菜单并使用它们来导航商店的部门。
例如，下面显示的John Lewis站点对商店的每个主要部分使用不同的大型菜单。 以下是针对女性服装部分的内容：
人们已经习惯于在大型百货商店中使用网站上的大型菜单，而不会对此感到困惑。 例如，如果我访问该网站寻找礼服，则只需单击一下即可轻松访问该部分。
2.下拉菜单太大时
在某些情况下，一个下拉菜单或一系列下拉菜单将包含太多选项，以至于有损于UX。
Jakob Nielsen和Angie Li进行的一项研究表明，对于大型导航菜单，与下拉菜单相比，大型菜单增强了UX。 这是因为具有很多内容的下拉菜单将要求用户向下滚动或有时向下滚动然后再次向上备份。 这会花费更长的时间，对短期记忆造成更大的压力，并且可能造成混乱。
因此，如果您的站点需要在导航菜单中包含很多元素，那么大型菜单可能会很好地增强用户体验。 但是请确保如果确实使用了一个，则以对用户直观的方式进行结构化，并使用颜色，文本效果和字体等设计提示使其易于浏览。
下面的游戏网站是一系列大型菜单的一个很好的示例，每个菜单都与网站的某个部分相关。 它们使用了空格和文本效果（例如，粗体文本和背景）来使菜单直观且易于浏览。
3.当菜单的设计增强了站点时
有时，您有机会向网站添加不仅仅是文本链接的内容。
如下所示，Moleskine网站的大型菜单有所不同。 除了文本链接外，它还包含一些关键产品的照片，这些产品作为链接以及叠加在它们上面的文本的作用。
这鼓励访客访问这些页面，使大型菜单不仅仅是网站的功能方面，它还可以改善设计并有助于实现销售目标。
何时不使用超级菜单
有时候，您不应该使用大型菜单。 这里有些例子。
1.当您没有很多链接时
如果您的站点没有数百页，那么大型菜单将显得过分杀伤力。 对于一般的小型企业网站或博客，大型菜单只会使访问者感到迷惑-而且看起来也很空。
Envato Tuts +网站使用大型菜单和常规下拉菜单的组合。 对于网站上没有很多链接的部分，正常的下拉菜单可以完成任务，并减少了页面内容：
2.当您的主页仅是链接时
如果您的主页只是一个包含子页面链接的页面，那么您也不需要大型菜单。
英国政府网站就是一个例子，该网站的首页包含一个完整的链接页面：
一旦您进一步导航到该站点，就会有一个左侧的导航菜单，该菜单可以展开：
这也是在用户可能不希望使用大型菜单的情况下不使用大型菜单的一个很好的例子。 例如，大型菜单在公共部门的网站中不如在零售中常见。
3.当您要将访问者引导到特定页面时
有时，您的网站仅设计为出售一种或两种产品或服务，或者鼓励注册邮件列表。
如果是这样，您可能会在首页上放置横幅，将访问者引导至目标网页。
在这种情况下，您希望保持最小的导航。 大型菜单将为访问者提供许多选择，以使他们访问您想要的页面的可能性大大降低。 因此，请尽量减少导航，并专注于将访问者引导至您的目标网页。
社交媒体审查员网站就是一个很好的例子。 现在，他们希望访问者执行以下两项操作之一：注册邮件列表或购买会议门票。 标语反映了其中的第二个，而占据首页顶部的号召性用语则反映了第一个。
如果他们给游客提供了一个大型的大型菜单，这将减少他们做这两件事之一的机会，因此，他们使导航变得简单。
4.在手机上
创建一个在小屏幕上清晰可见的大型菜单将非常困难。 要使其正常工作，您必须使链接变小（这意味着人们将无法点击它们）或引入滚动。 将大型菜单与滚动功能结合使用可能会造成混淆，因为很难知道大型菜单的结束位置和页面内容的开始位置。
最好在移动设备上使用汉堡菜单：在您点击某个符号之前，该菜单是不可见的。 由于符号的缘故，它通常被称为汉堡菜单：三条垂直线看起来有点像汉堡包。
上面精选的John Lewis网站具有这样的菜单。 点击该符号，然后菜单选项在其下方下拉。
向您的站点添加超级菜单
如果您确定大型菜单是您网站的正确选择，则添加菜单最简单的方法是通过插件。
CodeCanyon有很多大型菜单插件供您选择。 一些最受欢迎的是：
- UberMenu是最畅销的大型菜单插件。 它使您可以为站点创建完全自定义的大型菜单。 它包括CSS选择器，可帮助您设计具有字体和文本效果的美观大菜单，并具有多种布局。
- Mega Main Menu使您可以将各种对象类型放入菜单。 因此，如果您想要上面的Moleskine网站这样的图像，这可能会有所帮助。
- Hero Menu的设计易于使用，可通过拖放式菜单构建器帮助您在几分钟内启动并运行大型菜单。
明智地使用超级菜单，它们将改善您的网站
大型菜单可能是改善网站用户体验的好方法。 如果您有一个包含大量链接的大型站点，那么添加一个站点将帮助您的用户导航。 如果您的网站符合要求，请立即尝试添加大型菜单。
翻译自: https://code.tutsplus.com/articles/when-to-use-and-not-use-a-mega-menu-for-navigation--cms-32712