网站设计

Website development

如何更简明的设计菜单是用户很容易找到和更简单的使用

发布时间：2017-01-13 09:22:17

How to Style Any WordPress Theme’s Navigation Menu

正如它的名字所暗示的，你的WordPress导航菜单是一个意味着你的访客引导他们通过你的网站。这是必要的，因此，你的菜单很容易找到和更简单的使用。然而，在保证用户友好性很重要，你的菜单也需要好看。

本文将提供多种实现一个适合你的网站，你的访问者也呼吁设计方法。我们将向你展示如何手动改变你的菜单使用代码。接下来，我们看看四的插件，可以让这个过程更容易。后，我们将展示我们自己的社区成员使用迪维如何风格菜单轻松过。
让我们跳吧！
如何设计你的导航菜单手动

如果你熟悉的级联样式表（CSS），它是可以改变你的导航菜单手动。做到这一点的方法之一是使用CSS类在WordPress，并添加一个自定义的CSS类，你的菜单项。在WordPress的仪表板、导航外观>菜单。在屏幕的右上方是一个屏幕上的选项–点击此按钮，并从下拉检查CSS类包装

The Screen Options dropdown

下一步，去你想要的风格，点击箭头的菜单项。你会看到一个新的CSS类场，在这里您可以添加一个描述性的类名称：

An expanded item showing the CSS Classes section

一旦你添加了你的课，打保存菜单。从这里，看你的了！通过使用一些自定义的CSS，你可以改变字体大小，颜色，背景，以及任何其他你喜欢的。而这绝对是难的三个选择我们所概述的，手工造型菜单使您可以在一个适合你的网站的独特的外观设计很有创意的。

4大插件帮助你设计你的导航菜单

值得庆幸的是，还有免费供人使用插件而不是手动代码风格的WordPress的菜单感兴趣，很多高级解决方案。你的选择将取决于造型和选择你想要的宽度。这里有一些建议：

1.大的巨型菜单

The Max Mega Menu title image from WordPress.org

大的巨型菜单将自动转换为你的菜单巨型菜单。如果你喜欢传统的“弹出”看，这也是通过插件支持。虽然它不是直观的使用，这种流行的插件提供了丰富的功能，帮助你为你的访问者的风格完美的网站导航系统。你的菜单排列在一个拖放界面，在定型前的几乎每一个方面包括字体大小、背景颜色、图标和转换。

事实上，这种多功能的插件是免费的是一个巨大的奖金。然而，如果你做要解锁额外的功能，如粘性和垂直菜单，你可以升级到高级版为19美元。

主要特点：
提供大型或弹出菜单
支持多个菜单位置
包括的选项以显示WordPress插件。
价格免费更多信息

2.响应菜单

The Responsive Menu title image from WordPress.org

响应菜单是创造美型超直观的插件菜单。接口本身是很容易操控，有免费版本足够的功能，创造一个美妙的设计。你可以自定义颜色和字体，使用背景图像，上传标识，和更多。

主要特点：
包括背景图像选项
支持多达五个菜单水平。
选择菜单选项提供的动画。
价格免费更多信息

3.飞人

The Superfly header

有时相当标准的横向菜单不是每个站点合适。飞人目的是给你一个垂直的菜单，可以显示在网页的两边。有几个选项如何出现包括静态，幻灯片，或全屏幕。你可以选择特征的文本，图标，或代表你的菜单项。后，你还可以为你的菜单添加一个图片作为背景，并添加小工具和短码。

主要特点：
offers模各种菜单。
具有移动和桌面显示控制选项。
支持多达四个菜单水平。

4.ubermenu

The UberMenu header

ubermenu是一个功能强大的插件，使用一个简单的网格系统创建漂亮的导航菜单。其直观的定制，意味着你可以把你的菜单的简单快速。你可以调整每个项目单独，并添加图片，控件，和短码。这个插件也触摸光滑的移动体验，使。

主要特点：
使用内置的网格系统
提供大型或弹出菜单
包括50象形异体字图标

而这里的自由选择有很多的功能，你会发现自己升级到付费版本如果你终想要的东西更先进。如果你不确定你想要什么，你的终设计的样子，它可能是值得尝试的一个免费的插件来体验一下你能做什么。

如何设计你的导航菜单的使用大的巨型菜单插件

Max Mega Menu是一个受欢迎的和功能丰富的插件，是一种优良的自由选择。让我们在两个步骤你需要开展创建菜单一看。

步骤1：创建和组织你的#菜单

11你安装并激活这个插件，你需要使它为你想要的风格的菜单。在WordPress的仪表板，去外观>菜单。在下一屏幕上，选择你想要的风格，点击菜单保存菜单：

