Part 1 – Understanding the Problem
In this session we discuss how to create a dropline menu style using the Thesis Horizontal Header Layout and Thesis Nav Menu Plugins. We’ll use both of these plugins and custom code to make the dropline effect work. Here we show how to use of our Header Layout plugin to get the menu to its the correct location before adding basic styling to the menu.
Rick: Okay and so you’re using the Header Layout plugin and the Thesis Nav menu plugin, is that correct?
Member: Yes, that’s correct.
Rick: And you want to create a menu that’s similar to this one here, this compact GMBH site?
Member: Yes, right. That’s correct. Because this is a static HTML site and we want to convert it for WordPress.
Rick: Oh and this is the site you’re going to be converting.
Member: Yes, yes it’s like similar.
Rick: Okay because… but it’s not actually this site, it’s just similar to this site.
Member: Yes, more or less. Yeah, more or less similar.
Rick: Okay well I’m going to show you how to do that with those 2 plugins here. The trick to this is in order for… well, this is going to take a couple of pieces. First is this is going you know, require both of those plugins but we’re going to need a little bit of extra custom code as well in order to make this dropline effect. We can get all the rest of it with the plugin but we’ll have to add some custom CSS to make the rest of this dropline effect work. So it’s not entirely… you can’t entirely accomplish this plugin using my plugins but we can get almost there and then we’ll wrap it up with a little bit of custom code. Does that make sense?
Member: Yes that makes sense.
Rick: I’m just going to dive into it then. I did this recently for a friend, artist friend’s site but we do the same kind of thing where you know, she wanted to be able to drop down and rather than have this stuff just drop down straight over the image. You wanted it to drop down the line above the image. So I just finished doing this once upon a time.
So we’re going to start off just by… I have a site set up to do this here, this site here so we’re going to start by setting this menu up. Right now, it’s set up with one widget column but I’m going to set it up as 2 widget columns so that you know, a logo could be set over here on one side and then this could go on the other side.
Member: Yes, right.
Rick: So we start off in the Header Layout plugin and this is the latest version of the Header Layout plugin and we’re working in Thesis 1.8.5 and WordPress 3.4.1. And so start off in the Header Layout plugin settings and we’re going to have one widget row. And in widget row 1, we’re going to have 2 widget columns. And then once we get those 2 widget columns set up, then we’re going to come over to this top section again. It says nav menu in header and we’re going to say include a navigation menu some place within the header. And then once we’ve done that, it asks us you know, which nav menu do you want to include? And we’re going to include the Thesis Nav Menu and then we’re going to include that in row 1. And actually, we’re going to put it column 1 but we don’t see column 1 yet as an option. So we hit save again and now we have row 1 column 1. We could pick column 2 but we’ll let column 1 be the one we’re going to do.
And then we’re going to… well, we have the option of using the top of the widget column or the bottom of the widget column. And if we hit save to that and refresh this page now, we now have 2… the thing’s divided up into 2 widget columns and we actually have 2 instances of the menu because the menu is currently being placed by the Thesis Nav Menu plugin.
So what we’ll do next then is come over to the Nav Menu plugin here and just turn it off. We’re going to say do not display. Now we’ll style it with this but we just don’t want this plugin to display it. And once we’ve turned that off, we can refresh this.
And we don’t want any widgets below this under… in widget column 1 so we’re actually going to make widget column 1 so it can’t take widgets. And we do that back under header layout and go to widget column 1 settings and then just check to remove the widgets from this widget column. And that way, this doesn’t… well right now, if you go over to Appearance and Widgets, you have a widget area, widget column row 1, widget column 1 row 1, widget column 2. As soon as we check this and save it, you’re only going to have 1 widget area showing up there, if we refresh this now. We just have header row 1, widget column 2 and this section is no longer widgetized. So the only thing that’s in this section is this menu.
So now that we have the menu in its location and this thing kind of roughly configured, the next thing we’re going to do is add the basic styling to this menu. And if we look at our example here, in the example here, sor tof the default state of the menu is a… the current menu has this underlined. If the menu has a drop down then it’s got that little arrow there that you don’t see… I mean, that you see if you hover. And if you hover over it, it has the dark arrow with the black line and then these other things show up. And if you hover over ones that aren’t current then you just get the underline. So this is the current state and these are the standard link states and this one has a special link state because it’s got the little arrow below it. And the hover link, this also has a special hover link state because it has the dark line and a dark arrow and then these have the standard hover states.