Transcript

00:00 hey everybody joe workman here and today
00:02 i'm really excited to show you the new
00:04 burger sack the burger stack is well
00:07 it is fancy animated hamburger buttons
00:10 that you've probably seen all over the
00:12 web and you're like i want that how do i
00:14 get that onto my website
00:16 right
00:17 so it is exactly what it says on the tin
00:20 it simply is a stack you add to the page
00:23 you can select the animated hamburger
00:25 that you want
00:26 with a bunch of style options and you're
00:28 good to go it's easy to integrate with
00:31 tons of stuff out there so let's jump in
00:33 and have a look
00:34 so there are two different burger stacks
00:36 there's burger and burger svg um
00:39 basically they both
00:40 do animated hamburgers but just use
00:42 different technologies to achieve it so
00:45 instead of trying to merge them into one
00:46 stack i just did two separate stacks
00:49 uh to kind of keep them separated and in
00:52 their own playground so as you see each
00:54 of these burgers in this demo has a
00:56 different style of animation some have a
00:58 lot of them have closed crosses but some
01:01 of them animate beautifully into nice
01:03 little arrows
01:04 now i'll admit the animations in the svg
01:07 ones are really eye-catching um there's
01:10 a lot of movement and a lot of things
01:12 going on but it really just depends on
01:14 what your style is and what you'd like
01:16 to have and using the burger stack on
01:18 your page is a piece of cake simply drag
01:20 and drop it wherever you want and
01:22 essentially use it as a button let's
01:24 have a look at the settings of this
01:26 burger stack you simply select the style
01:28 that you want
01:29 you can reverse the animation which
01:32 essentially will flip it mostly that's
01:34 useful for the arrows so that you can
01:36 have arrows going either direction and
01:38 you can preview the active state right
01:41 so if we look at particularly this one
01:43 preview we can see that that's an arrow
01:45 okay and we and if we reverse that we'll
01:47 see that the end result would be an
01:50 arrow that points to the right versus
01:52 the left
01:54 you can obviously adjust the sizing so
01:56 we have the actual sizing the horizontal
01:59 sizing vertical sizing padding um
02:02 spacing in between the lines
02:05 the color and you can have different
02:06 colors based on the default menu state
02:09 versus the active state which is like
02:11 the arrow or the close button
02:13 you can have a hover opacity so when you
02:15 hover over it
02:16 you can have alignment and obviously
02:18 like anything because we all love
02:20 classes now you can assign a class to
02:22 this so you can either style it with
02:23 swatches or use that class to integrate
02:25 it with external
02:27 stacks
02:29 so i want to give you a quick example of
02:30 how we can integrate this with top bar
02:32 from foundation 6. so here i have top
02:34 bar and i've set the title zone to be
02:37 drop a drop zone in the title bar
02:41 and essentially all you then need to do
02:43 is drag and drop your burger configure
02:45 it to be whatever you want and then when
02:47 we look at it we'll see that we have a
02:48 nice animated burger
02:50 inside of top bar so integrating the
02:52 burger stack with foundation 6 is
02:54 definitely very easy just simply drag
02:56 the burger into where you want to be
02:58 clicked or you can use the foundation
63:00 launcher stack which allows you to
03:02 launch things like a drop zone
03:04 or a a light box or an off campus super
03:08 easy okay now
03:10 ex integrating with external stacks from
03:13 foundation six there's a lot of other
03:15 ways um depending on the stack um you
03:17 can integrate it with a class
03:20 or you can just use our free link stack
03:22 which then allows you to add a
03:23 particular link and data attributes and
03:25 all that type of stuff if you have a
03:27 stack that you'd like to be integrated
03:29 with burger and you can't get it to work
03:31 with either you know a class or our free
03:34 link stack go ahead and uh post
03:37 something on the community and we'll be
03:38 happy to uh see if we can get that
03:41 working for you so take care i hope you
03:42 enjoy burger super simple to use
03:45 it's a great little stack that hopefully
03:47 adds a little bit of pizzazz to your
03:49 website so take care go out there and
03:51 make your websites great bye
03:54 "}]