I summary it was weird i rebooted and then like when I launched my wire cache
the app that I used to do my streaming it just kept bouncing right and never finished and I launched Chrome to get
into the into the stream and it would just keep bouncing too so weird
well okay there we go
feedback going on here oh it's on my phone to post the comment to you guys I
opened the livestream on my phone and I was like well how come I'm hearing myself okay sorry about that man my
audio seems a little bit hot is it I didn't change my any my settings from
previous weeks but let me know I'm in the chat let me get the chat room open
really quick pop out chat sorry have all
this stuff set up beforehand I just had to reboot cool excellent man we got a we
got a busy chat room today audio slightly hot okay tweak the audio a
little bit hopefully that'll maybe soften it a little bit okay man I guess
a lot of people want to chat about foundation 6 menus huh cool I don't have
too much of an agenda today I just I just thought I would jump on start
playing around with menus I know there I have a couple things people I know have been asking a lot about and so yeah I'm
sure we're gonna hit stuff like you guys do Prague and ask me questions and then and wanting to know how to do this and
that and it'll probably turn out to be you know make some nice updates for menus you know I'm thinking one of the
big things for a foundation 6.2 will probably be some overhaul of some menus
to make there are some options I intentionally just I didn't add just to
get the things out the door right so there are missing options I've added a few as people have asked but um you know
there's definitely a lot of features that are in the framework that I haven't added to the stacks yet so yeah
hopefully uh yeah hopefully we'll cover some of those today I'll start off by looking at
something I know a lot of people have mentioned that they've had some issues with and that's with hover effects right
so they're getting just the hover effect excuse me on the menu someone someone on
the on the community today also asked about how can I have a menu where like each menu item is a different color so
maybe we could do that that's pretty simple to do and yeah so I'm gonna do
those two things first we're gonna look at hover colors um so you know hover effects when you hover over the menu how
to change those colors and I'll be honest I'm some of the stuff I haven't really played around too much
I know how how I would do it so it'd be kind of be fun to kind of just play around with this live and I'm sure I'll
find bugs while we're looking at this stuff or some things that could be made better and I'll definitely make sure
that we make them better so without further ado let me go ahead and I haven't even launched wrap Weaver yet
let's go ahead and do that we were going
with my sandbox project screen on my
left is when I rebooted it it always goes to 100% it is blinding
there we go okay um all right let's gotta shrink this window down a little
bit
okay there we go rapidweaver
well maybe we could look at I think I went over the foundation there are the total CMS menus before but we can
possibly look at that again as well you know one thing I want to do is
OOP let's just do that there we go okay
now that little Weaver space solo goes not not in our way someone commented
before they liked my video better on the left um oh uh oh look at setting that up
again well I was just playing around thought maybe on the right would look okay but anyway hey so let's build out
um let's look at some stacks here okay
so let's just for now I'm just gonna use the default menu stack right now there
is our W menu and I think that something that I think confuses some people is you
know how do you bring in their rapid eevr menu into you like a drop-down and stuff like that right and if you want to
do the rapidweaver menu so the menu that's built out via the wrap weaver pages list you have to use the art of
view menu and this is a lot more set a
lot less settings than the normal menu stacks so this you could basically say
you know do you want a menu drop-down drill down or an accordion right obviously drop-down drill down an
accordion and menu are separate stacks on their own right and because of that
there are a lot more settings if you manually build out your menus okay the
reason for this is that the way Rapp Weaver generates a menu is a little bit
it doesn't give me control over over as much control as that would need okay
therefore I have to kind of automate some things when we're using the wrap
Weaver menu I have to assume some things and not give you guys controls controls for other things so so yeah that's why
the wrap mover menu um is doesn't have as many settings so I'm thinking about
maybe in 6.2 maybe doing a RW men you are debut drop-down RW drill down an
RW accordion to try to give you more settings I don't know no promises but
it's something I'm going to be playing around with see if I can I can do that so I know using the rap Weaver generated
menus does make things easier because you add a new page and then automatically adds things to the menu
you don't need to worry about it right but yeah it is will have more control so
for all of today um I am gonna be using the non rap Weaver menu stacks because
um they will give us a little bit more control over style options and things
that we're gonna want um so yeah that's that so let's start off with menu okay
and I'm not gonna I guess we can build out a quick little menu here let's just
do like I'll just do will do 5 min you
items how about that so we have home and
we have products a services blog and
about okay quickly just having a few
different things here now I'm not gonna go over all the basics of menus right I
mean I've already done some lives on that I do plan on doing the reason haven't done those shorter video
tutorials on menus is because I knew I was going to be reef you know revitalizing men using adding more
features in 6.2 so I kind of wanted to
wait for that so that didn't have to redo all those videos so yeah hopefully that answers that
so okay let's look at so I guess we'll start off
with doing oops with doing some some hover effects okay so first off when we
look at a menu right we'll see that that's just kind of the default menu that we have right and let's do let's
and you know it's - yeah we want horizontal let's do justified though
things justified right yeah okay so let's say we want this justified so it kind of justified spreads it about right
so all spreads out and stuff okay obviously by default menus used link
colors right so if I were to go into site Styles and we look at the primary
color actually no we go down to the link color right and if I were to make link color um scroll is over here see two colors I
were to make them make them red why not let's make them red you'll see that the menu color is red and if I preview that
they're now red but the the hover color here is the color of the hover link
hover right so if I go here I'd say when I hover I want them to go slightly
darker red so I want to hover over them
we get a slightly darker red okay so that is one way right so that's like the
default way to control the hover color of our menu in terms of the text right
so but like sometimes we want our menu to be a different color from our links
on the page right so what do we do then right let's say for example um let me
just add some content to this page really quick well I'm just gonna add some text all right so let's just add
some text kind of make this into a live page here let's just a lot of picture up
here - it's for fun and I always use this picture but
whatever it's fine right now we have a picture and we have a menu up top okay obviously maybe we
would want a little bit of padding around the menu so maybe when we want to make the menu some colors right
something like that right so what I'm gonna do is I'm going to container here
[Music] what is up with me lately I keep
clicking on the wrong thing okay and we're gonna do first off I'm gonna use
features I can add some utility classes just for me and we're gonna do padding
32 so here I'm going to go into this
container I'm gonna do padding 132 okay
let's see if that's too much all right and then we're gonna want to give this
contain this menu a background color okay actually let's do padding by 32
because p/y 32 I'm not going to go over utility classes today but yeah this
allows us to add some padding via some these utility classes that's inside styles okay I think I've gone over them
a little bit in some of the other livestreams started some quick some padding to the top and the bottom of
this right so you go ahead and let's add a background color right so let's go
ahead and I'm gonna quickly add a background color to this let's do background and call it my menu how about
that my menu we're gonna do we'll do a background color and let's just leave it
gray okay just so it kind of stands out and we're gonna do this we're gonna do
classes mine and you there we go okay
there's our menu wow that padding is really big and it probably needs some margin below it all right let's do a
margin bottom 32 I'm gonna reduce that padding by a lot I'm gonna do it by 16
okay there we go so there is kind of a menu okay so I
added a little bit margin beat below the menu and now we have our image and some
text just so we could see something but if you notice our our colors are still
red and let's say if you Lowe's down here our links are also red okay but let's say we wanted this menu let's make
this menu a dark color right actually I made it gray but let's go and make it a darker a darker color let's just let's
just go all out we'll go black okay so it's black actually you know what I'm
gonna let's use a different color let's choose like this dark blue from this
menu here that oh yeah we're gonna use
that color I know you guys are gonna ask I'm trying out this new color app called
color slurp I know I try every color app and there's always something about them
this one seems okay though it's very simple so these are my Weaver space colors I just really started using a
little bit ago so yeah anyway so I picked that lets get that color and then
we're gonna go into this background swatch and we're gonna go into it oh there's that in hello and I need to
paste in or is it this one no this one there paste
okay there's the blue dark blue menu okay oops I preview in the browser by
accident reviewer okay there we go I
have a dark blue menu so it kind of brings in the blue from the picture so it kind of goes right a little bit um
but this red obviously looks horrible even though the Golden Gate Bridge is red right but it just doesn't look great
right so what would look good probably white right right I mean a lot of text a
lot of menus are some sort of dark color with white right I mean that's just what it is a lot so what can we do there okay
so if you noticed inside site Styles the
menu by default is controlled by the link colors right so if we look link
colors is a part of text colors right so if I wanted to define a custom link
color for my menu well luckily we'll notice that the link color is a part of text colors and if we look at our
swatches will notice that voila Oh magically there is a text colors swatch okay so I'm gonna go ahead and add text
colors and while I don't really care about any of the other colors here I only care about link um yeah I'm gonna
go ahead and make link colors here um let's just make it white white okay and
maybe the hover color if we one do and maybe we'll do I will do white with I
got 80% white or something like that okay so now now our link color here is
white and eighty percent white and we have to add our class now I'm already
using my menu this for this right so I'm going to do my menu for the text colors
and if we magically go down we'll see that voila just by adding text colors my
menu I now magically have my menu colors are white and when I hover over them it
is 80% white right and the reason I did 80 percent white is because um it kind
of let's the background color bleed through right so it just looks better right so instead of I could have done a grey but
I think a lot of times on hover like making it the same color but just transparent allows that background color
of whatever's behind it to kind of bleed through right so hopefully that makes sense so I think I think that makes it
look a lot nicer myself but you can do whatever color you want hopefully that
that was pretty simple right um hopefully that you guys see how that was done so that's one type of venue right that's
pretty simple now another type of one is when we hover like when we hover over a
link item we want like the entire background to like change colors right so like probably in like a drop-down
okay let's do that let's figure out how to how to do that alright what I'm gonna
do is I'm going to I'm gonna keep this menu just as as is right here that's a D
let's play down let's do a drop down for that one right so I'm gonna I'm gonna
let's go ahead and add a drop down in here give me a second let's start bacon things also I've been looking at the
resolution is poor oh sorry some work
off my GPU okay
okay um cool let's do drop-down I don't
see me any bleeding questions on on the forum or on the chat let's drop down I'm
gonna go ahead and I'm going to just use this same exact menu okay there we go
and maybe for kicks I'm gonna add or let's add a submenu to this I'm not
gonna change the labels I'm just gonna go ahead and and maybe we'll add a submenu to that okay there's our
drop-down menu okay um I'm gonna go ahead and delete this my menu let's go
ahead and delete the padding okay let's
look at this so right now we have a drop-down and if you notice we do have
hover okay by default on drop-down so we might want to configure that okay um if
you notice none of our drop-down menus are being displayed and the reason for that is by default in a container stack
so I have my menu inside of a container we have overflow is set to hidden okay
we're gonna want to set that to be visible okay that will lease that will
start to give us our dropdowns okay there we go we have dropdowns cool if you notice the
you know yeah we have hover okay sweet
so now let's let's play around so we want to customize that hover color and
if you notice it actually that's kind of odd I never even noticed that before the hover color only happens when it's a
submenu mmm interesting I'd get it but
mmm interesting okay so we want to we want to configure that
so whenever we go over any of the menu items that background color is going to be a color okay and so let's go ahead
and do that now so what I'm gonna do is
I'm gonna do background and let's do let's change this to be my drop-down
actually no we're gonna use a component for this so it doesn't matter I'm gonna use components and we're gonna do menu
item and I'm gonna do on state hover okay so whenever I hover over a menu
item I want to change the background color okay and let's go ahead and change
that to be a light gray would be okay all right do something subtle oh and I
want my parent class to be my drop-down because I want to I want to target this
only on my drop-down okay so I'm gonna go ahead and do I'm actually gonna add
my drop-down see the container I think
you after yeah okay um actually I'm gonna do it two ways first off I'm gonna
can't remember how I did that on the on the code for the parent thing I'm gonna try to add it to the drop-down
because that's probably what most of you would do and that's that I was what I would assume as well let's go ahead and
preview that and that did not do what I thought okay okay so I was right the
first time we'd add the parent to the menu which is the container we add my
drop-down to that okay and there we have
now interesting if you notice when I uncover over this that is no longer
great it turns blue and the reason is because when I hover over a submenu
Foundation is adding an active class to that so we might need to do a couple
other things here so I'm gonna copy this okay and I'm also gonna do active menu
item okay with parent class and then the same color okay so let's do that
Oh interesting
just for fun I'm gonna try force on that mmm interesting okay all right let's
play around with this okay cool see I told you once we started diving into this it would be a little tricky
and I'd find some issues okay okay so when I when I run hover on that
that should remain great but it doesn't and that is not cool so we're gonna go
ahead and open the inspector here
okay um is active a let's look at my
swatch here really quick doing a a of active a:hover I should definitely do it
oh but it's not only just hover oh okay
uh hold on I know why none oh yeah I think that'll do it
I had hover state turned on so it was only going to be active when hovered
over an active item and I want it whenever the activated period there we
go boom score okay so we're getting
there okay now we have you know that's pretty much what a lot of you want right
if you notice when I the active the active link color is white so
unfortunate we're gonna have to probably create an override for that right because the active link color is getting
set to white and yeah so let's look at this okay so now we're gonna set we're
gonna use text colors okay and we're going to use component and we're going to do
hmm well I'm gonna for right now I'm gonna fix just the active one and then
and then we'll tweak on that a little bit okay so let's see when it's active I
wanted to be the same exact colors I don't remember what that what that hover color was here let's just go ahead and
get that really quick that way it's it's
the same
okay so now we're changing the active color to be our our link color let's try
that I didn't didn't do it interesting
interesting oh I don't have a force option here yeah hmm okay preview that in a browser let's
have a have a gander so I'm gonna go ahead and do this and this is background
colors gray color is white color Oh
drop-down menu is active eh okay so
we'll see here that it's actually using background primary and color okay so
it's using the primary color and the white color mmm interesting okay if you
notice these are using these are something called CSS variables and these are the variables I mean they're pretty
apparent right that's the primary color that's the white color so yeah that it's
using the primary as the background and then white as the foreground color right for an active menu item so I'm gonna
show you a way how to get this done right now and but I will definitely be
making this better um yeah we'll definitely be making this better okay
so white color and primary color are component colors okay so what I'm gonna
do is I'm going to add a component color and even though all these other colors are here the only one I really care
about is white I'm so I'm going to go ahead and set the white to be our red
color okay and we're gonna set this on
um active menu items Oh with the
drop-down um it's what my drop-down right yeah my drop-down okay so now if
we preview this now hover and our our
active menu item color is now the same color red so it doesn't doesn't switch
back to white okay cool
okay so that was two things um I know those
those are two very common things what are some other things that we'd like to do hold on let me add some notes from
someone else let me just open those up really quick make sure that we we look
at everything here
background in hover color settings will there be irrelevant I'm a nice watch
coming up okay yes Oh transitioning okay
here's a good one I'm transitioning between menus right so um you know I think that confuses some
people like I want to have a drill down on mobile and then a drop down on
desktop right I think that confuses some people and I can understand why and the
reason that confuses you is you're stuck in me in the mindset of building for a
desktop right you're thinking okay on desktop I want to drop down let me build a drop-down and then on mobile then you
go to transform that to be a drill down on mobile and you can't right and the
reason is you need to start again foundation is mobile first so you need to always start with what you want it to
be on mobile okay so if on mobile we want a drill down okay we have to start
with a drill down stack okay so let's go ahead and oh is this oh that was an
extra stack let me delete that okay um let's go ahead and add a new container
here I'm gonna change this class to be
my drill down I assume that's what we're gonna do I might need that okay so here we have a
third menu here and since we want to have a drill down on mobile okay we're
gonna go ahead and add a drill down okay and what I'm gonna do is I'm just gonna copy this same menu okay so on mobile we
have a drill down okay and let's just go ahead and preview that so we have a
drill down menu and what goes back right and go to services we can go back write
stuff like that okay now some of you might be wondering okay well what look
at these colors of these things okay and I I see that those aren't those
probably are not the correct colors right but I kind of recognize that color as being the primary color right so and we
can verify that let me open that in the browser and if I were to inspect this bad boy all right IRA inspect this let's
see it would be there the after and we'll see that here it is using the
border color is definitely set to be the primary color right so what's cool is we know how we can override the primary
color on something okay it's it's that's pretty simple right so let's say we want
to make these that same red okay just for fun so I'm gonna go ahead and add
the primary colors controlled by components okay so what I'm going to do
is for this class I'm going to do dots
oops not dot I'm gonna do my drill down okay and we're gonna set the primary
color to be red and that should do it
oh sit so inside because remember I have
this container here and this container contains a class called my drill down so anything that uses the primary color
inside this container now is set to be red
okay now we're setting a bunch of all the colors but we don't even need those right so that's okay so we only needed
to set the primary change the primary on there so it's not too bad okay so cool that was uh that was a
pretty simple one so now we have that ready you can make it whatever you want right but it now at least matches okay
okay so now we have our drill down on mobile okay that that works great on
mobile right because it doesn't really work great on desktop right but if we you notice here when we go down to
mobile size you know it it works a lot better you know on mobile okay sweet so
now let's more fat let's say on medium Oh a medium enlarged we want it to be a
drop-down okay so what we're gonna do is we're gonna say transform medium
drop-down okay so train again on by
default it's a drill down and then on medium it's gonna change to be a drop
down and that should just all happen magically fingers crossed
okay let's let's preview this in the browser so I can resize so here we have small and then on small it's the drill
down menu and as we get larger it should
oh this might be JavaScript enabled so it might what
I know that work or I'd break it in the
update somehow uh-oh I think I need to do medium horizontal let's try that
interesting Eric oohs ah interesting okay did see that dad even caught me
right off guard so let's explain that okay so on mobile if we notice our menu
is vertical okay and drill downs by default are vertical okay because well
they don't distribute there's one per line right so there's one per line yeah I have this thing I almost have to
sneeze and it's been like probably five minutes it's crazy so drill downs are vertical right we
have a vertical menu so all the menu items are on top of each other so we not
only need to change to a drop-down but we also need to change the orientation
of the menu itself right because previously when I said none right that
meant that it was trying to change it to be a drop-down menu but it was doing a
vertical drop down which actually here there we go it still it is a drop down
menu but its vertical right so and that doesn't really mesh together okay I
should have tested that before I so all we have to do is now is do medium horizontal because we want it to be a
horizontal menu okay and there we go
actually that's kind of cool actually I like the red the red highlight and then
maybe on on hover the primate that carrot should be white that could be
nice right cool um and if we go back down to a
medium or small I mean you'll see that we have our drill down cool as you see
the I mean these are that there are some little little bumps that you know we found today so far that I'll definitely
make sure I massage a little bit and make them maybe a little bit more user-friendly to discover at least and
I've said this in the past I do plan on eventually releasing a menu swatch okay
and the original plan was the a menu swatch which will have a lot of menu
specific styles was gonna be a part of an external swatches pack and yeah I
still plan on doing an external swatches pack that have that has like specific
swatches for each element so like let's say there's a tab swatch and an accordion swatch and a menu swatch and a
um you know for all the various foundation components there'd be styles specific for those things right so you
can customize your tabs and customize your accordions and stuff like that so
that that was the plan to have the menu inside that um swatches pack we'll we'll
see if that's will still be the plan I'm not gonna say yes or no right now okay
okay
cool cool anything else let me look at the chatroom see um some chat every now
and then the audio seems to go and that the streaming the maybe the frames per second goes down a little bit sorry
about that
Gunter says Mateus you're right I have no clue what you typed there my German
isn't up to par so um yeah hopefully Gunther says you're right I'm sure
you're right let's see how do we get rid of borders I'm not sure which guess tall
I'm not sure what borders you're speaking of how to set up an active status menu how to set up the active
status item like border in the border in the bottom or active pages okay so he's
saying on an active page um how do we set up a bottom border for an active
menu item that's a fun one I like that okay now I do have to admit there so one of the drawbacks so far all
today I said I was gonna be using these the menu builder based ones right so the
the normal menu stacks that have more settings now a drawback of using these stacks that you know build out the menus
manually is the active page right because a lot of times you're gonna want to build this this menu and then you're
going to want to partial that so that the menu is the same across all your pages and if you want to use or style an
active page unfortunately in this menu builder you'd have to go to a menu item
and then there's a setting here that says this is an active menu item right
that's not great because then if you partial this menu and put it on all your
pages in this instance services is always going to be set as your active page so when you want to do
ooh active menu styling um that is the one case where the rapidweaver menu is
actually gonna be better for you okay because rap Weaver knows what page
you're on and when it publishes the page it'll it'll automatically set what page
is the active page right because it's itself it knows so that is a benefit of
using a wrap Weaver menu okay let's go ahead I'm gonna duplicate this really quick um alright let's do it on the top
okay I'm gonna add a rapidweaver menu on here um I'm gonna do top level
navigation I don't even know what to have a Happiness Project I have a bunch of nav in here actually a lot okay um
okay so we have that top level and let's say I want to style the active page okay
let's just preview this let's see what the heck it looks like okay there we go
quite a bit um let's do align justify what I do there
we go alright so let's say I want to style this active page um okay
actually let's go ahead I'm gonna remove this and remove the mind menu thing and
all that jazz okay just go for a raw menu let's say I want to underline this
active page and by da we also want to get rid of this horrible this background color because we don't want that either
okay so I'm gonna call this um I'll go
to container let's do my RW menu okay let's copy that okay so let's go
ahead and do first off let's take care of the active background color because
we don't want to background there right so what I'm gonna do is I'm going to say go to component I'm gonna say active
item I mean put in my parent class of my our debut menu okay and we're gonna set the
background color to be none if you look there it's done there it goes cool
so now I I turned off the background okay and now we want to add an underline
okay so now let's go ahead and an underline is obviously a border okay so
I'm gonna add a border swatch okay and what we're gonna do is we're going to do
component we're gonna do the active menu item the parent class is my RW menu okay
and so now we're gonna have to add some borders so we're gonna do a simple let's
do a red border at the bottom okay border size is I'd say what two pixels
do three pixels at two pixels okay and
then style actually here we're gonna do detailed because we only want a border on the bottom so we want top right and
left b0 and bottom is going to be two okay so if you see one kind of preview
here right in this watch okay and if you want you could do a style too right you could do dashed or something
like that but we'll stick with solid and I think that's all we should have to do let's go to preview that hmm I didn't do
what I wanted let's look at that
oh I have to set a borderstyle order solid there goes oh there we go okay
pretty cool there we go so now our our home button is underlined our our active
page is underlined right now I do have
to admit like it could because of all this padding right mm-hmm
because a lot of times when you do an underline you want the underline to be the same size as your text right and I
won't ignore that maybe I mean because I know a lot of you guys are private you know this is we've made progress but it's not perfect right because if we
inspect this element here we'll see that the actual menu item here it is that
size and the border the bottom border of it is the correct size but the it also
has padding right so what we need to do is we need to remove the padding for
those menu items right at least the right and left pet padding maybe we want
the top and bottom so it has a little bit of you know sizing but let's go
ahead and try to remove that padding on the sides okay so if we do do padding
okay and then we're gonna go to menu
item because we want to affect all menu items and my parent class is my RW menu
because I only want to affect that one menu on the page and we're gonna do
detailed and hold on what was that
what's the padding on these by default just so I can I can do that
sixteen pixels okay so we're gonna we're gonna do top and bottom is sixteen okay
and left and right are zero okay that
there we go right so if you see now our menu item
the the width of it is a lot lower all right it's the same exact width as the
page right so if I were to here let's do a beer let's do like home page so it's a
little bit longer there we go
right now this spacing is a little bit between the the menu and the border is a
little bit too much I think so maybe we'll reduce the bottom padding to be eight okay let's cut that in half oh
yeah all right there we go you know that that allows us to you know
underline the active page on a menu and again if you if you want to do active
styling um you know and not be a like hover or anything like that
the art of you menu really is kind of the best way because it it automatically
knows what page is active and you can partial that and you'll you won't have to you know duplicate it so that is a
nice thing uh you know the one real winning factor for the art of you menu
is it can automatically determine the active page for us and we can't do that
right now on the normal menu stacks okay good question great question that was a
fun one I like that
let's see if there's any others borders around the borders around the drop-down
box those are their borders on the dropdowns oh okay um okay uh I see that
you want them just to be like simple white right um okay so you want to
customize the background color of the drop-down as well as as all that okay um
I don't know what is let's click on this
so this is a submenu okay I think I have a component for that so let's go ahead
and do let's do a background and I do a
component I have a submenu here so we
have we we can now style our submenus okay and let's target well I think it
was my drop-down right yeah my drop-down so I'm gonna target the submenus of my
drop-down okay and let's set that to be a color we're gonna set it to be like
like a pink why not okay just that it stands out from the white a
little bit okay so we'll have the background color is that you wanted to customize the borders of that right so will we want to
do a border swatch on that and then we're gonna do the same thing we're gonna go to the components we're gonna
affect the submenu of my drop-down and
we're gonna just set the border size to be zero because we want no border okay
and that should work alright so now if we go here obviously
uh yeah I mean it's a transparent color so you see the you see the background below it but it did work right and we
still have all the same styles for hover and whatnot but you see that that that is how we can um you know customize that
dropped okay um is with the submenu component
yeah so background a submenu you can change the background of that you know
your let's go ahead and make it a non oh you know OPEC opaque color let's just
use find a shade there I would like
something like that right so if you made it that color area right and that
doesn't look right either but um yeah you you get that you get the point right so now now we can I remove
the border I changed the color now I still have that hover menu um you know
color set to gray but you know we know how to tweak that because we did that earlier okay so cool that was a good one
thank you for that for drop down menu
can be added some smoother transitions currently they look quite clunky
for example the drop down menu fade in from the right when hovering over the main menu item okay
so you want to add some more transitions for the drop down menus um let's just go ahead and see I'm not
sure if those what's what's available right now out of the box let's go ahead and look at the documentation so I'm
gonna go to get foundation I've with all
my spare time I've actually been trying to rebuild this this get foundation website since I'm the maintainer now so
if we go to drop down menu is there
settings or animation let's make this
bigger I think it uses class clothes on click a
lot of these settings here are ones I haven't added but I do plan on adding all these settings here that's
referencing I thought it used I mean that's margins borders hmm yeah I'll
have to look in that with yes I don't know the answer to that I I can see what
you mean yes it is a little it is quite clunky it's just you hover in its boom it's there right maybe you want like a
scroll down or you know some sort of you know swipe or Earth's feature just
something that's a little bit more um you know a little bit more fancy I can see that I don't know if that's possible
yet all I can do it though thank you for the suggestion cool
is it possible for the f6 menu stack and uh but is it possible for the f6 stacks
and not for the standard are the View menu sorry I wasn't sure what what your question is okay yes we need some
animations here there and so yes another thing in in foundation 6.2 is I'm gonna
bring back the animation stack from foundation 1 just because it was super
simple to use and it just worked right and the stuff that's in foundation 6
right now while it is more powerful from the developers perspective it it's not
crazy user-friendly yet so that's something I plan on making better probably in foundation 7 in the
framework right is making those animations a little bit more user friendly but until then for I'm gonna
bring back the animations that we had for in the foundation 1 stacks inside foundation 6 not too so you'll have all
those the anime in animate out stuff that we had from foundation 1 will will be back in foundation 6.2 ok many many
swatches so yeah I mean here we had many swatches um so III did a great video on
how to organize swatches right so one thing you can do here is if we just had a pen right um if I do let's say this is
my drop-down right and then I found all the boom all of these that are for there
drag that in there ok so and then let's
go ahead and just we'll just continue on we have a pen we have my RW menu right okay we could
click here in here it's not that one this one right drag that in there okay
there's that then we have air we got two more my well there's my drop down my
drill down and my menu right so I'm just go ahead and add another pen my menu I'm
just gonna paste
so let's do my drop-down Oh the hex tax
it's not what I wanted drag those in
there and we have these menu stacks in here right then we had one more pen that had
C and was my drill down I pressure did
start it off like this because I knew I was gonna create multiple so let's add that in there oh hey that's a little bit
more organized right so we kind of organized all of our styles we can compartmentalize them inside pens
another thing is you know if you watch that how to organize swatches video there's also the external that the other
swatches stack that allows you to you know have all these inside their own stack if you use pen pen is a free
download go ahead and download it for my site um you can also say slum note or I mean uh to collapse pen right so you can
even make things even more um you know
it's like if you really didn't want to see that stuff you can collapse at all and that's pretty neat right right so
now what while we have all those if I ever wanted to look at you know all the styles that I had for my menu I can just
go ahead and uncollapse that and then I can go ahead and start looking through all of these alright so yeah pennant pen
is gonna be a great way once you start getting too many swatches and you want to have a little bit more Organization
for them it's gonna give you a really great thing and you also color code them so maybe you know I don't know red is
for you know menus or something like that or you know you can color code your pens I guess just some ideas it also do
slim notes which makes them even even more slim you really want them down
i slim down the notes notes there you go so there you go that's that's about as
small as you can get with all those swatches and you know you can still I
still know what they are you can add more elaborate descriptions here and pen but it doesn't affect our page at all we
still have all the same styles everything is still the same it just um you know allows us to organize pen a
little bit nicer
oh yeah so penpen is useful um it is a free stack on my site and once you once
you install it um you'll magically have pen show up in this menu um and it will
show there um yeah cool I think I answered all the questions um if you
have more questions please go ahead and ping on Weaver space I hope you find this useful Hey uh just a quick side
note fit text is the deal of the week this week and it's a really powerful
stack I'm really cool one it allows you to you know dynamically sized text like
headers and stuff like that here let's play around with it really quick just do a quick demo for you a fit text and when
you come with fit text see when you when you buy fit text it actually comes with a fit texts watch as well so my default
um there is a fit text stack and so if
we look at that let's bring in fit text really quick there it is actually gave
it a new icon last night so we drag that on the page I'm just gonna add it right there and let's just
go ahead and add a header the page
okay let's do this I'll just keep this is my header um and it's really simple right so you
can target everything just say I you know you define the minimum and maximum
size of the of the text that you want and as you see as I scale the browser
down it will dynamically size that for us right so all you do is you define the
min and Max sizes of your header oops didn't mean to click on that link and
then it magically you know it resizes the hair for you um a little dude more
than a header I think it works best on headers but it will do you know paragraphs and texts and stuff like that
and it works pretty good but it works best on just headers so um check that
out um the swatch is oops it's which pages in wrap we were I wish referee
actually wouldn't do that I know they see as the feature but I don't Oh anyway um or they doing oh yeah
so there is a fit text swatch right so instead of using the fit tech stack I
just had this header on the page and I delete that okay um and let's just call
this billboard okay and if I use that
swatch and put it on my header now I only I only have a header stack on the
page and I still have the benefit of using fit text right so it still makes
my header large pretty cool and it's all
done through a and that way I can I can leverage this same exact fit text setup on multiple things on the page and I
only have to have one swatch so it's pretty cool um so yeah fit text that's
only five bucks this week so it's only $10 if you bought it years ago actually it was a free
update that I gave um I think it was I don't last month I think was in December I did it maybe was a little Christmas
present cuz I completely rewrote fit text from scratch completely new version three I believe I think it's on Version
three yeah it's a good one so check out fit text it's the deal of the week this week so just go out of here to check add it
to your check out and it's $5 this week only so check that out uh cool guys
thank you very much I appreciate it let me see if there's any more questions
putting all swatches in a site style stack I've been putting them into their own swatch stack inside of the container
they apply to yes that's another yeah that's another way I kind of went over that in the organizing swatches video
where you can definitely organize them into different swatches stacks um is it
okay to use an extra swatch palette for the footer or do we put all on-site
Styles palette if we can um you can put them anywhere you want on the page um it doesn't matter no it should still all
work um doesn't matter if you have them on the top I personally would have them all at the top so that you have like all your Styles in one place um but you can
definitely have your swatches wherever you want on the page um a niche they should still work right so one thing
about the order of swatches where they are on the page is um let's say you have a swatch further down the page that may
conflict with the one above it whatever the the last one is will win right so if if first you say um you know background
color red on a particular class and then later down on the page you have background color blue on that class well
the background color blue is gonna win because it's gonna override right um and then we get into hold there's there's
some other like CSS conflicts in terms of more specific selectors and stuff like that but I'm not even gonna attempt
to go into that today so anyway yeah the order of your swatches does work if you want it does it does matter um but
that's only if you want to like have stuff that overrides other things and and I I think for most people we don't
need to worry about that so anyway thank you very much I appreciate it I hope you
guys enjoyed this session and we'll see you guys hopefully maybe this Friday at the hangout