Mega Menu

Estimated reading: 2 minutes 15 views

创建超级菜单Mega Menu

简介 超级菜单为您提供了为您的网站创建时尚菜单的灵活性。下面的文章将引导您创建一个超级菜单。要了解您的超级菜单中可用的所有选项的综合指南,请查看我们关于 Menu widget 的文章。

创建超级菜单需要激活几个实验功能。这些功能包括:

  • Flexbox Containers
  • Nested Elements
  • Menu

注意 激活这些功能将用两个新的小工具替换 Nav Menu widget – WordPress Menu widget(其功能类似于 Nav Menu 小工具)和 Menu widget。

创建超级菜单

 提示 您可以在页面的任何地方放置菜单,但它们通常放置在页头和/或页脚。在下面的示例中,我们将在页头中创建一个超级菜单。我们将使用 Bread Bakery 网站工具包。

创建超级菜单的步骤:

  1. Select create a new header using the Theme Builder.
    The menu widget Create a mega menu 9
  2. Drag the Menu widget to the header’s container (you could also add a new container to the header.)
    image 12 Create a mega menu 11
  3. Our menu has three top-level menu items. To create them, Items 1-3 need to be replaced.
  4. In the Content tab, click Item #1.
  5. In the Title text box, type in Home.
    image 13 Create a mega menu 13
  6. Now we need to link the menu item to the Home page. You can put in the URL of the Home page, but it’s best practice to use a dynamic link.
  7. Click the dynamic tag icon.
    image 14 Create a mega menu 15
  8. For the Dynamic link choose Site>Internal URL
  9. Click Internal Link.
    image 15 Create a mega menu 17
  10. From the Type dropdown, choose Content.
    image 16 Create a mega menu 19
  11. Under Search and Select, start typing the name of the page you’re looking for – in this case Home. Select it when it comes up.
    image 17 Create a mega menu 21
  12. Repeat this for the Our Breads and Our Story pages.

The header looks like this:
image 18 Create a mega menu 23

Adding a design element

You can spruce up the menu by adding a design element.

  1. In the Content tab, under Menu Items, select Home.
    image 19 Create a mega menu 25
  2. Click the Dropdown Content switch. This switch is what turns the menu into a mega menu, allowing you to add all kinds of content to your menu items. By default, an arrow icon will appear next to the item.
  3. Click Home on the mega menu. The arrow next to the item will turn down and a content area will open up below the menu.
    image 20 Create a mega menu 27
  4. Drag an Image Widget into the content area.
  5. Select an image that will appear when a user hovers over the menu item.
    image 21 Create a mega menu 29
  6. Close the content area by clicking on the arrow.
  7. Repeat the above steps with the Our Bread and Our Story items.

By default, these images will appear when visitors hover over the menu items. You can’t see this while editing so you’ll have to preview the page to see the mega menu in action.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share this Doc

Mega Menu

Or copy link

CONTENTS