How to Create a Flyout Menu in WordPress

Posted in Tutorials

In this tutorial, we will add a flyout men to the left sidebar of the WordPress “Twenty Fourteen” theme.  The default newly installed Twenty Fourteen theme looks like …

After adding the left flyout menu, it would look like this …

Adding the Flyout Menu

1. In WordPress dashboard, go to “Appearances -> Menus”

2.  Click “Create a new menu”

3. Type “Left Menu” for the “Menu Name”.   Click “Create Menu” button

4. In the Pages panel, click “View all” to see a list of all your pages. Menu typically links to WordPress “pages” as opposed ow “posts”.

5.  Checkmark the pages that you want added to the menu.  And click “Add to Menu” button.

6.  The Twenty Fourteen theme has two menu locations built in: “Top primary menu” and “secondary menu in left sidebar”.  We’ll check mark “secondary menu in left sidebar”

7. and click “Save Menu”.

You now have a left menu …

But it is just a standard menu.  It doesn’t flyout.  To have a flyout menu, you need a two-level menu.  We need to create a page in the second level.

 

Adding a Post to Menu

While a menu typically does not link to post (it links to pages), it can still be done.  For the purpose of this tutorial, we will add a new menu item called “sample post” in the second level under the menu item “sample page”.

The sample post that we will link to is the Hello World sample post that came with WordPress.  The URL for this post is /hello-world/

8. Now go back to the Appearances -> Menus

9.  This time, open up the Links panel

10.  Enter the URL to the sample post and type “Sample Post” for the link text …

11.   Click button “Add to Menu”.

Adding a Second Level Menu

12. In the menu structure, drag the “Sample Post” menu to be a sub-menu under “Sample Page” menu item.  See how it is indented in?

13.  Save menu and view the site…

See how the “Sample Page” has a right arrow to indicate that it has a sub-menu.  As you hover over the menu, the sub-menu flies out.

Adding Multi-level menu

You can add additional sub-menus …

And you get a multi-level menu like this …

 

---