Build Your Own Business Website header image

How to Create Multiple Menus with Multiple Drop Down Levels – Part 2 – Create the Drop Down Menu

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is the second video in a tutorial series on how to create multiple WordPress menus with multiple drop down levels. In this session, we show how to create menus with multiple drop downs where some of the top level menu items are not clickable but the items below them are clickable.

Video Transcript

Rick: So then the next thing that we’re going to do is we’re going to make these categories, we’re going to make some of these drop down menus. So we come back over to our Appearance > Menus and in our Category menu, let’s say that we want Apples to be a Primary in Top Level. But we want Green Apples to be under it and Red Apples to be under it and then Yellow Apples, at the moment we’ll make Yellow Apples under it too. So then we’re also going to take single images and we’re going to put that under Nextgen examples.

So now we have our top level items, Bananas, Cherries, Oranges, Apples and NextGen Examples, we hit save. And then we refresh. Ok now, we’ve reduced our Menu and these are now drop downs. Ok, and so now let’s… I’m going to unmute your microphone again. I muted your microphone for few minutes just because there was kind of funny static in the background. But what I understand though is that you want another level and you don’t want that level to be clickable is that right?

Member: I don’t want Bananas, Cherries, Oranges to be clickable and then I need to have two more level below that.

Rick: Right. Ok so the way we’re going to do that is come back over to our Category menu. And we are going to create some custom links. We don’t have to create categories for this we’re just going to create a custom link. And you use that http:// and then pound sign. And then the menu item is let’s say, Washington Fruit and we’ll add that to the menu. And then we’ll do this again and let’s say, California Fruit and we’ll add it to the menu. And then finally, we’re going to say Family adventures with a pound sign and we’re going to add it to the menu.

And then what we do is let’s just take California Fruit appear to the top. We’ll pretend for a moment that Bananas are California fruit and that Oranges are California Fruit. And then we’ll take Washington fruit, and Washington is going to have Cherries as fruit, it’s going to have Apples as fruit. And then Family Adventures is going to have Nextgen as fruit, Ok or as its second level item.

So California Fruit only has one level below it, Washington Fruit has two levels that got Cherries and Apples with Yellow Apples. And then Family Adventures has two levels below it. So if we save this menu and we come back over here and refresh it. Ok, if we click on California Fruit, nothing happens. If you’re on the Carousel page and you click on the California Fruit, nothing happens. You click on Washington Fruit, nothing happens. Right? Nothing happens because that pound sign means that you want to stay on the same page as it happens to be there.

However, under California Fruit you do a Bananas which, or Oranges which you can go to. Under Washington Fruit, you go to Cherries or Apples. And as you can see if you hover to Apples then you have Yellow Apples, Green Apples and Red Apples. And same thing is true with Family Adventures you have Nextgen Examples and then a flyout of sample images. So that’s how the whole three level thing works and it will keep on working right. You can just continue to add more levels.

Well, let’s just pretend that gallery test is a category. You could put gallery test as a subcategory of Green Apples, hit save. Come back over here and refresh that. Come back over to Washington Apples, Green Apples and Gallery test pop out there. So you can have as many levels of menus as you want. And you can make sure these top ones don’t click off anything simply by creating that dummy link which just links to the current page. It’s an actual link but it just links to the current page.

0 Comments… add one
0 comments… add one

Leave a Comment