1 00:00:00,000 --> 00:00:04,000 I love getting e-mails from those of you who are watching these videos at lynda.com. 2 00:00:04,001 --> 00:00:08,001 And for years, I've gotten e-mails from people who say, gosh, I love Joomla! 3 00:00:08,002 --> 00:00:12,002 I love the way the menus work, but I really want dropdown menus, and I have 4 00:00:12,003 --> 00:00:15,003 always had to write back and say, go download a third-party extension for that. 5 00:00:15,004 --> 00:00:17,004 Now that we've got dropdowns built into Joomla! 6 00:00:17,005 --> 00:00:21,005 and built into the Protostar Template, I know some of you are going to be very 7 00:00:21,006 --> 00:00:25,006 happy about that, that we've dropdowns now that show up here across the page. 8 00:00:25,007 --> 00:00:30,007 But I also know that some of you are now going to say, oh, by the way, I really 9 00:00:30,008 --> 00:00:33,008 love the way we had it in the old days, I don't really want dropdowns. 10 00:00:33,009 --> 00:00:37,009 What I'd like to have is, I like to have this main navigation going across the top, 11 00:00:37,010 --> 00:00:41,010 and when you click on something like News & Information, over here on the 12 00:00:41,011 --> 00:00:45,011 right side of the screen I'd like to have some sub-navigation show up here, 13 00:00:45,012 --> 00:00:48,012 rather than having these dropdowns, and I'd like to turn the dropdowns off 14 00:00:48,013 --> 00:00:50,013 altogether and just have this sort of a split navigation. 15 00:00:50,014 --> 00:00:54,014 So the main navigation across the top, the sub-navigation down on the side of the page, 16 00:00:54,015 --> 00:00:56,015 how can I possibly configure that? 17 00:00:56,016 --> 00:01:01,016 Well, you can still configure that and you don't have to have these dropdowns 18 00:01:01,017 --> 00:01:05,017 if you don't want them, and that's what I'm going to show you in this particular video. 19 00:01:05,018 --> 00:01:09,018 So what I'm going to do now is I'm going to go into the back end of Joomla! 20 00:01:09,019 --> 00:01:15,019 and I'm going to start by making a new Menu Module and this Menu Module will 21 00:01:15,020 --> 00:01:19,020 show up on the right side of the screen to show you that sub-navigation. 22 00:01:19,021 --> 00:01:24,021 So I'm going to start by going to Extensions>Module Manager and remember that 23 00:01:24,022 --> 00:01:28,022 the Module Manager is the way that these menus display on the Web site 24 00:01:28,023 --> 00:01:29,023 and where they display. 25 00:01:29,024 --> 00:01:35,024 The module can also specify what part of the menu you want to display. 26 00:01:35,025 --> 00:01:40,025 You do not want to go into the Menu Manager and make a whole new menu. 27 00:01:40,026 --> 00:01:44,026 If you go into the Menu Manager you make a whole new menu call it the About 28 00:01:44,027 --> 00:01:46,027 sub-navigation menu. 29 00:01:46,028 --> 00:01:47,028 Two problems happen; 30 00:01:47,029 --> 00:01:52,029 first of all, you run the risk of making duplicate content on your Web site. 31 00:01:52,030 --> 00:01:56,030 So you're making links to your pages that already exist on your Web site, 32 00:01:56,031 --> 00:01:59,031 but the second thing that will happen is if you happen to be using the breadcrumb, 33 00:01:59,032 --> 00:02:02,032 the breadcrumb is located right here on the front end of the Web site. 34 00:02:02,033 --> 00:02:06,033 Let me go down into let's say the Press Releases page here. 35 00:02:06,034 --> 00:02:09,034 This breadcrumb that's currently reading Home, News & Information, Press 36 00:02:09,035 --> 00:02:15,035 Releases which accurately reflects the information architecture of this Web site. 37 00:02:15,036 --> 00:02:19,036 If you create a sub-navigation called Press Releases, you set up a whole 38 00:02:19,037 --> 00:02:22,037 separate menu for that, you display it on the right side of the screen. 39 00:02:22,038 --> 00:02:27,038 This breadcrumb will only read Home, Press Releases, it won't read correctly. 40 00:02:27,039 --> 00:02:31,039 In order to keep from making duplicate content, what we're going to do is use 41 00:02:31,040 --> 00:02:35,040 our module as a filtering device to just show portions of the menu that we want 42 00:02:35,041 --> 00:02:38,041 to have displayed on our pages. 43 00:02:38,042 --> 00:02:43,042 So here inside of the Module Manager I'm going to click on my New button to make a new module. 44 00:02:43,043 --> 00:02:49,043 And I'm going to go to my menu item here, because that's of course the kind of 45 00:02:49,044 --> 00:02:51,044 module that I want to make. 46 00:02:51,045 --> 00:02:54,045 I'm going to give this a Title, I'm just going to call this Subnavigation, 47 00:02:54,046 --> 00:02:56,046 I'm not going to show that title though. 48 00:02:56,047 --> 00:02:59,047 Nobody needs to see subnavigation on top of the links. 49 00:02:59,048 --> 00:03:03,048 The Position I want this to appear in is on the right side of the page. 50 00:03:03,049 --> 00:03:06,049 So I'm just going to pick Right here from the list. 51 00:03:06,050 --> 00:03:10,050 And under Basic Options let's make sure that we're displaying the right menu, 52 00:03:10,051 --> 00:03:12,051 I want to display the Main Menu. 53 00:03:12,052 --> 00:03:15,052 So let's just see what we've got so far. 54 00:03:15,053 --> 00:03:21,053 If I go ahead and hit Save and refresh my page here. 55 00:03:21,054 --> 00:03:23,054 I'm just going to go back to Home. 56 00:03:23,055 --> 00:03:27,055 So now I've the navigation going across the top of the page, I have that same 57 00:03:27,056 --> 00:03:29,056 navigation over here on the right. 58 00:03:29,057 --> 00:03:34,057 When I go to the About portion of the Web page you can see that I have some 59 00:03:34,058 --> 00:03:35,058 sub-navigation here. 60 00:03:35,059 --> 00:03:37,059 That's not really what I want. 61 00:03:37,060 --> 00:03:41,060 What I want to have happen is, I don't want them on the Home page, I don't want 62 00:03:41,061 --> 00:03:45,061 to see this module over here at all, and when I go to the About page, 63 00:03:45,062 --> 00:03:48,062 what I want to see is just Executives and Company Structure. 64 00:03:48,063 --> 00:03:51,063 Okay, so let's tweak this just a little bit more. 65 00:03:51,064 --> 00:03:56,064 So, first of all, let's control what page is this sub-navigation will show up on. 66 00:03:56,065 --> 00:03:59,065 We can do that through the Menu Assignment tab here. 67 00:03:59,066 --> 00:04:02,066 Right now this is set to show on every page of the Web site. 68 00:04:02,067 --> 00:04:06,067 What I would like to do is I'd like it to show on every page of the Web site 69 00:04:06,068 --> 00:04:08,068 except for the ones I'm going to select. 70 00:04:08,069 --> 00:04:14,069 So if I choose this, by default all of the pages are selected which would 71 00:04:14,070 --> 00:04:19,070 mean that it would display on none of the pages of the Web site, a little bit confusing. 72 00:04:19,071 --> 00:04:24,071 So what I want to do is say Select None to deselect everything. 73 00:04:24,072 --> 00:04:30,072 So I want this module to display on every page of the Web site except for, 74 00:04:30,073 --> 00:04:33,073 I don't want it on the Home page on the Footer, I don't want it on the Login 75 00:04:33,074 --> 00:04:34,074 page on the footer. 76 00:04:34,075 --> 00:04:37,075 I don't want it on the Home page on the Main Menu. 77 00:04:37,076 --> 00:04:42,076 But for the other pages that exist right now, I'd like it on all those other pages. 78 00:04:42,077 --> 00:04:47,077 So let's go ahead and say Save again and let's see how that's affected things. 79 00:04:47,078 --> 00:04:52,078 So if I go back to my Home page I no longer see that menu module, and if I go to 80 00:04:52,079 --> 00:04:56,079 the About page, I now have the full navigation. 81 00:04:56,080 --> 00:05:00,080 So I've got Home, About, News & Info as well as my sub-navigation. 82 00:05:00,081 --> 00:05:05,081 So I need to make one more tweak, I want to just see those links Executives 83 00:05:05,082 --> 00:05:06,082 and Company Structure. 84 00:05:06,083 --> 00:05:11,083 I don't want to see the other stuff and that's possible here inside of our Menu 85 00:05:11,084 --> 00:05:13,084 Module under Basic Options. 86 00:05:13,085 --> 00:05:20,085 So we got here to Basic Options what we have here is our base item is Current, 87 00:05:20,086 --> 00:05:25,086 whatever our current page is, that's where we're going to start from. 88 00:05:25,087 --> 00:05:30,087 We could of course specify this as any of the particular menu items here and 89 00:05:30,088 --> 00:05:33,088 that would show for example, let's say the News & Information sub-navigation 90 00:05:33,089 --> 00:05:41,089 on the About Us page. Really, really confusing. Just because you can doesn't mean you should. 91 00:05:41,090 --> 00:05:44,090 So I think Current is probably a great setting for this. 92 00:05:44,091 --> 00:05:49,091 But our Start Level is level 1, so in other words, start at the Main navigation 93 00:05:49,092 --> 00:05:53,092 and then end by displaying all of the navigation that occurs underneath. 94 00:05:53,093 --> 00:05:57,093 What I actually want to have happen is start at level 2, start at the 95 00:05:57,094 --> 00:06:02,094 sub-navigation and then display any third level or fourth level navigation I have. 96 00:06:02,095 --> 00:06:05,095 I don't have any for this Web site, but you might for yours. 97 00:06:05,096 --> 00:06:10,096 So I'm going to set this to level 2 and say Save one more time, and now what 98 00:06:10,097 --> 00:06:15,097 happens when I refresh this page I get just Executives and Company Structure 99 00:06:15,098 --> 00:06:17,098 within the About portion of the Web site. 100 00:06:17,099 --> 00:06:21,099 When I go to News & Info, I get Solar Blog and Press Releases, and when I go 101 00:06:21,100 --> 00:06:27,000 to Products, I get my sub-navigation over here as well, which is exactly what I want. 102 00:06:27,001 --> 00:06:30,001 And when I go back to the Home page I don't have it. 103 00:06:30,002 --> 00:06:34,002 The last thing you might want to try doing is, maybe you feel like these 104 00:06:34,003 --> 00:06:38,003 dropdowns are a little bit repetitious, because right now you're going into 105 00:06:38,004 --> 00:06:43,004 the About page, the sub-navigation is over here, maybe you don't want these dropdowns anymore. 106 00:06:43,005 --> 00:06:45,005 How do you get rid of them? 107 00:06:45,006 --> 00:06:46,006 Well, here's what you do. 108 00:06:46,007 --> 00:06:51,007 I'm going to hit Save & Close to get out of my sub-navigation module and 109 00:06:51,008 --> 00:06:56,008 I'm going to click on my Main Menu module, and in here what I'm going to change is 110 00:06:56,009 --> 00:07:02,009 under my Basic Options right now I've started with level 1 and I'm ending with level All. 111 00:07:02,010 --> 00:07:07,010 What I'm going to do is I'm going to not show my submenu items, remember that 112 00:07:07,011 --> 00:07:10,011 will turn off the dropdown except on the pages. 113 00:07:10,012 --> 00:07:13,012 So if I'm on the About portion of the Web site I'll see the dropdown, but 114 00:07:13,013 --> 00:07:18,013 if I'm on the Products portion of the Web site I won't see the About dropdown, 115 00:07:18,014 --> 00:07:24,014 and I'm going to change my End Level from All to level 1, in the words, just show me one level. 116 00:07:24,015 --> 00:07:31,015 And if I say Save and I Refresh the Web site, now I have no dropdowns. 117 00:07:31,016 --> 00:07:35,016 I have just my secondary navigation over here on the side. 118 00:07:35,017 --> 00:07:39,017 When I go to News & Information, that secondary information updates, and I have 119 00:07:39,018 --> 00:07:42,018 no dropdowns anywhere. 120 00:07:42,019 --> 00:07:46,019 So this is another way of presenting navigation on your Web site. 121 00:07:46,020 --> 00:07:50,020 This particular template we've put it on the right side of the screen, 122 00:07:50,021 --> 00:07:53,021 but depending on what template you're working with, there might be a left column 123 00:07:53,022 --> 00:07:55,022 where you could put that navigation instead. 124 00:07:55,023 --> 00:07:57,023 And which approach is better? Well, it depends. 125 00:07:57,024 --> 00:08:01,024 It depends on the design for your Web site, it depends on your user interface, 126 00:08:01,025 --> 00:08:05,025 it depends on the kinds of users that you're working with, it depends on your 127 00:08:05,026 --> 00:08:08,026 personal preferences and your client preferences. 128 00:08:08,027 --> 00:08:12,027 But you now have two ways of displaying navigation on your Web site, whether you 129 00:08:12,028 --> 00:08:15,028 do it through dropdowns or whether you split up your navigation over 130 00:08:15,029 --> 00:08:17,029 two modules on the Web site. 131 00:08:17,030 --> 00:08:21,030 I'm going to go ahead and turn everything back on again to get my dropdowns 132 00:08:21,031 --> 00:08:26,031 back, and I'm actually going to unpublish that secondary navigation module, 133 00:08:26,032 --> 00:08:30,032 because I'd rather stick with the dropdowns for this Web site, but now that I've 134 00:08:30,033 --> 00:08:33,033 walked through it, that's the way that you get it done. 135 00:08:33,034 --> 00:08:37,034 So let me just walk you through, how we're going to go back to having those 136 00:08:37,035 --> 00:08:38,035 dropdowns show up again. 137 00:08:38,036 --> 00:08:43,036 Here once again I'm in my Main Menu module, I'm going to go to my Basic Options, 138 00:08:43,037 --> 00:08:49,037 set by End Level to All, Show my Submenu Items and say Save & Close. 139 00:08:49,038 --> 00:08:54,038 And then for my Subnavigation I'm simply going to unpublish it, and 140 00:08:54,039 --> 00:08:59,039 when I refresh my homepage now I've got my dropdowns back again and when I go to 141 00:08:59,040 --> 00:09:04,040 let's say the Executives page, I don't have that sub-navigation over here.