A section of the Menus screen with Primary Menu checked

你会看到在一系列领域大的巨型菜单元的盒子，你可以使用这些调整击球前你的菜单的基本行为保存

The Max Mega Menu Settings section

接下来，您可以将项目添加到菜单为正常，并重新安排他们的菜单结构部分。徘徊在每一次你的项目，你会注意到的巨型菜单设置按钮：

The Menu Structure section with Mega Menu highlighted

点击这个可以改变每一个人的项目，如菜单风格（在巨型菜单标签）的外观和行为（在设置标签：S）

A section of the Settings tab

一旦你设置在这里的快乐，你将需要你的菜单风格。

步骤2：#风格的菜单

改变你的菜单的整体风格，你需要离开菜单屏幕在你的仪表盘，点击巨型菜单并选择一般设置。在这里，你可以调整一系列的特点来定制你的菜单的行为：

A section of the General Settings screen

这个菜单主题选项卡使您能够与设计你的菜单有很多乐趣。有几乎无限的选择在您的处置，和一般设置选项卡，这里提供了如箭头样式，领域的阴影，和悬停过渡：

A section of the General Settings tab

这个菜单栏标签可以使你的风格你的导航菜单的主杆。有字体样式，选择悬停颜色，杆的高度，以及更多：

A section of the Menu Bar tab

接下来的三个标签提供的定制功能为您的大菜单，弹出菜单，菜单样式和移动。这里很多选项使您能够定制他们的出现正是你想要的：

A section of the Flyout Menus tab

后，有一个自定义风格标签如果你想添加自定义的CSS来进一步优化设计。然而，如果你是舒适的添加自己的代码，你可以在下一节更感兴趣。

如何设计你的导航菜单分

我们自己的分主题有三导航菜单和很多定制选项。在你开始调整你的设计，你需要创建你自己的菜单在WordPress的管理面板。你可以调整它的细节进一步利用分的主题的选择

在你的仪表盘，选择分菜单和点击主题的选择，然后在出现的屏幕选择导航tab：

The Divi Theme Option menu with the Navigation tab highlighted

在这里，你会看到三个选项卡包含字段自定义菜单。在网页选项卡中，你可以指定你想要的网页被添加到你的菜单…

The Pages screen

…也包括类似的标签：

The Categories screen

后，该一般设置标签有一个对你的行为选项菜单：

The General Settings screen

一旦你与你的菜单的内容和功能的快乐，你可以风格的每一个要求你准确的主题Customizer。从你的WordPress仪表盘，选择分点击主题Customizer。在出现的菜单中，点击标题及导航。这个标题格式屏幕提供了如何菜单文本显示选项，你也可以选择改变你的导航菜单垂直而不是水平。

早在标题及导航标签也有按钮，你的每一个菜单。选择你想自定义菜单，如主菜单栏，然后你会得到一系列的设计方案。例如，在这里为您处理一些颜色选项：

A section of the Primary Menu Bar options screen

你也可以改变字体（包括风格、大小、颜色和间距），随着背景和下拉菜单。你甚至可以选择菜单的动画。

原创不易，未经授权，严禁转载

原文地址：https://www.yzlink.cn/i,72,7048,0.html

上一篇：如何创建一个幻灯片在顶栏广告的红利代码模块

下一篇：体验设计能做什么

您还有可能感兴趣的内容

建站流程

Website development

网站需
求分析
网站策
划方案
页面风
格设计
程序设
计研发
资料录
入优化
确认交
付使用
后续跟
踪服务
+86 10 64758810
18510861135

热门标签

Website development

客户评价

更多+

感谢云智互联，系统提前完成，在整个项目周期内，云智互联对待我们并不像是对待客户，更像是朋友一样，每一次，都能以专业的角度向我们提出更合理、更有效的解决方案，并快速、细致地完成我们的每一个需求，再次感谢以至诚之心做事的云智互联团队。

潘涛
我是东方龙马集团，在云智家做了2个企业官网，服务态度超级好。如果想做网站，选择他家一定不后悔。性价比高，服务态度好。值得你的信赖！

谭娇
技术好，设计精良，操作便利，很专业！配套的服务和后续的服务都很好,网站封面堪称精品，运行方便，后台操作的简单。技术还会耐心教我,很好的云智互联（北京）科技有限公司，建站很不错的。

陈曦
不错，价格比较合适，重点是响应速度蛮快，有什么问题都会马上给你解决，公司很满意，因为他们都是针对每个项目建了相应的讨论组，有问题可以再里面提出，人员分工到位，解决问题很及时。

张经理