Skip directly to content

Enabling sub menus in Drupal Gardens

on November 6th, 2010 at 10:10:46 PM

In the latest release of Drupal Gardens we introduced drop down menu styling into our base themes. 

In order to take advantage of the latest drop down menu styling, please update your theme if you created it prior to November 4th.

Menus are a standard structural element in Drupal 7. In this post we'll establish how to enable these menus. Follow along with the screenshots.

If you already know how to expand sub menus, you should skip to the post about styling.

Now let's look at the menus in Drupal 7. Follow along with the screenshots in Drupal Gardens.

Drupal has 4 system menus by default.

Make a menu with existing content items

In this example, let's create a page called Whitepapers and add it as a top level navigation item.

Add some content (I use lipsum.com)

And then scroll to the bottom of the overlay where the options for the content item are found.

As indicated in the image above:

  1. Select the Menu settings tab. It probably is selected already.
  2. Check the Provide a menu link box.
  3. Leave the Parent item select box set to <Main menu>.
  4. Adjust the weight of the menu. I want my menu to fall in the center of the list, so I'll guess at 2 :) You may need to play with this value a little to make the item appear in the desire place in the list of items.
  5. Save.

And there we go! A menu item in our Main menu.

 

Add a sub menu item to Whitepapers

Next we'll add a page under Whitepapers in our menu. Go through the steps above to create a new page item. When you get to the content item options step (where we created a menu link), stop and come back to this page.

Activate the Provide a menu link option for this page as you did the Whitepapers page. This time in the Parent Item select box, select Whitepapers.

In the image above, follow these steps.

  1. Select the Menu settings tab. It probably is selected already.
  2. Check the Provide a menu link box.
  3. Leave the Parent item select box set to -- Whitepapers.
  4. Save.

After saving, you will be redirected to your new page. Notice that there is no drop down menu present under Whitepapers. We will fix this in the next section.

Expand the menu items in the menu configuration

In Drupal 7, a menu must be expanded before its children will be visible in a rendered page. This is easy to do.  First, open the Structure menu and select Menus.

Then select list links, one of the operations of the Main menu row in the table of menus.

On the next form, click the edit operation of the Whitepapers row.

Click the edit operation link on the Whitepapers menu item

On the next form, enable the Show as expanded option. This will make the direct child links of this node visible when the page renders. This page is also a useful place to edit other properties of the menu link, like its Parent link or Weight.

In the image above, follow these steps.

  1. Check the Show as expanded checkbox.
  2. Save.

Close the resulting overlay after you save.

Your page should refresh. If it doesn't, refresh the page.

Look, we have a drop down menu!

I'm going to repeat the steps above to add sub menus so that we have something to work with in the next step, the drop down menu styling how-to. Don't forget to expand sub menu items if you add children under them!

Next stephttp://jessebeach.drupalgardens.com/content/drop-down-menus-drupal-gardens-how-style-every-little-pixel

Comments

Natalie G.'s picture

Thank you so much for this post!  I'm a noobie and I've been trying to figure out how to set-up the new drop down menus.  Your screen shots and concise instructions helped me find where I was going wrong.

cathy Abraham's picture

Much thanks for this easy how to!!  Cat

jbeach's picture

Appreciation keeps me typing :) I'll make more of these how-tos.

Check out our how-to videos, too, http://www.youtube.com/user/drupalgardenstv

Keanen's picture

Hi Jesse I love your site, beautiful.I'm new to web design and learning... I would like to know how you created the shadow border around the page content? Did you use photoshop brushes to make the background graphic? Thanks you.

jbeach's picture

Hi, Keanen. The method for creating dropshadows that I use is purely CSS. This means that you won't see dropshadows in Internet Explorer. I am ok with that since it reduces page bloat and frankly, the time I spend on frivilous details for older browsers. Your needs may vary depending in your preferences and clients.  If I were you, talk them out of drop shadows in IE or use a jquery plugin to create them only in IE.

Check out this article for an easy how-to for drop shadows (box shadow in CSS speak).

http://css-tricks.com/snippets/css/css-box-shadow/

DavidDecks's picture

 Drupal is an accessible tool for building websites that can also be accessed by people with disabilities--this initiative began with advancements of the Drupal 7 accessibility. The accessibility team has worked to identify accessibility barriers with Drupal and worked to resolve.Landscaping in Toronto 

pigoo04's picture

I just came across your blog and reading your beautiful words. I thought I would leave my first comment but I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often. bodybuilding supplements for diabetics

marty1's picture

Hi there - nice instructions....question, can I place drop downs in a table? - cheers Marty

Post new comment