Drupal 7 Special Menu Items

By shane
Sat, 2013-03-02 23:57
2 comments
Daily Dose of Drupal Episode #119

The Drupal 7 Special Menu Items module allows the adding of placeholder and separator menu items.

In this episode you will learn:

  • How to use the Special Menu Items module to create a placeholder menu item
  • How to use the Special Menu Items module to create a separator menu item

Thanks to Drupalize.me for sponsoring this episode of the Daily Dose of Drupal.

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 119 and we’re going to be going over the Special Menu Items Module. The Special Menu Items Module is a simple module that allows you to add non-standard menu items inside your Drupal 7 site.

Non-standard menu items could be something like a separator such as a horizontal rule or a couple of dashes, it can also something like a container which isn’t really a link but allows you to have items inside of that container that are links. Before we get started; as always I’m Shane Thomas, you can follow me on Twitter at smthomas3, find me on Google + and go to codekarate.com and sign up for the newsletter.

Today’s sponsor is drupalize.me. If you haven’t not check them out yet you really need to do so. They have a few bunch of free videos, they have a whole bunch of really great topics on learning Drupal and J Query so whether you’re just getting started or whether you want to learn some pretty advance topics go ahead and give them a chance and to take a look if you haven’t already.

If you do take a look and decide to sign up and become a member use CK20FEB to get 20% off. Let’s go ahead and get started; so I have a simple Drupal site here, as you can see the main menu displayed over here, it’s also displayed at the top but you’ll see in a minute that we’re probably not going to want to keep these links up top.

There’s just three menu links right now which is linking of to three different pages and then of course the homepage and I have the Special Menu Items Module already installed so we’ll take a look; as you can see I’m using the 7.x-2.0 version, you can click configure here and you can use the HTML tag that you want to go around, anything you specify is a no link which can ought to be used as Container Menu Items and you can also have an HTML tag do a round the Separator tag which is just a separator between different menu items, you can also select what kind of value to be displayed as a separator so right now it’s using a horizontal value, you can also … if you wanted to add a bunch of dashes, whatever you wanted to do there. Let’s go ahead and start adding some of these items; so as you can see here’s what it looks like now as far as our Menu Items are concerned.

I’m going to start out by adding a container to put this bottom to links in. So I come into my Menus, I’m going to go into my main menu and click List Links and I’m going to add a new link. If you look just on the surface it doesn’t look like anything’s changed, everything else looks pretty much the same. However if you read the description here you’ll see that you can enter No Link to generate a Non-linkable Item or a Separator to generate a separator item.

This is similar to being able to use the Front Tag to go to the homepage. So I’m going to go ahead and create a link title and I’ll just call it “Our Story”. If this is a simple business site it might be appropriate and I’m going to do a no link path here choosing Open Tag No Link then close it off and this is going to create an item that doesn’t actually have a link so we can use this as container.

I’m just going to go ahead and save this and now I’m going to drag these two items inside of this No Link Menu Item that I created and let’s take a look at this. As you see it doesn’t start expended so we want to make sure that we can actually get to the items or see the items that are inside this container.

So we’re going to go ahead and come back to our menu, go to Main Menu and we’re going to edit this and click Show as Expanded. Now when we come back you can see that it’s expanded, I can’t click this because it’s not a link but it does allow these container items to be linked so I can get to any items inside here but I can’t click on the Our Story and this allows you to theme this container as a little bit separate entity or separate item … Menu Item than this Sub-Item so you can theme it where you have a nice looking menu with a nice container wrapper kind of sitting outside of your main menu items.

We’re going to go ahead and add a separator as well so you can see how that’s going to look. This gives it a title, it doesn’t matter what the title is and we’re going to use this separator tag, I’m going to go ahead and save this. I’m going to put the separator right underneath the home link.

You’ll see initially it doesn’t look very clean especially with these list items but a lot times you’re not going to have this list items on your menu so if you want to go ahead and get rid of those list items I’m just going to show you how you could go about doing it and I’m going to go ahead and go into one of these LI’s, find this UL menu LI, I’m just going to overwrite this here, List Style Image Non and I’m also going to add List Style of Non. Now you can see that it looks quite a bit better.

The Separator actually looks like it fits in and of course you can change that to whatever you want and you can theme that to be any type of separator you want if you wanted to use specific image you could load that in there. If you use a different tag it comes with a unique class of separator so of course you can do what you need to using CSS to make that separator look however you want and of course you can do the same thing with the Container which is the class of No Link.

So using that you can theme this or style these differently and make them really stand out. That’s really all there is to the Special Menu Items Module, it’s really simple and it just serves one simple purpose but it can be very useful for building out dynamic menus where you need more than just a standard Menu Item.

As you can see up here in a Horizontal Menu it doesn’t necessarily work as well in this case but if you have a Vertical Menu like this you can build some pretty cool looking menus with this module. So go ahead and give this module a try, let me know what you think either in the comments on code karate or on YouTube.
Thanks again to drupalize.me for sponsoring this episode of the Daily Dose of Drupal and thank you for watching, we’ll see you next time.

5 Secrets to Becoming a Drupal 7 Ninja

Comments

Hello Shane,
Thank you for the awesome tutorials. I'm a beginner in drupal and find that your tutorials are short and sweet and easy to follow.
May I know what do you use for live css editing in the video? The highlights in both the stylesheet and the viewport looks super useful for a novice like me.

Post new comment