Transcript

00:07 welcome to the second video in the
00:09 series about button plus drop downs in
00:12 this video we're going to look at some
00:14 more advanced techniques including using
00:16 multiple columns in dropdowns making
00:19 mega menus and inserting drop-down menus
00:23 into button bar first of all let's take
00:26 a look at the drop-down that we're going
00:28 to try to create and it's the one on the
00:30 button plus dropdowns page and you can
00:34 see if we just scroll down the page that
00:37 it's the try it out button and you can
00:40 see we've got two columns in there and
00:42 in one of the columns we've got another
00:43 drop-down and it all behaves rather
00:46 nicely responsively and the dropdowns
00:50 move so they don't collide with the side
00:53 of the screen so that's the basic thing
00:55 that we're going to be trying to create
00:59 we've already got our button on the page
01:01 so first thing we need to do is simply
01:05 to add a drop-down menu to it
01:08 now our drop-down menu by default will
01:11 have one linked stack in it now in this
01:14 case we're going to just delete that
01:17 linked stack because what we want to do
01:19 is add some drop columns now drop
01:24 columns are specifically for making
01:28 contained drop-down menus we'll come to
01:31 it later but for mega menus it's great
01:34 to use just normal stacked columns or
01:35 foundation columns the point of the drop
01:40 column stack is when we have a two
01:43 column drop down rather than a big wide
01:45 mega menu so let's just quickly get some
01:49 content into this and I'm going to put
01:53 the content in that we had on the drop
01:59 down page and where that's the column on
02:01 the left and we had another column on
02:05 the right which I've already got
02:06 pre-made as well just to save a bit of
02:08 time
02:10 but they're just full of links this one
02:14 setters are heading the top left and on
02:17 the right hand side we've got our button
02:20 plus forming a nested drop down the
02:23 second the second level drop down and
02:25 that's all covered in the first video
02:28 about drop-down menus so this is this is
02:32 what we've got directly from the from
02:36 the demo site and you can see that when
02:39 we preview it we've got a two column
02:43 drop down and we've got our second level
02:48 drop down dropping out of that so what
02:55 we're going to talk about is how these
02:57 drop column stacks work the actual
03:00 columns themselves are not stacked
03:05 columns they're not foundation columns
03:07 they are button Plus columns made
03:10 especially for the drop column stack so
03:13 you can't put them anywhere else and
03:14 they do a specific job in here you can
03:18 see in each of the the column stacks we
03:21 have some visibility settings for them
03:25 we have a column order so when they're
03:28 stacked you can swap the order around
03:30 it's very easy and I'll show you that in
03:34 a while we've got some padding controls
03:37 and some background colors should you
03:39 need them when they're normal or when
03:41 they're stacked one on top of the other
03:43 we've got a gutter collapse as well but
03:46 that's pretty self-explanatory so back
03:52 to our column stack which contains each
03:54 of these single column drop downs first
04:01 thing to say is there's no setting of
04:04 one column two column three columns if
04:08 you put three column stacks into the
04:11 drop columns then you will get three
04:14 columns so we've added another one and
04:17 another one we get four and so on
04:21 now obviously these can stack when we
04:24 want them to either in a mobile menu or
04:28 at a breakpoint but they sort of
04:32 automatically take up the room that they
04:34 need so let's just get rid of these two
04:38 that we don't need and let's focus on
04:41 the layout of this column stack and it's
04:45 very very easy in most cases you won't
04:48 need to change anything at all what's
04:52 more important is the settings on your
04:54 drop-down menu so let's start there
04:57 so we've got drop-down or mega menu is
05:00 our first choice and we're going to be
05:01 making a normal drop-down menu just for
05:03 the moment the reveal type fade or slide
05:06 and so on and so forth
05:08 but we're going to focus on this minimum
05:10 width setting which will default to a
05:12 hundred percent wide so it will be a
05:15 minimum width of the button this just
05:18 stops it getting too small when we've
05:20 got very short links now when we're
05:23 making multiple column dropdowns it's
05:26 better to set this to a pixel width or a
05:30 rim or an M if you want but most people
05:32 can visualize pixels more easily and we
05:37 can leave it set to 100 for now but bear
05:40 in mind that when it stacks on mobile
05:43 menus sometimes you need to make it a
05:45 bit wider to give room for things like
05:48 this button here that it says another
05:50 drop-down because that's gonna be quite
05:52 wide so I happen to know that 200 pixels
05:56 is a nice nice number for this now this
05:59 is only the minimum width it's not going
06:02 to affect how the desktop columns work
06:06 they will take up as much width as they
06:08 need as we'll seen their settings so
06:11 really that's all we need to focus on
06:12 for now on our drop-down menu settings
06:15 and we move on to the columns so with
06:19 the columns selected we're going to go
06:21 into preview mode and we're gonna see
06:25 what happens when we change some of the
06:27 settings now we've got our two columns
06:31 and you can see immediately that this
06:32 one is wider than
06:34 they are proportionally spaced according
06:37 to their content and that's the default
06:39 setting and if we look at these controls
06:43 and within gray okay we'll change this
06:46 one and stretch it to the container and
06:49 there's absolutely no change and this is
06:53 because we set the min width on the
06:56 drop-down menu to 200 pixels and then
06:59 remember that's just a minimum width so
07:02 unless that was bigger than them menu
07:07 size then we have no alignment to do the
07:11 menu will be the size that it needs to
07:13 be from its content again with the
07:16 column size as well they're set to equal
07:19 columns there but you can see at the
07:22 moment they're not equal and that's
07:24 because we're not stretching them to the
07:27 Container so you can forget about these
07:31 settings until we get a bit further on
07:33 and we look at the mega menus now you
07:39 will see several things about this
07:40 straight away without any settings if we
07:42 make the screen really narrow it
07:46 automatically has stacked into two into
07:49 one column
07:51 you haven't had to set anything at the
07:54 moment the stack setting on the right
07:56 here is set to when the bar or group
07:59 stacks that's if it's in a a menu buying
08:02 a button bar or a button group it's not
08:04 and it just works our drop-down is a
08:08 normal drop-down now if this was in a
08:11 button bar this drop-down would have
08:14 become an accordion but because it's
08:16 just a drop-down on the page then it
08:22 behaves just as it would on desktop it
08:24 just gets realigned so let's have a look
08:27 at why we need the special column stack
08:32 that behaves like that
08:33 and it is quite a rare use where you'd
08:36 want two columns in a drop-down but I've
08:39 got another page here so this is exactly
08:43 the same layout just with a
08:47 special drop down column replaced with a
08:49 normal foundation to column stack and
08:51 let's see how that looks and as you can
08:56 see straight away it's very different
08:58 it's gone full width there is a an age
09:03 to our drop-down it's right up against
09:05 the the edge of the page area so you
09:08 can't see it very clearly but we've also
09:10 lost our automatic alignment of this
09:13 button if you remember the Nestea
09:16 drop-down is made with a another button
09:18 plus which automatically becomes a
09:20 drop-down link now because this is not
09:23 in the drop-down menu or the dedicated
09:26 drop-down column it's lost its special
09:29 alignment now you could manually do that
09:33 but it's not really appropriate and it's
09:36 not the right way to go about it the
09:40 other thing you'll see is that the
09:43 button margin is there now that's easy
09:46 to fix we can just remove our bottom
09:49 margin which is not a bad idea when
09:50 you've got a drop-down of any sort but
09:54 but it's not ideal we're using a
09: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"}]