I love getting e-mails from those of you who are watching these videos at lynda.com.
And for years, I've gotten e-mails from people who say, gosh, I love Joomla!
I love the way the menus work, but I really want dropdown menus, and I have
always had to write back and say, go download a third-party extension for that.
Now that we've got dropdowns built into Joomla!
and built into the Protostar Template, I know some of you are going to be very
happy about that, that we've dropdowns now that show up here across the page.
But I also know that some of you are now going to say, oh, by the way, I really
love the way we had it in the old days, I don't really want dropdowns.
What I'd like to have is, I like to have this main navigation going across the top,
and when you click on something like News & Information, over here on the
right side of the screen I'd like to have some sub-navigation show up here,
rather than having these dropdowns, and I'd like to turn the dropdowns off
altogether and just have this sort of a split navigation.
So the main navigation across the top, the sub-navigation down on the side of the page,
how can I possibly configure that?
Well, you can still configure that and you don't have to have these dropdowns
if you don't want them, and that's what I'm going to show you in this particular video.
So what I'm going to do now is I'm going to go into the back end of Joomla!
and I'm going to start by making a new Menu Module and this Menu Module will
show up on the right side of the screen to show you that sub-navigation.
So I'm going to start by going to Extensions>Module Manager and remember that
the Module Manager is the way that these menus display on the Web site
and where they display.
The module can also specify what part of the menu you want to display.
You do not want to go into the Menu Manager and make a whole new menu.
If you go into the Menu Manager you make a whole new menu call it the About
sub-navigation menu.
Two problems happen;
first of all, you run the risk of making duplicate content on your Web site.
So you're making links to your pages that already exist on your Web site,
but the second thing that will happen is if you happen to be using the breadcrumb,
the breadcrumb is located right here on the front end of the Web site.
Let me go down into let's say the Press Releases page here.
This breadcrumb that's currently reading Home, News & Information, Press
Releases which accurately reflects the information architecture of this Web site.
If you create a sub-navigation called Press Releases, you set up a whole
separate menu for that, you display it on the right side of the screen.
This breadcrumb will only read Home, Press Releases, it won't read correctly.
In order to keep from making duplicate content, what we're going to do is use
our module as a filtering device to just show portions of the menu that we want
to have displayed on our pages.
So here inside of the Module Manager I'm going to click on my New button to make a new module.
And I'm going to go to my menu item here, because that's of course the kind of
module that I want to make.
I'm going to give this a Title, I'm just going to call this Subnavigation,
I'm not going to show that title though.
Nobody needs to see subnavigation on top of the links.
The Position I want this to appear in is on the right side of the page.
So I'm just going to pick Right here from the list.
And under Basic Options let's make sure that we're displaying the right menu,
I want to display the Main Menu.
So let's just see what we've got so far.
If I go ahead and hit Save and refresh my page here.
I'm just going to go back to Home.
So now I've the navigation going across the top of the page, I have that same
navigation over here on the right.
When I go to the About portion of the Web page you can see that I have some
sub-navigation here.
That's not really what I want.
What I want to have happen is, I don't want them on the Home page, I don't want
to see this module over here at all, and when I go to the About page,
what I want to see is just Executives and Company Structure.
Okay, so let's tweak this just a little bit more.
So, first of all, let's control what page is this sub-navigation will show up on.
We can do that through the Menu Assignment tab here.
Right now this is set to show on every page of the Web site.
What I would like to do is I'd like it to show on every page of the Web site
except for the ones I'm going to select.
So if I choose this, by default all of the pages are selected which would
mean that it would display on none of the pages of the Web site, a little bit confusing.
So what I want to do is say Select None to deselect everything.
So I want this module to display on every page of the Web site except for,
I don't want it on the Home page on the Footer, I don't want it on the Login
page on the footer.
I don't want it on the Home page on the Main Menu.
But for the other pages that exist right now, I'd like it on all those other pages.
So let's go ahead and say Save again and let's see how that's affected things.
So if I go back to my Home page I no longer see that menu module, and if I go to
the About page, I now have the full navigation.
So I've got Home, About, News & Info as well as my sub-navigation.
So I need to make one more tweak, I want to just see those links Executives
and Company Structure.
I don't want to see the other stuff and that's possible here inside of our Menu
Module under Basic Options.
So we got here to Basic Options what we have here is our base item is Current,
whatever our current page is, that's where we're going to start from.
We could of course specify this as any of the particular menu items here and
that would show for example, let's say the News & Information sub-navigation
on the About Us page. Really, really confusing. Just because you can doesn't mean you should.
So I think Current is probably a great setting for this.
But our Start Level is level 1, so in other words, start at the Main navigation
and then end by displaying all of the navigation that occurs underneath.
What I actually want to have happen is start at level 2, start at the
sub-navigation and then display any third level or fourth level navigation I have.
I don't have any for this Web site, but you might for yours.
So I'm going to set this to level 2 and say Save one more time, and now what
happens when I refresh this page I get just Executives and Company Structure
within the About portion of the Web site.
When I go to News & Info, I get Solar Blog and Press Releases, and when I go
to Products, I get my sub-navigation over here as well, which is exactly what I want.
And when I go back to the Home page I don't have it.
The last thing you might want to try doing is, maybe you feel like these
dropdowns are a little bit repetitious, because right now you're going into
the About page, the sub-navigation is over here, maybe you don't want these dropdowns anymore.
How do you get rid of them?
Well, here's what you do.
I'm going to hit Save & Close to get out of my sub-navigation module and
I'm going to click on my Main Menu module, and in here what I'm going to change is
under my Basic Options right now I've started with level 1 and I'm ending with level All.
What I'm going to do is I'm going to not show my submenu items, remember that
will turn off the dropdown except on the pages.
So if I'm on the About portion of the Web site I'll see the dropdown, but
if I'm on the Products portion of the Web site I won't see the About dropdown,
and I'm going to change my End Level from All to level 1, in the words, just show me one level.
And if I say Save and I Refresh the Web site, now I have no dropdowns.
I have just my secondary navigation over here on the side.
When I go to News & Information, that secondary information updates, and I have
no dropdowns anywhere.
So this is another way of presenting navigation on your Web site.
This particular template we've put it on the right side of the screen,
but depending on what template you're working with, there might be a left column
where you could put that navigation instead.
And which approach is better? Well, it depends.
It depends on the design for your Web site, it depends on your user interface,
it depends on the kinds of users that you're working with, it depends on your
personal preferences and your client preferences.
But you now have two ways of displaying navigation on your Web site, whether you
do it through dropdowns or whether you split up your navigation over
two modules on the Web site.
I'm going to go ahead and turn everything back on again to get my dropdowns
back, and I'm actually going to unpublish that secondary navigation module,
because I'd rather stick with the dropdowns for this Web site, but now that I've
walked through it, that's the way that you get it done.
So let me just walk you through, how we're going to go back to having those
dropdowns show up again.
Here once again I'm in my Main Menu module, I'm going to go to my Basic Options,
set by End Level to All, Show my Submenu Items and say Save & Close.
And then for my Subnavigation I'm simply going to unpublish it, and
when I refresh my homepage now I've got my dropdowns back again and when I go to
let's say the Executives page, I don't have that sub-navigation over here.