Drupal 7 Nice Menus Module

By shane
Wed, 2012-12-12 20:53
Daily Dose of Drupal Episode #66

Share with Others

Do you need to add Drop downs to your Drupal 7 website? If so, the Drupal 7 Nice Menus module is a good solution. The Nice Menus module allows you to create menu blocks that can drop down, to the right, or to the left. The Nice Menus module also gives you easy to use theme functions to create and use dropdown menus within your Drupal 7 theme template files (like your page.tpl.php).

In this episode you will learn:

  • How to create a drop down main menu within a Nice Menus block
  • How to use a Nice Menus theme function to create the main menu as a drop-down in your page.tpl.php template file

Welcome to another Daily Dose of Drupal, this is Episode Number 66 today as always I’m Shane, go ahead and follow me on Twitter @smthomas3 or sign up for the Code Karate newsletter. Today we’re going to be going over how to implement and add dropdowns to Drupal 7 website.

There are a bunch of different dropdown modules that you can use to get started but one were going to look at today is the Nice Menus Module. It’s a pretty simple module that’s used in a lot of sites and it gives you the basic structures for the dropdowns and then allows you to go ahead and CSS or Add Style to the dropdowns as you see it fit. So it kind of gives you the basic template of the working dropdown and lets you run with it and make your own design.

So I already have it installed on our test site here because I’m going to come to the modules page and show you that it is installed and we can go ahead and start configuring it. As you can see it’s installed, we’re going to click Configure and ask a few number of blocks that you want, Nice Menus is generally built using blocks so you can drop in a block wherever you want the dropdown menu to show up and it will work and you want to have this check if you want it to fall back to Java Script, works for older versions of Internet Explorer otherwise it tries to use CSS for the dropdowns, it adds a delay and animation speed if you decide to use dropdowns or to use Java Script to use dropdowns so you can change the animation speed to whatever you want, change the mouse delay, you can go ahead and save that.

The next step is then to … well first let’s look at the Menus Structure, I just simply want to show you how it works but it obviously can be expanded out. I have three parent menu links and I have two sub-links in here so what we want is essentially to be able to hover over the home link and have two items show up below it.

So I’m going to show you one option; first option is to use Blocks which is the easiest way to get started. We come down here and you look for this Nice Menus 1 or Nice Menu 2 Block and remember we define that how many blocks we wanted in the configurations. I’m going to go ahead and add this to the header and save it, then I’m going to click on Configure, you select which menu you want to show and in this case I want to show the main menu, you can get a block title, I went ahead and set this as none, Menu Depth; you can show certain number of levels, negative 1 will show all the levels and what kind of style; do you want them dropdowns to pop out from the left, from the right or you want them to dropdown, we’ll go ahead and select down, so I will save this and I will come back to the homepage.

You’ll notice I do have two Menu Items now so … or two Main Menus on my Theme so I could hide this other one by going into Appearance Settings and clicking on or unchecking the main menu, saving it and now I’m down to just one main menu. So then it stops using the main menu from theme, it actually uses this block as the main menu. As you can see the dropdowns work exactly as you could expect, very simple. If you had multiple levels it would drop down and then it would also be able to drop out.

As a quick example; let’s go ahead and show that and see if it does indeed work, you can see it goes ahead and you could have multiple levels, as many menu items that you really would need. Let me go ahead and change that back for now, menu there and I’ll save this but what happens if you want to use the main menus or the primary menu from the theme? Let’s say you didn’t want to for some reason use this block.

I mean in most cases using a block works just fine but if for some reason you want to use the primary links or the main menu from the theme there is a way to do that, I’m going to go ahead and turn this one back on, I am then going to get rid of this block over here, just hide that and now we need to get into the page.tpl.php file, that’s one of the easiest ways to go ahead and get started with it.
So I have a sub theme here so I’m not using the base Drupal Bartik Theme, I actually have a sub theme going so you want to first know which theme you’re using and you’ll have to find the page.tpl.php file in your theme. In my case; I already have this opened here and it’s in my sub theme so this is the page.tpl file, I’m going to find the main menu section.

You can see where it says if main menu I’m going to go ahead and strip out this code here … this php code and I’m going to replace it with a little snippet of a nice menus code that’s going to do what we needed to do to print out the primary menu or the main menu at the dropdown.

So I open it inside the Nice Menus Module there’s a readme.txt file, I would go ahead and take a look at that and it tells you some ideas of how to style or how to use CSS and that’s one thing that is a little tricky if you don’t know how the Menu structure works. So make sure you take a look at that and it’s going to give you some helpful hints, it tells you right in here the basic menu structure but if you scroll down it tells you you can do some advance scheming.

So it allows you to use certain functions or overrides certain functions to theme your menus. So there’s a theme function called Nice Menus Main Menu and we’re going to make use of that. So if you come in to the Nice Menus Module inside Hook Theme you can see there’s a Nice Menus Main Menu and if you’re not a module developer and you’re just trying to get the basic dropdowns, don’t worry about all this, I’ll give you the code and you can drop it in and it should work.

So basically this functions is going to need to take an array of variables of the direction so if you want it down, left or right and the depth, that’s that depth dropdown which negative 1 will show all otherwise you can specify a specific depth if you only want to show two levels for instance or only show one level of dropdowns.

So the first thing I’m going to do is I’m going to declare a variable and as I said before; if you’re not a module developer and you still want to figure this out you can go ahead and copy this code line by line and it should work, you just have to find the If Main Menu section of your page.tpl.php file inside your theme.

So direction; we’re going to set that to Down and Depth we’re going to set that to negative 1, you can change that to Left or Right here, you can change this number to however you want to set your depth as and we’re now going to call a theme function and we’re going to ahead and just grab this here; Nice Menus Main Menu because we are printing the main menu. If you’re using the secondary menu you can grab that one as well and then we have to passed in our variables array, we also need to print this out, so if I save this it should replace this with the Nice Menus Menu, I’ll go ahead and save that and now you can see I have the Nice Menus Menu working, the dropdowns worked just as it did before, its’ sitting in the right place right on the top of this line that goes across and it just works right out of the box.

You will have to of course theme this, it looks a little different but just adding some CSS you can fix that right up and make it look however you want. So that’s it for this time on the Daily Dose of Drupal, I will be back again next time with another episode. As I said before; go ahead and follow me on Twitter if you’re not, alright thank you for watching. Bye!