In this session we show how to create a vertical dropdown menu in Thesis 2 using the jQuery Accordion Menu Widget plugin. We show where the menu is getting it’s styling and then how to change the menu class in the widget so that it has its own styling rather than the styling of the main menu.
We’re going to answer a question that was posted on the forum this morning about how to create a vertical dropdown menu in Thesis 2.0. And the member who asked this question was attempting to use a specific plugin and he was finding that it wasn’t working. So I’m just going to show you how to do that right now.
And so I’m just going to come over to this site that I just set up. This is a basic default installation of Thesis 2.0. And so what we’re going to do is come over here to the dashboard, go to add new plugins and search for the jQuery Accordion menu widget. And then when we found that, we’ll go ahead and install it. Activate the plugin.
And with this activated, all we have to really do is just come over here to the widgets panel and grab the jQuery and accordion menu and drag it over. I have the main menu already set up. I’m not going to give it a title. I’m going to set it so that it drops down on hover. And we’re going to auto close and open menus. We will auto expand based on the current page item. I’m going to give it a class of sidebar menu. If you leave this blank, it’ll use a class of menu and if you don’t change the default Thesis menu stuff then… well actually, I’m not going to do that yet. I’m going to just show you what this looks like first. I’ll give it a 4 second delay, animation speed normal. I won’t give it a graphite skin and hit save. Come over and refresh our page. Now we’ve got this widget in here.
Now the problem with this widget is that it is borrowing some of the styling from the Thesis nav menu up here or the menu that just came pre-installed in the skin. And if you want to understand issue then come over here and let’s just click on the skin editor for a second. if you look at the nav menu and the HTML editor, you’ll see that it has a class of menu. And then if we come over to the CSS section and look in the packages and look at the menu package which is a horizontal dropdown menu package, if we click on that, you can see the selector is a class of menu. So this style that is contained inside of this horizontal dropdown menu package is styling anything with a selector of… or the class of menu.
So what we have to do then is come back over to this and change this state to sidebar menu which now changes the class of the menu as it’s inserted. Let me hit save again and now, when we refresh this… let’s see, view our site. Now it doesn’t take any of the styling of this here. And so now you get the nice little horizontal drop down thing going on.
So obviously, it’s really simple to do this and really, the only real trick to it is making sure that there’s not a conflict between the class of the menu because Thesis automatically starts off with class menu. And if you don’t specify anything, that’s what this widget does as well. So it’s a little menu system for people who want to do a vertical menu.