0:00 [Music]
0:07 welcome to the second video in the
0:09 series about button plus drop downs in
0:12 this video we're going to look at some
0:14 more advanced techniques including using
0:16 multiple columns in dropdowns making
0:19 mega menus and inserting drop-down menus
0:23 into button bar first of all let's take
0:26 a look at the drop-down that we're going
0:28 to try to create and it's the one on the
0:30 button plus dropdowns page and you can
0:34 see if we just scroll down the page that
0:37 it's the try it out button and you can
0:40 see we've got two columns in there and
0:42 in one of the columns we've got another
0:43 drop-down and it all behaves rather
0:46 nicely responsively and the dropdowns
0:50 move so they don't collide with the side
0:53 of the screen so that's the basic thing
0:55 that we're going to be trying to create
0:59 we've already got our button on the page
1:01 so first thing we need to do is simply
1:05 to add a drop-down menu to it
1:08 now our drop-down menu by default will
1:11 have one linked stack in it now in this
1:14 case we're going to just delete that
1:17 linked stack because what we want to do
1:19 is add some drop columns now drop
1:24 columns are specifically for making
1:28 contained drop-down menus we'll come to
1:31 it later but for mega menus it's great
1:34 to use just normal stacked columns or
1:35 foundation columns the point of the drop
1:40 column stack is when we have a two
1:43 column drop down rather than a big wide
1:45 mega menu so let's just quickly get some
1:49 content into this and I'm going to put
1:53 the content in that we had on the drop
1:59 down page and where that's the column on
2:01 the left and we had another column on
2:05 the right which I've already got
2:06 pre-made as well just to save a bit of
2:08 time
2:10 but they're just full of links this one
2:14 setters are heading the top left and on
2:17 the right hand side we've got our button
2:20 plus forming a nested drop down the
2:23 second the second level drop down and
2:25 that's all covered in the first video
2:28 about drop-down menus so this is this is
2:32 what we've got directly from the from
2:36 the demo site and you can see that when
2:39 we preview it we've got a two column
2:43 drop down and we've got our second level
2:48 drop down dropping out of that so what
2:55 we're going to talk about is how these
2:57 drop column stacks work the actual
3:00 columns themselves are not stacked
3:05 columns they're not foundation columns
3:07 they are button Plus columns made
3:10 especially for the drop column stack so
3:13 you can't put them anywhere else and
3:14 they do a specific job in here you can
3:18 see in each of the the column stacks we
3:21 have some visibility settings for them
3:25 we have a column order so when they're
3:28 stacked you can swap the order around
3:30 it's very easy and I'll show you that in
3:34 a while we've got some padding controls
3:37 and some background colors should you
3:39 need them when they're normal or when
3:41 they're stacked one on top of the other
3:43 we've got a gutter collapse as well but
3:46 that's pretty self-explanatory so back
3:52 to our column stack which contains each
3:54 of these single column drop downs first
4:01 thing to say is there's no setting of
4:04 one column two column three columns if
4:08 you put three column stacks into the
4:11 drop columns then you will get three
4:14 columns so we've added another one and
4:17 another one we get four and so on
4:21 now obviously these can stack when we
4:24 want them to either in a mobile menu or
4:28 at a breakpoint but they sort of
4:32 automatically take up the room that they
4:34 need so let's just get rid of these two
4:38 that we don't need and let's focus on
4:41 the layout of this column stack and it's
4:45 very very easy in most cases you won't
4:48 need to change anything at all what's
4:52 more important is the settings on your
4:54 drop-down menu so let's start there
4:57 so we've got drop-down or mega menu is
5:00 our first choice and we're going to be
5:01 making a normal drop-down menu just for
5:03 the moment the reveal type fade or slide
5:06 and so on and so forth
5:08 but we're going to focus on this minimum
5:10 width setting which will default to a
5:12 hundred percent wide so it will be a
5:15 minimum width of the button this just
5:18 stops it getting too small when we've
5:20 got very short links now when we're
5:23 making multiple column dropdowns it's
5:26 better to set this to a pixel width or a
5:30 rim or an M if you want but most people
5:32 can visualize pixels more easily and we
5:37 can leave it set to 100 for now but bear
5:40 in mind that when it stacks on mobile
5:43 menus sometimes you need to make it a
5:45 bit wider to give room for things like
5:48 this button here that it says another
5:50 drop-down because that's gonna be quite
5:52 wide so I happen to know that 200 pixels
5:56 is a nice nice number for this now this
5:59 is only the minimum width it's not going
6:02 to affect how the desktop columns work
6:06 they will take up as much width as they
6:08 need as we'll seen their settings so
6:11 really that's all we need to focus on
6:12 for now on our drop-down menu settings
6:15 and we move on to the columns so with
6:19 the columns selected we're going to go
6:21 into preview mode and we're gonna see
6:25 what happens when we change some of the
6:27 settings now we've got our two columns
6:31 and you can see immediately that this
6:32 one is wider than
6:34 they are proportionally spaced according
6:37 to their content and that's the default
6:39 setting and if we look at these controls
6:43 and within gray okay we'll change this
6:46 one and stretch it to the container and
6:49 there's absolutely no change and this is
6:53 because we set the min width on the
6:56 drop-down menu to 200 pixels and then
6:59 remember that's just a minimum width so
7:02 unless that was bigger than them menu
7:07 size then we have no alignment to do the
7:11 menu will be the size that it needs to
7:13 be from its content again with the
7:16 column size as well they're set to equal
7:19 columns there but you can see at the
7:22 moment they're not equal and that's
7:24 because we're not stretching them to the
7:27 Container so you can forget about these
7:31 settings until we get a bit further on
7:33 and we look at the mega menus now you
7:39 will see several things about this
7:40 straight away without any settings if we
7:42 make the screen really narrow it
7:46 automatically has stacked into two into
7:49 one column
7:51 you haven't had to set anything at the
7:54 moment the stack setting on the right
7:56 here is set to when the bar or group
7:59 stacks that's if it's in a a menu buying
8:02 a button bar or a button group it's not
8:04 and it just works our drop-down is a
8:08 normal drop-down now if this was in a
8:11 button bar this drop-down would have
8:14 become an accordion but because it's
8:16 just a drop-down on the page then it
8:22 behaves just as it would on desktop it
8:24 just gets realigned so let's have a look
8:27 at why we need the special column stack
8:32 that behaves like that
8:33 and it is quite a rare use where you'd
8:36 want two columns in a drop-down but I've
8:39 got another page here so this is exactly
8:43 the same layout just with a
8:47 special drop down column replaced with a
8:49 normal foundation to column stack and
8:51 let's see how that looks and as you can
8:56 see straight away it's very different
8:58 it's gone full width there is a an age
9:03 to our drop-down it's right up against
9:05 the the edge of the page area so you
9:08 can't see it very clearly but we've also
9:10 lost our automatic alignment of this
9:13 button if you remember the Nestea
9:16 drop-down is made with a another button
9:18 plus which automatically becomes a
9:20 drop-down link now because this is not
9:23 in the drop-down menu or the dedicated
9:26 drop-down column it's lost its special
9:29 alignment now you could manually do that
9:33 but it's not really appropriate and it's
9:36 not the right way to go about it the
9:40 other thing you'll see is that the
9:43 button margin is there now that's easy
9:46 to fix we can just remove our bottom
9:49 margin which is not a bad idea when
9:50 you've got a drop-down of any sort but
9:54 but it's not ideal we're using a
9:59 foundation column is ideal is in mega
10:03 menus it's great for mega menus it does
10:07 all the things you need in a mega menu
10:10 because we are working at full width so
10:14 let's take a look at the mega menu and
10:16 what we're going to do is we're going to
10:17 take a look at the one that's on the
10:18 button plus demo site which is on the
10:21 learn button and here it is just in
10:25 isolation it's in a button bar we've got
10:28 two zones if you've watched the button
10:31 bar zone video you'll know a bit more
10:34 about what's going on there we've got
10:36 our image on the left and right aligned
10:39 in this zone we have main part of the
10:43 menu it's a bit hard to see because the
10:46 text is white and we haven't got the
10:48 background in here
10:51 we've got our home features drop down
10:54 our fat buttons and then there's the the
10:57 learn button and this appears on the
11:01 site as you can see let's just take a
11:03 look at how it looks on the live site
11:07 and here it is and bit of hocus-pocus
11:10 makes it appear when we sprawl and we've
11:14 got our mega menu there's some nice
11:16 icons in there and just like all button
11:21 bar menus it magically transforms into
11:25 an accordion for mobile menus so looks
11:32 great
11:33 and it's very very easy to create so
11:38 we've got our button with a drop down
11:41 menu and this time we have it set to
11:44 mega menu because that's exactly what we
11:46 want no other settings required we've
11:50 got some custom styles for the menu
11:52 items just so that we can style all
11:54 these links together we've got a series
11:56 of our link stacks these colored ones
11:59 are set to heading links and we've
12:02 dropped some images in as well other
12:05 than that it's a three column foundation
12:07 stack and it behaves just like a three
12:10 column stack would if you put it
12:12 anywhere else on the page so it's really
12:14 really easy to design mega menus just
12:16 forgetting to make a menu and just
12:18 design your columns as normal now just
12:24 like that quickly finish off by showing
12:26 you a sort of menu that the drop-down
12:29 columns were really made for and what
12:33 we've got here at the moment just is a
12:35 button bar with some normal dropdowns in
12:37 it let's have a quick look how it looks
12:39 and there it is we've got a couple of
12:43 dropdowns with some arbitrary text in it
12:47 and we've got our features menu which is
12:50 where we'd like to use our columns so
12:53 I'm going to have the columns and I'm
12:57 doing this just to show that this is
13:00 absolutely default settings I'm not
13:02 going to change anything on the top
13:04 and Stax what I am gonna do is drop some
13:09 pre-made columns in there just to save
13:12 time
13:13 so one let's just get rid of these blank
13:16 ones
13:17 so all these column stacks again the
13:19 actual columns themselves are just
13:20 default settings but I've already
13:23 populated them with some links just to
13:26 save a bit of time so let's have a
13:28 second column that one's got some badger
13:30 icons like we saw in the first video and
13:33 a third one drop that inside the other
13:38 column there we go get it out and that's
13:41 the third one and one final one so we've
13:47 got four columns I haven't changed any
13:49 of the settings whatsoever and let's
13:52 just see what we've got and there we go
13:56 we've got a great little multi-column
14:00 drop down menu now what we can do is
14:03 make it look a little nice than that
14:06 let's turn off the dividers for a start
14:09 off and if we come back to our drop down
14:13 menu before we preview so this is the
14:15 main drop down menu stack so with the
14:18 dividers off it looks a lot a lot better
14:20 but we've got a little setting here that
14:23 says show pip wedding bar and you only
14:26 want to use this one it's in a button
14:27 bar but it just finishes it off nicely
14:30 with the little pip and you can see how
14:32 quick and simple that was that is all
14:34 the default settings on those columns
14:36 and it's very very easy to set up and
14:40 that's exactly the sort of thing that it
14:43 was designed to do so with that let's
14:52 put a mobile menu on it just to finish
14:54 it off and just show how easy that is
14:56 our bar features toggle menu we're gonna
15:00 leave that all at its default settings
15:03 we could put some text on it but we
15:05 don't need to and let's preview
15:12 so here we go we go to mobile with our
15:15 mobile menu and all our desktop items
15:20 have nicely ordered themselves up
15:23 everything has become accordions so all
15:26 the drop-down menus accordions and
15:28 there's our three column in the in the
15:35 features accordion so that's how easy it
15:38 is to make them over our menu one stack
15:40 dropped in and really this is so simple
15:44 and yet it gives such a unique look to
15:47 your sites and that concludes this video
15:51 on the drop down columns and a few more
15:55 of the advanced drop down features
15:56 thanks for watching and I'll see you
15:58 next time"}]