Let’s go to the Skin Editor now and use this multilevel drop down menu. But before we do that, I want to give you a little preview of it.
Preview the Drop Down Responsive Menu
This is the menu here and what this menu does is it creates this drop down with this little arrow that does something special in mobile devices. If we come over here to the Responsinator, here’s what it does. It collapses that menu down into this bar and when you click on the menu button, now you get a drop down menu and it can’t be a multilevel drop down menu.
Let’s just go to a page where I don’t actually have that menu installed, here’s what our menu looks like. And when you land on something that drops down it doesn’t necessarily work very well. Now it seems to be working okay here but the menu, just by happenstance, works okay like this. Generally speaking, it doesn’t actually work okay or if you’re not lucky, it doesn’t work okay.
So really, this other little responsive menu is really the cool menu. It doesn’t take up any space until you need it and you can expand the drop downs without interfering with anything else. So this is the menu that we’re going to install.
Create the Box for the Responsive Menu
And we did install that. We created the box. Now what we’re going to do is swap out the menu. And so I’m going to come down here to add boxes and I’m going to call this responsive menu and add the box. And then I’m going to shift drag it all the way up to the top menu area then I’m going to shift drag my top menu out and drop it. And then we’re going to look at our choices here.
When we open up the responsive menu, what we have here is the choice of either div or nav for our HTML tag. I’m going to choose nav. If you have multiple menus that you want to style separately, you can give them a class. But I’m going to only use this menu on the top so I don’t need to give it a class. It will automatically assign the right class to it if I don’t put something in here. And then I can pick which menu I want to display. I’m going to display the main menu.
Add BYOB Multilevel Drop Down Responsive Menu Styles Package
Now let’s save this template like this and you’re going to see that it breaks the site a bit because our package hasn’t been added to the skin yet. So now what we have to do is come over to our css and add that package. And again, we have this choice of BYOB multilevel drop down responsive menu styles.
We’ll add that package and the name here… we’ll just call it responsive menu and the reference will be responsive menu. And if you wanted a different style, you can have as many of these styles as you want and as many responsive menus as you want. If they’re going to have different styles, they need to have different selectors. And so this is the automatic selector but you could change it to the one that you created otherwise and that will work as well.
Let’s hit save here and then add it to our skin and see what it looks like now. It’s taking some automatic styling, right? If you don’t set any options at all, I wanted to create an automatic style that nevertheless, worked right out of the box. And so that’s kind of what happens here. Actually, what I really wanted was something that looked fine inside of Thesis Classic right out of the box. But obviously, it’s got problems until we add some styles to it.
Set Package Options
So let’s see, let’s save that css. Now let’s go set some options. The options are very similar to the regular menu options. That is you can set fonts, links, padding and margin and there are a few extra things like for example, our toggle menu. Our toggle menu is the menu that clicks open and closed on the responsive bit.
Setting Colors and Font Colors
So you can set its color and its font color. You can also set font settings and things like that. In order to do that we have to come back over here and look at our top menu. Looking at our top menu options, we have our font of Arial 16 pixels. We did it all uppercase with one pixel letter spacing. So let’s do that first. So font settings will be Arial 16 text transform uppercase letter spacing 1.
Then we can come back over to our top menu and get our colors. So for our links, we have a text color of fff. No text decoration but a background color of BC1. And our hover links, our BC2. So let’s do that. On the top menu, the background color will be white. Oh no, I’m sorry, BC1 and color will be white, fff. And then the link settings, links text color will be fff. Default will be none. Background color will be BC1. Hovered links is still fff. Text decoration is still none. Background color is now BC2.
We can save that, see what it looks like. Okay so we’re getting somewhere now closer to what that menu is supposed to look like.
Then we open that up, come over and link settings. I think current links, we left alone and current parent links we left alone so we’ll do the same thing. We don’t have any more link settings.
Menu Item Padding
Menu item padding we said top was… we said 10, 20, 10 and 20. And the submenu width was 222. So we come over to our responsive menu and padding. We can say 10, 20, 10, 20. And then the submenu width was 222. Hit save and now we have a nice, wider drop down here.
Menu Margin and Position
And then we have a couple of other things that we can choose to style. We can use this overall menu margin to move the menu in position. So if this is not exactly where we wanted it, we can add some top margin or bottom margin to move the menu around in order to get it exactly where we wanted it.
The separating border color shows up in this drop down section right here when you drop down that little line right there as a separating border color. And while it’s not particularly critical on this, it’s actually quite important over here. When you click on that, to have those little lines, I think, is quite useful. So you can set a color for that. If you don’t set a color, it’s just going to be black.
Menu Item Line Height
Sometimes, your menu items are going to be more than one line tall. For any number of reasons, you might force it to be more than one line tall or it may just be too long and it jumps down to a second line. And when that happens, what would normally happen is that the two line menu would be taller in height than the one line menu piece. So this gives you the opportunity to set an absolute height for the top menu item so that if there are two lines, the one line ones will be as tall as the two lines so it looks right.
Submenu width is fairly self-explanatory. Submenu color exists because you could choose to make, essentially, the background colors of your menu entirely transparent which often works just fine for the main menu but doesn’t work well at all for a drop down menu because the drop down menu often is covering something that’s below it.
And so you need to have some kind of background color for that submenu. So you can also just change the submenu color here if you chose. It doesn’t have to be the same color as the rest of the menu, if that’s the way you want it. Or if the rest of your menu is transparent then you can give the submenu a color.
Drop Down Arrow Color
And then the final choice is the drop down arrow color. You know, on a light menu, this arrow doesn’t look very good. The light arrow that I’m using doesn’t look very good. So if you swap, if you check this, you’ll end up with a dark arrow. And so that’s what the dark arrow looks like, right? And so it just depends on your color scheme, whether or not you want a light arrow or a dark arrow. But you can make that choice simply by clicking that button. Now we’re going to leave it as a light arrow. Hit save, save css.
Add the Menu to All the Templates
One thing to note of course, is that this only exists right now on our front page. So we need to go to our other templates and add this to our other templates as well. If we want to get rid of this style of menu entirely, we could shift drag it down to the delete box and then shift drag the responsive menu up and hit save the template.
Now that only adds the responsive menu to this template but it’s going to remove the other menu from every template because I deleted it. See, that’s now empty so just shift drag the responsive menu up. Save that template, grab our page. Save it, do it in the archive and in the custom template and we’ll be good.
Now we should have this thing working just right. We do. We’ve got it everywhere and now our menu is working properly.