1 00:00:00,000 --> 00:00:04,000 The next thing that I'd like to do is I'd like to show you how dropdown menus 2 00:00:04,001 --> 00:00:09,001 work inside of Protostar. Oh my goodness! Isn't that a wonderful thing? 3 00:00:09,002 --> 00:00:13,002 Yes, Protostar ships with dropdown menus, it's the first Joomla! 4 00:00:13,003 --> 00:00:17,003 template that's shipped with Joomla! that has dropdown menus built into it. 5 00:00:17,004 --> 00:00:21,004 And we can thank the Bootstrap framework for the presence of those dropdown menus. 6 00:00:21,005 --> 00:00:24,005 So I would like to show you how to configure that. 7 00:00:24,006 --> 00:00:28,006 Before we get started with that I need to add one more a menu item; that is our 8 00:00:28,007 --> 00:00:31,007 Products menu, we haven't added that yet. 9 00:00:31,008 --> 00:00:35,008 I am going to go ahead and build out that products part of this Main Menu first 10 00:00:35,009 --> 00:00:38,009 and then I will show you how to start configuring those dropdowns. 11 00:00:38,010 --> 00:00:44,010 So here in the back end of Joomla! I'm going to start by going to Menus>Main Menu. 12 00:00:44,011 --> 00:00:48,011 And I am actually just going to use this Add New Menu Item over here that flies 13 00:00:48,012 --> 00:00:53,012 out right over on the side, that will put me right into the screen where I can 14 00:00:53,013 --> 00:00:54,013 start adding menu items. 15 00:00:54,014 --> 00:00:59,014 And I am going to select an article, just a single article, and this will be our products page. 16 00:00:59,015 --> 00:01:01,015 So I'm going to select my article. 17 00:01:01,016 --> 00:01:05,016 Incidentally, now my list of articles here is getting a little bit long. 18 00:01:05,017 --> 00:01:10,017 Notice, I have all these nice filters that show up here across the top, 19 00:01:10,018 --> 00:01:14,018 I'm just interested right now in my products, so I can choose products right here from the list. 20 00:01:14,019 --> 00:01:18,019 And there is just my product pages, that's the ones I need to link to, 21 00:01:18,020 --> 00:01:23,020 so I am going to pick my Products page here, give this a title of products. 22 00:01:23,021 --> 00:01:28,021 And that will go right there on the very top level and same level as home for my 23 00:01:28,022 --> 00:01:31,022 Web site and I am going to say Save a New. 24 00:01:31,023 --> 00:01:35,023 I am going to add my next item, I am just going to hit my Select button, 25 00:01:35,024 --> 00:01:41,024 Articles>Single Article, all of these products pages are all going to be single articles. 26 00:01:41,025 --> 00:01:46,025 And I'm just going to link to this list and I am just going to start here at the 27 00:01:46,026 --> 00:01:50,026 top with energy bulbs and I am going to work my way on down the list. 28 00:01:50,027 --> 00:01:55,027 And I am going to make my menu title the same as my article title, so that 29 00:01:55,028 --> 00:01:58,028 K-Eco Energy Bulbs. 30 00:01:58,029 --> 00:02:02,029 And remember the one thing that's different with this one is that my parent item 31 00:02:02,030 --> 00:02:06,030 is not the menu root, my parent item is now products. 32 00:02:06,031 --> 00:02:09,031 And it will be products for all of these additional items and I'm sliding in 33 00:02:09,032 --> 00:02:13,032 here underneath products. So I am going to click Save a New again. 34 00:02:13,033 --> 00:02:18,033 I am going to repeat this process for the remaining products items and I'll see 35 00:02:18,034 --> 00:02:20,034 you on the other side. 36 00:02:20,035 --> 00:02:24,035 And there we go, I have just configured my last item here, I am going to go 37 00:02:24,036 --> 00:02:26,036 ahead and Save & Close. 38 00:02:26,037 --> 00:02:30,037 And now here in my Menu structure you see that I have products, I have my four 39 00:02:30,038 --> 00:02:32,038 products listed underneath. 40 00:02:32,039 --> 00:02:36,039 And when I go to the frontend of the Web site and I hit Refresh, I have my 41 00:02:36,040 --> 00:02:40,040 Products link that shows up, when I click on it I wind up with my additional 42 00:02:40,041 --> 00:02:44,041 pages listed underneath, the Energy Bulbs, the Low-Flow Shower Head, 43 00:02:44,042 --> 00:02:48,042 the Mini Panel and the Solar Mug, terrific. 44 00:02:48,043 --> 00:02:53,043 So the next thing I would like to do is I would like to move this main menu from 45 00:02:53,044 --> 00:02:57,044 its location here on the right side of the screen up to the top and somewhere 46 00:02:57,045 --> 00:03:03,045 around in this general area there is a spot for modules called Navigation, where 47 00:03:03,046 --> 00:03:07,046 I can put this navigation bar and it will show up going horizontally. 48 00:03:07,047 --> 00:03:10,047 And that's exactly what I want to do. 49 00:03:10,048 --> 00:03:15,048 So what I need to do to move the location of a menu on the page, 50 00:03:15,049 --> 00:03:16,049 remember, goes through the modules. 51 00:03:16,050 --> 00:03:19,050 So the modules are located here in the back end of Joomla! 52 00:03:19,051 --> 00:03:23,051 under Extensions>Module Manager. 53 00:03:23,052 --> 00:03:27,052 And inside of the Module Manager we have our module called Main Menu, 54 00:03:27,053 --> 00:03:30,053 it's currently in position seven. 55 00:03:30,054 --> 00:03:34,054 And I will show you how to find where those positions are how they are mapped 56 00:03:34,055 --> 00:03:36,055 out on the page here in a later video. 57 00:03:36,056 --> 00:03:39,056 But for right now just click on Main Menu to edit it. 58 00:03:39,057 --> 00:03:42,057 And here for the position right now it's located on the right. 59 00:03:42,058 --> 00:03:46,058 What I would like to do is change that, I am going to change it to Navigation. 60 00:03:46,059 --> 00:03:52,059 So I am going to go ahead and select Navigation from the list, and say Save & Close. 61 00:03:52,060 --> 00:03:58,060 When I refresh the front end of the Web site, my module will have moved from over 62 00:03:58,061 --> 00:04:01,061 here on the right side of the screen up to the top. 63 00:04:01,062 --> 00:04:05,062 And you'll see that we have some dropdowns. Hey! 64 00:04:05,063 --> 00:04:06,063 Look at that, how cool is that? 65 00:04:06,064 --> 00:04:09,064 And that dropdown is only showing up here in the Products page. 66 00:04:09,065 --> 00:04:14,065 Interestingly, that's because we're within the Products section of the Web site. 67 00:04:14,066 --> 00:04:17,066 If I go back to home, you will notice that that dropdown for 68 00:04:17,067 --> 00:04:19,067 Products disappears. 69 00:04:19,068 --> 00:04:23,068 We know we have sub-navigation for About when I click on the About link, 70 00:04:23,069 --> 00:04:27,069 I have a dropdown that appears here. But again no dropdown for Products. 71 00:04:27,070 --> 00:04:28,070 So why is this happening? 72 00:04:28,071 --> 00:04:33,071 Well, remember when this module was displayed on the right side of the site, 73 00:04:33,072 --> 00:04:38,072 we had the sub-navigation show up, when we were on the specific areas. 74 00:04:38,073 --> 00:04:41,073 What we like to do now though is, we would always like to have those dropdowns 75 00:04:41,074 --> 00:04:43,074 available, no matter where we in the Web site. 76 00:04:43,075 --> 00:04:47,075 The other thing we need to have happen is we need to have this navigation bar 77 00:04:47,076 --> 00:04:51,076 go horizontally across the page rather than stacked in a vertical manner the 78 00:04:51,077 --> 00:04:52,077 way it is right now. 79 00:04:52,078 --> 00:04:58,078 So, here's what we need to do, let's go back into Main Menu and let's fix this 80 00:04:58,079 --> 00:05:00,079 dropdown issue first. 81 00:05:00,080 --> 00:05:05,080 We want to have the dropdowns available on every page of the Web site all the time. 82 00:05:05,081 --> 00:05:09,081 So what we are going to do to have all of our menu items show in a dropdown 83 00:05:09,082 --> 00:05:13,082 menu and have them show on every page of the Web site all the time, 84 00:05:13,083 --> 00:05:17,083 here in our Basic options we are going to go to this item here called Shows 85 00:05:17,084 --> 00:05:21,084 Submenu Items, right now that's set to No. 86 00:05:21,085 --> 00:05:25,085 And the way that that works is the behavior we are seeing when this module was 87 00:05:25,086 --> 00:05:26,086 on the right side of the page. 88 00:05:26,087 --> 00:05:29,087 When you are the Products section, you saw the sub navigation for products, but 89 00:05:29,088 --> 00:05:31,088 you didn't see the sub navigation for About. 90 00:05:31,089 --> 00:05:36,089 What we are going to do now is, we are going to say Show Sub-menu Items 91 00:05:36,090 --> 00:05:38,090 all the time, by setting this to Yes. 92 00:05:38,091 --> 00:05:42,091 When you set this to Yes, if this module was on the right of the screen, 93 00:05:42,092 --> 00:05:45,092 you'd always see the sub navigation all the time, which doesn't necessarily 94 00:05:45,093 --> 00:05:46,093 work for that display. 95 00:05:46,094 --> 00:05:50,094 But it works great for a dropdown menu because whenever you roll your mouse 96 00:05:50,095 --> 00:05:53,095 over About or Products the dropdown menu will appear. 97 00:05:53,096 --> 00:05:59,096 Go ahead and just say Save and when we refresh the front end of the Web site, 98 00:05:59,097 --> 00:06:04,097 now we'll see the drop downs appear for About and the dropdowns will appear for 99 00:06:04,098 --> 00:06:05,098 Products right here. 100 00:06:05,099 --> 00:06:07,099 So that's really cool. 101 00:06:07,100 --> 00:06:09,000 Of course, we also have a dropdown for News & Info. 102 00:06:09,001 --> 00:06:12,001 None for home because we don't have any sub-navigation for home. 103 00:06:12,002 --> 00:06:17,002 So the last problem we need to solve is how do we make this navigation bar go 104 00:06:17,003 --> 00:06:19,003 horizontally across the page? 105 00:06:19,004 --> 00:06:25,004 Fortunately, that is a property that's built-in to Bootstrap. Bootstrap has a 106 00:06:25,005 --> 00:06:33,005 style that's built into its stylesheet called Nav-pills and this particular 107 00:06:33,006 --> 00:06:37,006 class formats navigation bar to go horizontally across the page. 108 00:06:37,007 --> 00:06:43,007 So to configure this, all we need to do is now go to our Advanced Options. 109 00:06:43,008 --> 00:06:49,008 And here where you have got a menu class suffix, what I would like for you to 110 00:06:49,009 --> 00:06:55,009 type in is the following, a space followed by nav-pills. 111 00:06:55,010 --> 00:06:56,010 Why the space first? 112 00:06:56,011 --> 00:07:03,011 Well, what's going to happen in this particular text, nav-pills will be put into 113 00:07:03,012 --> 00:07:09,012 the class attribute inside of the appropriate HTML tag, and there may be already 114 00:07:09,013 --> 00:07:12,013 be some other classes present, in fact there are in the back end of Joomla!. 115 00:07:12,014 --> 00:07:17,014 And if you just put in nav-pills without the space in front of that 116 00:07:17,015 --> 00:07:20,015 you'll wind up running this into making a whole new class names. 117 00:07:20,016 --> 00:07:24,016 So it will be something like menunav-pills. 118 00:07:24,017 --> 00:07:30,017 What we want to have is the class of menu separate from the class of nav-pills 119 00:07:30,018 --> 00:07:31,018 and that's why we put a space in front of this. 120 00:07:31,019 --> 00:07:39,019 So go ahead and save one more time and when we refresh this page, our navigation 121 00:07:39,020 --> 00:07:46,020 is now going horizontally across the page and we have dropdowns which all work 122 00:07:46,021 --> 00:07:51,021 really, really well and of course we can now navigate freely around the Web site 123 00:07:51,022 --> 00:07:55,022 skipping about to whatever page we want to go to without necessarily visiting 124 00:07:55,023 --> 00:07:57,023 the top-level page first. 125 00:07:57,024 --> 00:08:02,024 This same formatting here that I just put up here on the top for this nav-pills 126 00:08:02,025 --> 00:08:05,025 we can now apply down here to the bottom to the Footer menu. 127 00:08:05,026 --> 00:08:09,026 So let's go ahead and take care of that while we're here, we will go ahead 128 00:08:09,027 --> 00:08:10,027 and say Save & Close. 129 00:08:10,028 --> 00:08:14,028 And now down here in the Footer menu, we will do exactly the same thing. 130 00:08:14,029 --> 00:08:23,029 If we go to the Advanced Options to the Menu Class Suffix space nav-pills and say Save & Close. 131 00:08:23,030 --> 00:08:28,030 And if we refresh the front end of the Web site, now our navigation is going 132 00:08:28,031 --> 00:08:30,031 horizontally down here on the bottom as well. 133 00:08:30,032 --> 00:08:36,032 So that's pretty cool, we've added a new navigation item, the products with all 134 00:08:36,033 --> 00:08:40,033 of its sub navigation, we moved our menu module to appear at the top of the 135 00:08:40,034 --> 00:08:45,034 screen and we configured our dropdown menus all at the same time.