Working with Secondary Menus

Video loading...

  • 0:06
    Working with Secondary Menus
  • 0:08
    with Addison Berry
  • 0:13
    Hey there.
  • 0:14
    So this video is going to cover secondary menus
  • 0:18
    and how to sync those up with your primary menus.
  • 0:21
    And then we're going to play around with where those are placed
  • 0:25
    in our theme so they aren't always necessarily
  • 0:29
    right next to each other if we don't want them to be.
  • 0:32
    So I have a basic Drupal site already set up here.
  • 0:36
    And I have some primary menus already set up.
  • 0:39
    A couple items.
  • 0:40
    You can click around.
  • 0:41
    You can see I've got some pages set up.
  • 0:44
    Let's go in and actually look at the menus.
  • 0:48
    And this is my primary links.
  • 0:50
    So you'll see that both flowers has items under it,
  • 0:54
    and trees also has items underneath it.
  • 0:58
    And so those are all in my primary links.
  • 1:03
    I don't have anything in my secondary links.
  • 1:06
    And what we're going to do is we want to get those subitems
  • 1:13
    to display for my primary links.
  • 1:16
    So that when I click on Flowers, the list of kinds of flowers.
  • 1:19
    So the thing we want is the source of primary links
  • 1:21
    is primary, which makes sense.
  • 1:23
    The important bit here is this source for secondary links.
  • 1:28
    It's by default set to the secondary links menu, which would make sense.
  • 1:33
    And you could have different primary links,
  • 1:35
    and the secondary links could be Contact Us, About Us, or whatever,
  • 1:39
    if you wanted to set it up separately.
  • 1:40
    But what we want to do is switch this to both be primary links.
  • 1:44
    And it tells you in the help text here,
  • 1:46
    if you do this, the children of the active primary link
  • 1:48
    will be displayed as secondary links.
  • 1:51
    So it's going to take the children for the secondary.
  • 1:55
    We could set this so that they're both set to secondary.
  • 1:58
    And again, the parents would be primary,
  • 2:00
    and then the children would be secondary.
  • 2:02
    But we're going to set these both to primary links
  • 2:06
    and save that configuration.
  • 2:07
    Now when I go up to my menu-- so I go to home.
  • 2:10
    Everything looks normal.
  • 2:12
    When I click on Flowers, I actually get the categories now.
  • 2:15
    Those are the child menu items, and those are my secondary links.
  • 2:21
    So now that I actually have the primary,
  • 2:24
    secondary links working together so that they're actually
  • 2:26
    related to each other, what I want to do
  • 2:28
    is move these around in my theme.
  • 2:32
    And so I'm going to contribute a theme because I
  • 2:34
    don't want to hack a core theme.
  • 2:38
    So I'm going to go ahead and switch to the Barlow theme
  • 2:41
    here, which is a nice example theme to use.
  • 2:46
    And just keep in mind that not all themes are going to actually
  • 2:49
    have secondary links in them.
  • 2:50
    So it took me a while to find one that was
  • 2:53
    going to work well for this demo.
  • 2:55
    So again-- so now I'm in the new theme.
  • 2:59
    Home page is fine.
  • 3:01
    And then when I go here, my secondary links
  • 3:03
    are now appearing underneath the primary link Items, as they should.
  • 3:09
    I go to one of those children.
  • 3:11
    You can see the whole menu is all lined up.
  • 3:15
    So let's move stuff around.
  • 3:17
    So I'm going to go into my text editor here.
  • 3:20
    And I'm not hacking a core theme.
  • 3:24
    I am going to go into my sites, all themes directory,
  • 3:28
    where I have my contributed.
  • 3:30
    And here's the Barlow theme.
  • 3:32
    And now I'll come down here, and our menus are
  • 3:37
    printed out in the page template.
  • 3:39
    So that's what I'm going to do.
  • 3:42
    Now, if you come in and look at the file,
  • 3:43
    if you've never really looked at a theme
  • 3:45
    file before, it's basically a bunch of HTML with PHP snippets.
  • 3:51
    And you can see they're pretty appropriately
  • 3:53
    named for what it is that they do.
  • 3:55
    And you'll see that we have primary links and secondary links.
  • 3:59
    And this is what is actually displaying that information
  • 4:02
    in our theme when we go to a page.
  • 4:05
    So what we want to do is play around with the secondary links.
  • 4:10
    We can move it around in the HTML in our template file.
  • 4:13
    Now you'll notice that we have a-- it begins with this if statement.
  • 4:17
    It says PHP if.
  • 4:19
    And what it's doing is it's basically saying,
  • 4:22
    if I actually have secondary links, then go ahead and print them.
  • 4:27
    If I don't, then don't bother putting anything into the theme.
  • 4:30
    So it begins with the if, and it has this little brace, bracket,
  • 4:34
    at the end.
  • 4:35
    And then down, if you go down a couple lines,
  • 4:37
    you'll see an end bracket.
  • 4:38
    And we need this entire statement.
  • 4:40
    And a lot of times, you'll just see it
  • 4:42
    with an if with a colon, and then this
  • 4:44
    end if, which actually makes it a little easier
  • 4:46
    to sort of see where the beginning and end
  • 4:48
    of these entire little chunks are.
  • 4:51
    But in this one, we have brackets.
  • 4:53
    That's fine.
  • 4:54
    We just need to make sure we grab all of it.
  • 4:56
    So I want the beginning to the end of the if.
  • 4:57
    This is the entire secondary links statement.
  • 5:01
    And that's the thing that I want.
  • 5:03
    So I'm going to get rid of that, and I'm
  • 5:04
    going to put it above the primary links,
  • 5:06
    just to sort of start playing around a little bit.
  • 5:09
    So if I save that and reload my page,
  • 5:12
    you'll see that now the secondary links are above the primary links.
  • 5:15
    Everything's still working the same.
  • 5:17
    They're just placed differently.
  • 5:20
    So let's look at doing some other stuff.
  • 5:22
    We'll undo that.
  • 5:24
    And what I can do is I can also have more than one location.
  • 5:28
    So I'm going to leave the secondary links in its primary place
  • 5:32
    up there at the top, and I'm going to add it in another location.
  • 5:36
    So I'm going to have secondary links printing out twice.
  • 5:39
    So I'm down in my Footer, and I'm going
  • 5:41
    to stick this right inside my Footer div
  • 5:44
    and save that and come back over here and reload.
  • 5:49
    So remember, I changed what I had done before,
  • 5:52
    so those went back to normal.
  • 5:54
    And now I also have secondary links down in my Footer.
  • 5:57
    So I can even have these links in more than one location.
  • 6:00
    You could do that with primary links as well.
  • 6:03
    So let's undo that because that was kind of
  • 6:06
    weird and not exactly what we want.
  • 6:09
    And another really common thing that people want
  • 6:11
    is they want their primary links to stay up at the top, nice and clean
  • 6:16
    in that horizontal header.
  • 6:18
    And then they want the other stuff to actually just show in a sidebar.
  • 6:23
    So I'm in my sidebar left div here of my theme.
  • 6:26
    This is in the HTML.
  • 6:28
    I'm just choosing where in the HTML do I want this to display.
  • 6:32
    And then I'm going to go ahead and paste it in there.
  • 6:35
    So this is going to be above the actual left sidebar
  • 6:42
    region where my blocks go, which is indicated by this.
  • 6:46
    So save that.
  • 6:48
    Let's go back.
  • 6:49
    Let's reload.
  • 6:52
    And now you'll see the secondary links
  • 6:54
    are not underneath the primary links, but they're in the sidebar.
  • 6:58
    Now, it's kind of weird because they're not in a normal list.
  • 7:02
    You see how they're doing this weird-- they're being displayed
  • 7:04
    in a line by the CSS, which in the header is how you like it,
  • 7:09
    but it's not really working for me in the sidebar.
  • 7:15
    So I'm going to fire up Firebug here and figure
  • 7:17
    out what CSS is causing that.
  • 7:19
    So I find my sidebar left.
  • 7:22
    And then this is the unordered list, which
  • 7:26
    is what my secondary links is in.
  • 7:29
    And nothing on the UL.
  • 7:31
    But if I click on one of the list items within it
  • 7:34
    and then look at the CSS that's being generated,
  • 7:36
    you'll see there's the display in line.
  • 7:38
    And that's what's making them go next to each other,
  • 7:40
    rather than on top of each other.
  • 7:43
    And if I look at it, you'll see that this is being
  • 7:47
    created by the system menu CSS.
  • 7:50
    So this is a core CSS, not my theme's CSS.
  • 7:54
    And it's being attributed to everything
  • 7:58
    that has this links class on it, to unordered
  • 8:01
    list with the links class.
  • 8:03
    So what I can do is when you look at this-- this is kind of weird,
  • 8:07
    but that's the theme function.
  • 8:09
    That's the actual secondary links thing.
  • 8:12
    And then we have this class, this array that has this class thing
  • 8:15
    in it, and it has the actual classes that are being applied in the HTML.
  • 8:20
    That links, I'm going to get rid of it.
  • 8:24
    And so now it just has that secondary menu class on it.
  • 8:27
    And when I do that, voila.
  • 8:29
    No longer being displayed in line.
  • 8:32
    So that's handy.
  • 8:33
    They still look a little funny with these weird background rollover
  • 8:36
    things going on, right?
  • 8:38
    So if you come down and then look at this again,
  • 8:39
    you'll see we still have the secondary menu
  • 8:42
    class that's happening.
  • 8:45
    And that is in my theme.
  • 8:46
    The typography CSS file for Barlow is adding some stuff to anything
  • 8:52
    it sees as a secondary menu.
  • 8:55
    Now, there are two ways I can address this.
  • 8:56
    I can go into the style.css.
  • 8:58
    I can find the secondary menu CSS.
  • 9:03
    And then you can see where it's adding things, like the background
  • 9:07
    color on hover and stuff like that.
  • 9:09
    So I can change the CSS to do whatever I want to do.
  • 9:13
    Another thing I can do is just change the class so that it's not
  • 9:17
    using secondary menu class so that if I move something back,
  • 9:21
    that stuff would all still be there.
  • 9:23
    Which way you go doesn't matter.
  • 9:25
    This is really getting into the HTML CSS,
  • 9:28
    and you deciding how you want to work your theme.
  • 9:31
    Either way works.
  • 9:32
    But what I'm going to do is just to show you this,
  • 9:37
    I'm going to go ahead and just change this class to say side
  • 9:39
    menu, rather than secondary menu.
  • 9:43
    And now when I do that, you'll notice
  • 9:45
    that all the theming is gone.
  • 9:46
    It's just getting default stuff now because there's
  • 9:49
    no CSS for side menu anywhere.
  • 9:52
    And when you come down and look in Firebug here,
  • 9:55
    you'll see the UL now has that class that I just added.
  • 9:59
    So now I can go into the theme and add my own CSS
  • 10:03
    for the side menu class on the list, and it'll
  • 10:07
    do whatever it needs to do there.
  • 10:09
    So let me close Firebug here.
  • 10:12
    And so we see we have flowers, trees.
  • 10:14
    It moves.
  • 10:14
    It changes.
  • 10:16
    And then when I go to home, it disappears.
  • 10:19
    So now I have my primary and secondary menus.
  • 10:22
    They're in sync with each other.
  • 10:24
    And the primary menus are across the top in the header,
  • 10:28
    and the secondary menus, the children of the primary items,
  • 10:32
    are now in the sidebar.
  • 10:34
    And they only appear, and they change
  • 10:36
    as I move through my primary items.
  • 10:38
    So that's it.
  • 10:40
    That is a quick intro to secondary menus.

Working with Secondary Menus


Everyone is familiar with the Primary (Drupal 6) or Main (Drupal 7), menu in Drupal, but not as many people are aware of, or use, the Secondary menu feature. This lesson shows how to configure the menus so that children items in a menu can be displayed in a separate, but related, secondary menu on the page. Then we look at how you can move the location around for the secondary menu in your theme so that you can place and display them exactly the way you want.

* This video was originally recorded using Drupal 6. While some of the details are different, in particular the way the menu theme function looks in Drupal 7, but the basic settings and techniques are applicable in both Drupal 6 and 7.

Additional resources: