莆田网站开发:如何为WordPress主题的导航菜单设置样式

2019.04.29 |
标签

顾名思义,你的WordPress导航菜单是你的访问者引导他们通过你的网站的一种方式。因此,至关重要的是,您的菜单很容易找到,甚至更容易使用。然而,尽管确保用户友好是很重要的,但您的菜单也需要看起来很好。

莆田网站开发这篇文章将提供各种方法来实现适合您的网站的设计,也吸引您的访问者。我们将首先向您展示如何使用代码手动更改菜单。接下来,我们将查看四个插件,这些插件可以帮助简化这个过程。最后,我们将向我们自己的社区成员展示如何使用Divi来轻松地调整菜单的样式。

我们直接跳进去!

如何手动设置导航菜单的样式

如果您对层叠样式表(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

响应菜单是一个超级直观的插件,创造美丽的风格菜单。界面本身非常容易导航,并且在免费版本中有足够的特性来创建一个奇妙的设计。您可以自定义颜色和字体,使用背景图像,上传徽标等。如果你没有找到你需要的一切,你可以用14.99美元升级到高级版。这将解锁其他功能,如更改预览和其他动画。

主要特点:

  • 包括背景图像选项。
  • 最多支持五个菜单级别。
  • 提供菜单动画选项的选择。

价格:自由更多信息

3. 超完美

The Superfly header

有时候,标准的水平菜单并不是最适合每个站点的。超完美设计为您提供一个可以显示在页面两侧的垂直菜单。它的显示方式有几个选项,包括静态、幻灯片或全屏。您可以选择使用文本、图标或两者来表示菜单项。最后,您还可以添加一个图像作为菜单的背景,并添加小部件和短代码。

主要特点:

  • 提供各种菜单模式。
  • 有显示控制选项的移动和桌面。
  • 最多支持四个菜单级别。

价格: $22 | 更多信息

4. 乌伯梅努

The UberMenu header

乌伯梅努是一个强大的插件,它使用简单的网格系统创建漂亮的导航菜单。它的直观定制意味着你可以快速和简单的风格你的菜单。您可以单独调整每个项目,还可以添加图像、小部件和短代码。这个插件也是一个平滑的移动体验的触摸功能。

主要特点:

  • 使用内置网格系统。
  • 提供超级菜单或飞出菜单。
  • 包括50

    字体太棒了

    图标。

价格: $19 | 更多信息

虽然这里的免费选项有很多特性,但如果您最终想要更高级的东西,您可能会发现自己升级到了付费版本。如果你不确定你想要你的最终设计是什么样子,它可能是值得实验的免费插件,以获得什么感觉,你可以做。

如何使用最大梅加菜单插件

MAX Mega菜单是一个受欢迎和功能丰富的插件,是一个极好的免费选择.让我们看看创建菜单需要执行的两个步骤。

步骤1:创建并组织菜单

一旦你安装和启动插件,您将需要启用它的菜单,你想要样式。在WordPress仪表板中,转到容貌 > 菜单。在下一个屏幕上,选择要样式的菜单,然后单击保存菜单:

A section of the Menus screen with Primary Menu checked

然后,您将在最大梅加菜单元框,您可以使用这些来调整菜单的基本行为,然后再点击。保留:

莆田网站开发

接下来,您可以将项目按常规方式添加到菜单中,并在菜单结构部分。一旦您悬停在每个项目上,您将注意到超级菜单设置按钮:

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以进一步完善您的设计。但是,如果你轻松地添加您自己的代码,您可能会对下一节更感兴趣。

如何在“导航”菜单中设置样式迪维

我们莆田网站开发自己的Divi主题三个导航菜单还有大量的定制选项。在你开始调整你的设计之前,你需要创建菜单在WordPress管理面板中。然后,您可以通过使用Divi的主题选项.

在仪表板中,选择迪维菜单并单击主题选项,然后在结果屏幕中选择通航标签:

The Divi Theme Option menu with the Navigation tab highlighted

在这里,您将看到另外三个选项卡,每个选项卡包含用于自定义菜单的字段。在选项卡,您可以指定如何将页面添加到菜单…中。

The Pages screen

…此外,还有一个类似的选项卡用于类别:

The Categories screen

最后,一般设置选项卡还为您的菜单行为提供了几个选项:

The General Settings screen

一旦您对菜单内容和功能满意,就可以在主题定制器。从WordPress仪表板中,选择迪维然后点击主题定制器。在结果菜单中,单击标头与导航。这个标头格式Screen为菜单文本的显示方式提供了选项,您还可以选择将导航菜单更改为垂直菜单,而不是水平菜单。

回到标头与导航选项卡上还有每个菜单的按钮。选择要自定义的菜单。主菜单栏,您将得到一系列的设计选项。例如,下面是您可以使用的一些颜色选项:

A section of the Primary Menu Bar options screen

您还可以更改字体(包括样式、大小、颜色和间距),以及背景菜单和下拉菜单。您甚至可以选择菜单是如何动画的。

结语

虽然你的导航菜单必须是直观的和用户友好的,这也是很重要的,它看起来很棒。如果您的菜单样式是事后考虑,它可能会损害您的网站的整体外观。

在WordPress中你的菜单样式有很多种选择,这都取决于你的主题和编码知识。在本文中,我们向您展示了三种设置导航菜单样式的方法。让我们快速回顾一下:

  1. 迪维

    如果您是Divi用户,则可以使用

    主题选项

    主题定制器

    标签。
  2. 使用插件:

    有一些优秀的导航菜单插件可用,如

    最大梅加菜单.

  3. 用代码手动设置它的样式:

    如果您对代码很满意,可以添加

    CSS类

    并使用自定义CSS针对它们。


相关推荐

莆田公司网站设计:如何将标志添加到额外的辅助菜单中
 

莆田公司网站设计:如何将标志添加到额外的辅助菜单中

不久前,我创造并放弃了我们的第一个免费额外类别布局包。反应很好,所以我已经开始了我的下一个工作:一个视频博客的额外类别布局。在创建它的过程中,莆田公司网站设计意识到我在演示站点上做的事情可能是社区也想...
2019.04.29
莆田制作网站:如何从WordPress文章中删除作者和日期信息
 

莆田制作网站:如何从WordPress文章中删除作者和日期信息

默认情况下,大多数WordPress主题在已发布的博客文章中显示一组元数据。大多数情况下,作者和日期是突出的,类别和标签也经常出现。这个信息当然是有用的,但是在某些情况下,您可能希望删除作者和日期。(例如,较...
2019.04.29
莆田网站开发:如何为WordPress主题的导航菜单设置样式
 

莆田网站开发:如何为WordPress主题的导航菜单设置样式

顾名思义,你的WordPress导航菜单是你的访问者引导他们通过你的网站的一种方式。因此,至关重要的是,您的菜单很容易找到,甚至更容易使用。然而,尽管确保用户友好是很重要的,但您的菜单也需要看起来很好。莆田网...
2019.04.29
莆田网页设计:15个拼贴制作工具,用于创建有趣的视觉元素
 

莆田网页设计:15个拼贴制作工具,用于创建有趣的视觉元素

拼贴制作工具使您能够产生美丽的视觉创作,显示蒙太奇的照片或图形在一个图像。您可以轻松地添加效果,过滤器,文本,和更多,以产生惊人的拼贴在任何时候。这些突出的图片可以在整个网络上使用,以推广您的网站,吸...
2019.04.29
莆田网络公司:4布局设计提示优化您的Divi Web内容
 

莆田网络公司:4布局设计提示优化您的Divi Web内容

布局设计并不像在页面中添加文本和图像那样简单,而是希望得到最好的结果。一个出色的布局可以帮助吸引观众,并引导他们找到你内容中最重要的部分。值得庆幸的是,您可以使用大量的策略来简化设计过程。在本文中,我...
2019.04.29
莆田做网站:如何有信心地把一个完整的网站交给你的客户
 

莆田做网站:如何有信心地把一个完整的网站交给你的客户

辛苦的工作结束了。您已经编写了代码,您已经对…进行了设计调整你客户的网站准备好了。只剩下一件事要做…把完整的网站交给你的客户。但…你怎么做到的?你只是给他们发电子邮件,告诉他们用户名和密码,然后说:“...
2019.05.06

最新文章

莆田做网站:如何有信心地把一个完整的网站交给你的客户
 

莆田做网站:如何有信心地把一个完整的网站交给你的客户

辛苦的工作结束了。您已经编写了代码,您已经对…进行了设计调整你客户的网站准备好了。只剩下一件事要做…把完整的网站交给你的客户。但…你怎么做到的?你只是给他们发电子邮件,告诉他们用户名和密码,然后说:“...
2019.05.06
莆田网络公司:4布局设计提示优化您的Divi Web内容
 

莆田网络公司:4布局设计提示优化您的Divi Web内容

布局设计并不像在页面中添加文本和图像那样简单,而是希望得到最好的结果。一个出色的布局可以帮助吸引观众,并引导他们找到你内容中最重要的部分。值得庆幸的是,您可以使用大量的策略来简化设计过程。在本文中,我...
2019.04.29
莆田网页设计:15个拼贴制作工具,用于创建有趣的视觉元素
 

莆田网页设计:15个拼贴制作工具,用于创建有趣的视觉元素

拼贴制作工具使您能够产生美丽的视觉创作,显示蒙太奇的照片或图形在一个图像。您可以轻松地添加效果,过滤器,文本,和更多,以产生惊人的拼贴在任何时候。这些突出的图片可以在整个网络上使用,以推广您的网站,吸...
2019.04.29
莆田网站开发:如何为WordPress主题的导航菜单设置样式
 

莆田网站开发:如何为WordPress主题的导航菜单设置样式

顾名思义,你的WordPress导航菜单是你的访问者引导他们通过你的网站的一种方式。因此,至关重要的是,您的菜单很容易找到,甚至更容易使用。然而,尽管确保用户友好是很重要的,但您的菜单也需要看起来很好。莆田网...
2019.04.29
莆田制作网站:如何从WordPress文章中删除作者和日期信息
 

莆田制作网站:如何从WordPress文章中删除作者和日期信息

默认情况下,大多数WordPress主题在已发布的博客文章中显示一组元数据。大多数情况下,作者和日期是突出的,类别和标签也经常出现。这个信息当然是有用的,但是在某些情况下,您可能希望删除作者和日期。(例如,较...
2019.04.29
莆田公司网站设计:如何将标志添加到额外的辅助菜单中
 

莆田公司网站设计:如何将标志添加到额外的辅助菜单中

不久前,我创造并放弃了我们的第一个免费额外类别布局包。反应很好,所以我已经开始了我的下一个工作:一个视频博客的额外类别布局。在创建它的过程中,莆田公司网站设计意识到我在演示站点上做的事情可能是社区也想...
2019.04.29

热门推荐

选择您希望莆田网站设计成品的风格偏好,让我们通过精确的分析与筛选,为您推荐合适的版式布局,
为此,您可以节省最基本的沟通时间,
让我们把有限的时间,充分的用在对行业的分析及您企业网站建设的自身分析上吧
联系电话 400-6065-301

微信咨询 寒总监