Transcript

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