Friday, March 30, 2012

How to Create Dropdown Menus in Drupal




No matter what CMS we're teaching, when we come to talking about themes and designs, one question always comes up quickly: "How do I make a dropdown menu"? Here's the answer to that question in Drupal.

First, we are going to show you how to get your menu set up correctly. Second we're going to give you three different options for showing that menu to your visitors.



Setting Up the Dropdown Menus


tutuploadsmedia_1328643949622.png



Go to Structure > Menus. Click list links next to the menu you'd like to use.




tutuploadsmedia_1328644328522.png



Click Add link and then create your link.

Pay close attention to two options further down the page:

- Enabled. Check this box.
- Parent link. If you want this link to dropdown under another, here is where you choose the top-level link. In this example below, the link will drop down from under Home.




tutuploadsmedia_1328644380136.png



When you're done, you'll see that the sub-links are indented under the top-level links.




tutuploadsmedia_1328645783324.png



If you're going to put dropdown links under existing menu links, don't forget to also open up those existing links and check the Show as expanded box.




Option 1: Using a Theme with Dropdown Menus


tutuploadsmedia_1328646997914.png



One thing that confuses some Drupal beginners is that not all themes have dropdown menus. In fact, none of the default Drupal 7 themes do so Bartik, Garland and Stark would not be the right choice in this case.

For example, the main menu bar of the default Bartik theme will always look like the image above. And if you try to place the menu in a block, you'll only get an indented link as in the image below.




tutuploadsmedia_1328645760427.png



To get an easy-to-use dropdown menu you'll need a theme such as Marinelli: http://drupal.org/project/marinelli. Each theme will be slightly different in how the dropdown menus are setup but Marinelli is a good example.




tutuploadsmedia_1328644936117.png



Install Marinelli and make it the default theme on your site.

Under the Apperance tab, click Configure next to Marinelli and scroll down. Under Primary Menu Settings, select Mega Drop Down.




tutuploadsmedia_1328645228108.png



Now when you check your site, you'll have working dropdown menus as in the image below.




tutuploadsmedia_1328645302561.png



Option 2: Use a Module




A second way to get dropdown menus on your Drupal site is to use a module. Nice Menus is very common choice and then one we'll use in this tutorial: http://drupal.org/project/nice_menus. Another very popular choice is Superfish http://drupal.org/project/superfish.




tutuploadsmedia_1328645453517.png



Install the Nice Menus module and enable it.

Go to Structure > Blocks and place one of the two Nice Menu blocks into a region of your site.




tutuploadsmedia_1328645725343.png



You can also click Configure next to one of the Nice Menu blocks and you'll be able to take some control over the menu settings.




tutuploadsmedia_1328645886530.png



Once the menu is live on your site, it will look like the image below.




tutuploadsmedia_1328645941153.png



You might not want the menu in the sidebar as in this example, so check to see which regions are available to you in current theme. Go to Structure > Blocks > Demonstrate block regions and you'll see your choices:




tutuploadsmedia_1328646054907.png



Option 3: Change the Code of Your Theme




Finally, if you have some coding knowledge, you can modify the theme that you're using to include dropdown menus.

The quickest way to do this would be to take advantage of one of the modules mentioned in Option 2 such as Nice Menus or Superfish.

Here is one step-by-step example of how you can add a Superfish dropdown menu to the Bartik theme: http://drupal.org/node/1073298.



No comments:

Post a Comment