Drupal 7 Menu Attributes Module

By shane
Thu, 2012-11-08 23:58
Daily Dose of Drupal Episode #47

Share with Others

If you are building a Drupal 7 website and need to target an individual menu item for some JQuery or CSS code, the Drupal 7 Menu Attributes module can help. The Menu Attributes module allows you to add CSS classes, ids, title attributes and more to your menu items.

In this episode you will learn:

  • How the Drupal 7 Menu Attributes module can be used to add CSS or Jquery to target individual menu items by looking at a practical example
  • How the Drupal 7 Menu Attributes can configure the id, class or title attributes of an individual menu item

Welcome to another Daily Dose of Drupal, today we’re on Episode Number 47, as always I’m Shane, you can follow me on Twitter @smthomas3, you can also go to codekarate.com and make sure you sign up for the newsletter, also check out the other videos, we have a really cool guess post the other day so check that out as well, you can also find me on Google + if you’re interested in that kind of thing but today we’re going to be talking about a module called Menu Attributes and it’s a very simple module but it’s pretty damn cool and it makes you or allows you to do some pretty cool things with menus on a Drupal website.

One example of what you may need to do is if you look at the beginner media site you can see that over here is just a standard Drupal 7 menu but each menu has a different icon and you notice there’s also some slight J query effect on it as well but each of those menu items has a unique class which allows you to add that icon onto the actual menu item and that’s all done through the Menu Attribute Module.
So we’re going to take a look very briefly of how you can do that; we’re going to hop over to our test site and I’m going to add a basic page just so we can have a couple of different menu items. Go ahead and provide a menu link, leave it in the main menu and we’ll give it a little bit bigger weight.

As you can see I now have two menu items and what I’m going to do is I’m going to give each one of these a class eventually and go through what the Menu Attributes can do. So I’m going to hop over to my command line and go to Drush and I’m going to download the Menu Attributes Module, I’m also going to enable it. Now that it has been downloaded and enabled I’m going to hop over to modules page just to take a look and I’m going to go ahead and click on Configure.

You may also need to set the permissions depending on who you want to be able to use this of course. So I’m going to select the course for the main links, is Main Menu and if there are secondary links you can select that as well, you can enable a title attribute, the idea attribute and you can also provide defaults to this as well just so if you want to default everyone to something specific and as you can see there’s a whole bunch of different options here that you can basically turn on and then enable and what this is going to allow us to do is we can come into your Structure, go to Menus and we’re going to go to List Links on the Menu, I’m going to go ahead and click Edit on Home and here I can give it a title; so we’ll go ahead and say Code Karate Home, an ID; we can give it any type of ID we wanted, we can give it a class if we wanted to say if this was some type of … I’m just going to give it a name class so just you can see that it works. If you had a grouping of specific menu items that you want to display a certain way, of course you could use classes so you could reuse them multiple times.

Obviously the ID needs or should be unique in order for it to work correctly; you could put styles if we wanted to open a new window we can set that in there. So as you can see it’s all … you can also put a keyboard shortcut which is kind of neat, we’re not going to go through that right now.

So as you can see it’s pretty self explanatory, pretty basic, we’ll go ahead and we’ll edit the test page as well, we’ll go ahead and just add those things and we’ll go ahead and say this one is we want to open in a new window, so we’ll save that and we’ll come back to the homepage and we will open up our developer toolbar down here and we’ll take a look.

So as you can see there’s an ID Code Karate-Home, the class is a main class, it’s also active because we’re on the homepage, we can also go into the next menu item and you can see there’s a test page menu as a main class which is the same that we provided and also has a target blank. So if we click on this it’s going to open in a new window. As you can see it’s very … it’s a very basic module but with doing this allows you to have a finer grain control over how we want to display and individual menu item.

This way you’re not limited to making every single main menu item look identically, you can go ahead and add these extra classes or ID fields so you can add icons or animations or anything like that that you need to using J query or CSS to target an individual menu item.

That’s it for this time on the Daily Dose of Drupal and we will be back again tomorrow with another cool module to take a look at and we will go from there. Thanks again for watching the Daily Dose of Drupal, see you next time.