0:00 [Music]
0:07 so let's see how easy it is to make a
0:10 drop-down menu with button plus two
0:14 first of all we'll add a button to the
0:17 page that's put it in the middle just
0:19 for the purposes of this and give it a
0:21 custom style drops a gray and if you
0:23 want as well
0:24 you notice that I've just put a one
0:27 column underneath with lots of padding
0:29 that's just because there's nothing else
0:31 on the page and we need to make room for
0:33 the drop down to drop into so to add a
0:36 drop down we just select drop down menu
0:39 from the button plus add child button
0:43 and you notice that the drop down is all
0:45 highlighted in red and the drop down
0:48 menus add child button is red as well so
0:50 it's easy to distinguish it from the
0:52 button plus one which is blue we've
0:55 already got one linked we can add
0:57 another link the link text can be
1:02 changed just as normal by clicking on it
1:05 another link we can add other elements
1:10 into the drop-down such as a foundation
1:14 divider we might want to add a heading
1:19 so let's say this is a heading now
1:24 headings let's make this bold as well
1:27 headings don't have hover colors because
1:32 that might look like links and we make a
1:34 link into our heading just by clicking
1:38 on the heading checkbox so that won't
1:40 get any Holika lism it's just a heading
1:45 within the other links so we have
1:49 another link here and let's make this a
1:53 badge image link so we can drop a small
1:59 icon here and I like to make this 16
2:04 pixels high
2:06 because that's the size that's one room
2:08 texting foundation so it all matched it
2:11 tastes quite nicely
2:12 and then we can duplicate this a couple
2:16 of times just so that we can drop a few
2:18 different colored images in and make it
2:20 look a bit nicer there we go so we've
2:28 got our rudimentary drop-down menu let's
2:32 just give it a bit of custom padding and
2:35 I like to increase the right-hand side
2:38 to 16 I think it just looks a bit better
2:40 especially with the badge emerges and
2:43 let's see what we've got and there's a
2:49 drop-down menu heading you see the
2:52 heading out snow cover everything else
2:54 has its hover colors the other nice
2:58 thing you can do when you're using badge
3:00 images is if you have a link in amongst
3:03 your badge images we want the text all
3:07 to be aligned so we just add a badge
3:10 spacer and if we make that the same
3:13 width as the images were those ones have
3:17 to be square then we get our link text
3:20 all lined up nicely even though that one
3:23 hasn't got a badge now the next thing we
3:30 can look at he's making an ST drop down
3:34 so we'll have a second level drop down
3:36 and we simply do that by adding another
3:39 button plus with the drop down so let's
3:41 have the link there and we'll call this
3:45 put the button text that is dropped down
3:47 just so that he stands out and the first
3:50 thing you notice is it doesn't look like
3:52 a button the drop down has automatically
3:54 styled it as a link so it fits in with
3:58 the rest you can turn this off if you
4:01 want an actual button anywhere for
4:04 individual ones and let's make that into
4:07 a combi button so we get that little
4:09 arrow which we can do on the top one as
4:13 well see it's just selecting a combi
4:15 just indicate that it's a drop-down so
4:19 then we had a drop down and you can
4:21 quite clearly see with the red now that
4:22 we've got a drop down within a drop down
4:24 and let's put a couple of links in this
4:27 one and have a preview and there's our
4:36 second level drop down now the other
4:39 thing you can do is actually drop one
4:41 you've already made so if we copy that
4:45 drop down that button and each all its
4:48 dropdowns into that so now we've got one
4:53 two three four levels of drop-down all
4:56 instantaneously and you can see now
5:00 we've got our first level second level
5:02 this is the button we just dropped in
5:04 which is going to start from the top
5:06 again if you like it's the same menu and
5:09 the fourth level the alignments will all
5:16 sort themselves out if they get too
5:19 close to the edge of the screen you can
5:21 of course customize the alignment left
5:24 or right that you that you want
5:33 hovers can be used to activate the
5:38 dropdowns instead of clicks now in the
5:41 case of this we need to set hover on all
5:44 the menus that's not inherited so let's
5:47 just change them all to hover and now
5:53 they open on hover and you notice that
5:56 we can go somewhat diagonally we don't
5:58 have to go straight across and down we
6:00 can go diagonally without you
6:02 disappearing so that's nice and usable
6:05 and these you can see I didn't have any
6:11 padding to that one so the things the
6:13 hover effect go to it right to the edge
6:16 these some hover effects of course
6:19 degrade nicely to touch events so taps
6:24 on mobile devices because we don't like
6:26 horror on mobile on touch devices so
6:34 let's talk about styling if we want to
6:38 change this style of a drop-down we've
6:40 got lots of options for the links that
6:42 links background there's some more for
6:45 when it's stacked in a menu which we'll
6:46 get to in another video but if we apply
6:49 a background a gray background this
6:51 drop-down let's make a bit lighter
6:53 that's better then you'll notice it's
6:58 not being applied to the others well all
7:01 we need to do is go into the style
7:03 settings for the nested dropdowns and
7:06 change them to inherit and as we do that
7:09 you'll see each time they get the
7:12 inherited color so now we've on the top
7:15 one we change the link color to blue
7:17 then the link color all the way down
7:20 gets changed to blue so it's really easy
7:23 to style large numbers of them you can
7:27 of course have them different if you
7:29 want but it's a bit weird you can change
7:31 the border the corners you can add
7:33 shadows we can control the links
7:36 alignment we can control the button
7:38 alignment which is important if you've
7:40 got a an actual button in the in the
7:43 menu rather than it being
7:45 filled with a link and we can use fonts
7:51 from font Pro we can either inherit the
7:55 font size from the button or we can
7:57 specify custom fonts and there are lots
8:01 of other options for sizing and as we'll
8:06 see there's a mega menu for when it's
8:08 being used in button bar"}]