Handling linked primary and secundary menus in Drupal

Here it is…my first Drupal tutorial! The reason why I wrote this is because it took me about a day to figure out how I could link different secondary menus to certain primary menus. I couldn’t find much helpful information on the web, so here goes…

What I wanted to do is following:
On the top pane of the website I have the primary menu with several items. Then on the left pane, I wanted different secondary menus, displayed depending on the choice in the primary menu.
Are you still with me?
I’ll give an example: Let’s say that my primary menu consists of the options “Articles” and “Photography”. When someone presses the Photography button, a sub menu needs to appear in the left pane with the options “Travel photos”, “Portraits” and “Projects”. When someone presses the button “Articles”, I want a sub menu in the left pane with “Travel articles” and “Web design articles”. Do you see what I mean?

Basic knowledge
To be able to follow this tutorial, I expect that you had a first touch and feel of Drupal. It might also be useful if you already played a bit with menus and blocks.
Also note that this tutorial is for Drupal v6.*

Enabling the Path module
First of all you need to enable the “Path” module.
Go to: Administer > Site building > Modules
In the category “core-optional”, search for the Path module, check it and press Save.

The primary menu
First we want to create our primary menu which will appear on top of the screen. We will use the “primary links” menu which is installed by default.
Go to: Administer > Site building > Menus > Primary links
Go to the tab Add item
We don’t have a page or story yet, so in the path field, we’ll just fill out “node/add”, as proposed by Drupal. In the Menu link title field we fill out “Photography”, and we leave the other options as they are. To finish we press the save button.

Now we do the same for the Articles menu. We can set the path again to “node/add”.
Note that by changing the weight of your menu item, you select where it will appear in the menu. The lighter the item, the higher (or more to the left because we work with a horizontal menu) it will appear in the menu. For Photography we took weight “0”, so if we take e.g. “5” for Articles, the Photography item will appear first and the Articles item will appear last. Let’s say we take “-5” for Articles, the order will be the other way around.

* HINT: don’t let your weights follow directly on each other. Maybe later you’ll want to insert a new item between two existing items, and if you don’t have any “free” weights in between, you’ll need to change the weight of your other items too.

Now go to the tab List items, and you’ll see your newly created menu items.

The next step is to determine where your primary menu should be shown.
Go to: Administer > Site building > Blocks
Search for the Primary links block and change the region to “header”. You’ll notice that the block now appears in the header section.

Don’t forget to press the Save button.

The secondary menus
The next step is to create our secondary menus. The most logical solution seems to be the use of the predefined “Secondary links” menu, right? Wrong! Because we want to create several different secondary menus, we’ll need to create our own menus.
Let’s start with the submenu for Articles.
Go to: Administer > Site building > Menus
Go to the tab Add menus
We give our menu a name and a title, and we press Save.

Now a new empty menu has been created.
You might also want to do the same for every other submenu you want to create (e.g. Photography).
Note that we didn’t add any items to the menu (yet).

Next thing we need to do is define the location of this menu, which we do (similarly to the primary item) with blocks.
Go to: Administer > Site building > Blocks
You’ll notice that by creating the Articles menu, the system also created an articles block. You change the region of this block to “Left sidebar”.
Now press the configure operation of your Articles block (it’s next to region).
This is where we can set when a certain block is or isn’t shown. Let us have a look at the possibilities:

User specific visibility settings: Custom visibility settings
This is where you can define if a user can hide a block or not. We don’t want our users to hide our submenu, so we take the option “Users cannot control whether or not they see this block”.

Role specific visibility settings: Show block of specific roles
Who should be able to see our submenu? Everyone, I guess… So we just don’t check anything, because nothing seems to mean everything here.

Page specific visibility settings: Show block on specific pages
This is where it gets interesting. Here’s where we define on which pages the menu should be shown.
I can already think of a couple pages that’ll certainly need this menu: the default “Articles” page, the default “Travel articles” page and the default “Web design articles” page. But then what? For each article, we’ll probably create a new page, does this mean that after creating every new article, we’ll need to add it to this setting? That seems very time annoying and time consuming… Indeed, but there’s a trick!
Let’s just leave this setting as it is for now, press Save, and we’ll come back to this later.

Create content for the submenu
Now let us start creating the default pages for our articles.
First things first, the default “Articles” page, which appears when the Articles button in the primary menu is pressed.
Go to: Create content > Page
Give the page a title and enter some content in the body
All other settings can be left as they are, except for the URL path settings where you fill something like “articles/articles”.
What we’re doing here is a way of grouping our pages. The first part (before the slash) is the name of the group, the second part is the name of the page. I propose that you group your pages similar to your primary menu items, but you can go as far in this as you want, creating several subgroups. E.g. if you’re planning to write a lot of articles about different CMS, you might want to create “articles/webdev/CMS/Drupal” and “articles/webdev/CMS/Wordpress”. You can think this all over before you start, but if you feel like extending your groups later, it’s not a big deal.

You press the Save button, and your first page has been created.

Now we want to link this page to the “Articles” button in our primary menu.
Go to: Administer > Site building > Menus > Primary links
Press the edit operation for the Articles menu item, and change the path to “articles/articles”, or whatever url path you defined previously.
Press save, and your page is linked.

Now let us create a page for your first submenu item “Travel articles”.
Go to: Create content > Page
Similar to the Articles page, you enter a title and some content.
Remember that we didn’t create new items in our submenu? This is because we can do that directly here, which can save us quite some time.
You click on menu settings and fill out following settings:
- Menu link title: how you want to call your submenu item (here it’s “Travel Articles”)
- Parent item: Select the name of your self-created submenu (here it’s “Articles”)
- Weight: similar as in the primary menu, you should already know how this works, right?
Now the only thing that we still need to do is define the URL path. We put it in the same group as the Articles page, but we call the page “travel-articles”.
Press the Save button, and our second page has been created. Now you can do the same for all other pages, don’t forget to group them using URL path, and to enter Menu settings, if you want your page to appear as a menu item.

The secondary menus (part deux)
Let’s get back to where we left earlier.
Go to: Administer > Site building > Blocks
First of all make sure that the “Articles” block is put in the Left sidebar region. If this is not the case, change the region and press Save.
Choose the configure operation of the Articles block. Scroll down to “Page specific visibility settings: Show block on specific pages”, and choose the option “Show on only the listed pages”.
Then you have field where you need to enter all the pages where this submenu should be shown, but because we’ve grouped our pages using “URL path”, we can easily use a wildcard to define our pages. Here the wildcard will be “articles/*”
Now the submenu will be shown on every page where the URL path starts with “articles/”.

Testing
Of course we now want to see if it works. Let’s follow this test case:
1. In the top (primary) menu, press “Articles”. Now your default Articles page should appear, and on the left pane you should see the Articles submenu with the items you’ve created.
2. Press on an item in the Articles submenu (e.g. “Travel articles”). Your default page for that item should appear, and the Articles submenu is still available on the left pane.
3. Press in the top menu on “Photography”. Now you should see whatever page you’ve set as default for Photography (if you following this manual, it will probably be “node/add”), and the Articles submenu disappeared. Similar to Articles, you’ll need to create a submenu for Photography.

In case this test process failed: You might have done something wrong and you’ll need to start all over again.
In case this test process is successful but it doesn’t do what you expected: I’m sorry to tell you that you probably spent a lot of time reading the wrong tutorial.

In any case, you can certainly post a comment with your ideas and/or doubts.

0 comments:

Post a Comment