In this session, we show to add an unordered list for a vertical navigation menu then we place it in a text widget.
[This post contains video, click to play]
Image may be NSFW.
Clik here to view.
Video Transcript
Well, I looked through most of the videos on the plugins. I’m trying to work with banner and basically, I didn’t get to the Advanced Navigation Menu video. Going back to your plugin and then the Simple Navigation Menu, can those be combined to put an image on the left and on the right and put navigation that’s vertical?
Rick: No. There’s no way to use the plugin to style a vertical navigation menu. If you want to create a vertical navigation menu, you can and I do have videos on the site that show you how to do that but I don’t have one of my plugins that style that. There’s a little bit of code involved in making that work.
Yeah, okay. Well I’m trying to stay away from that, I don’t know (1:24).
Create a Vertical Navigation Menu using Unordered Links
Rick: You might instead then consider just doing an unordered list of links which is another thing that you could do. You could put that in a Text Widget and it’ll look like a menu. Let’s find a site we can do this on. We need to make sure we go back to the Thesis Theme for this. Look at my plugins for a second and if we just activate this simple header widgets plugin for a moment.
I got a sandbox page and we’re just going to call it the “Menu Item 1” and we’re going to do it like that so it’s an unordered list; “Menu Item 2”, “Menu Item 3” and “Menu Item 4”. Once you’ve created this list, you can link to it so you select the thing you want to be your link text and you click “Insert Link”. If you’re looking to existing content, you can click the link “Existing Content” and select the thing you want it linked to.
Do it again with each menu item so we’re going to link to that, link to that and then link to that. Now we’ve got something that’s going to act like a menu. Go over into the html view and grab the entire unordered list which is from UL to UL and copy that. Go over to “Appearance” and “Widgets”, drag a text widget into one of those widget areas. Let’s say we want it in the left widget area, grab a text widget there, paste that code in and hit save.
Link the Unordered List of Links to Pages
Now what you have is essentially a vertical nav menu. That is you have an unordered list of links that linked off to pages. If we come over and look at the site now, there’s your list of vertical links. Each one of those vertical links, links off to the thing that you linked it to. Does that make sense?
Yeah, I just didn’t catch the very beginning of it, I hate to say that. I didn’t catch the very beginning.
Create a Sandbox Page with the Visual Editor
Rick: Well, if you don’t understand code, what I recommend that you do is create a “Sandbox Page”. If you search the site for “Sandbox Page”, you’ll see what I’m talking about. I recommend you create a “Sandbox Page” and then use the visual editor to create the thing you want to create. What we did was we used the visual editor to create an unordered list of links.
I’ve got our “Sandbox page” and I created this unordered list of links in the HTML view but if we come back over to the visual view, I started typing something and I went up and I made it into an unordered list text.
Yeah, I got you.
Rick: I created a list and then I linked each one of these to this specific page.
Yeah, I got that.
Rick: Then I just cut and paste that text into a text widget and presto! (7:15), you have a vertical nav menu.
Okay.
Rick: That’s what I was trying to suggest. At this point, it’s a lot easier to accomplish this than to try and take a nav menu and make it vertical.
I see. Okay.
Rick: Does that make sense?
Yeah. I think I get most of it. I just need to go back and see a couple of those videos. I see this is possible, that’s the main thing.
Rick; Yeah, it’s easier to do it using just straight HTML rather than trying to use a nav menu if you want to do it vertically. If you want to use a Nav Menu and do it vertically then you need to use a lot more code. It’s absolutely possible but you need to know a lot more in order to make it work essentially.
Right, I got you. Okay. Thanks!
Rick: Okay? You’re welcome.