We're celebrating a new year and new skills, by offering a 21% discount off all courses and collections at checkout! ✨
September 28th 2017
So this is my version of the menuit's pretty much the same kind of design.We're not worried too much about that.We're focusing more on the functionality aspect of it.So what we have here iswe firstly have a div which contains everything on the pageand inside of our div we have a nav elementso that nav contains firstly the menuwhich is for each of these individual items.See you can actually see it's working here.We'll get to that stage by the end.Inside of our menu you've got uland then these li elements so that stands for list item.And then inside of that we have just the linkfor each individual page.
Separately to our menu what we've also gotare these overlay divs.So these are just divsthat are covering the full width and heightof the background and each one has a different class name.
So we've got this class of overlay-bgso bg is just short for backgroundand then which particular link it relates to.
So we've got one for the home page,the courses, the book, about page, and the contact.Now one thing that I've gone ahead and addedto each of our links is this little data-overlay attribute.
So just to look quickly at the CSSprobably easier to do it through the inspector.
So firstly what we've gotis our div with a class of model.
So this is fixed onto our pageso it's gonna stay on our view port.Its taking up 100% of the width 100% of the heightand it's fixed in the top left.I've also used a display of flexand the reason I've done thatis so that for the menu which is inside of our model
I can use margin auto on the top and the bottom edges.So normally you can't do thisbut when you use flex on the parent elementit allows you to do that.So I'm just implying a marginof auto on the top and the bottomso it's centered verticallyand then 10 vw.
So vw stands for view port widthso if you chop up the width of this pageinto 100 different pieceswe have 10 of those on the left hand side and the right.So as we make it smaller it kind of shrinksin proportion to the size of our screen.So the vw stands for view point width.We've also got vh which stands for view port height.So really really useful measurements.We talk about these quite a bit in the eight week courseespecially in the first weekwe deal with some kind of fixed positions and full widthand height backgrounds.
So they're really really useful.What we have in addition to that after our menuis each of these overlays.So with our overlay we're doing the same kind of ideawe're positioning it using absoluteso we're kind of positioning itinside the context of our modelwhich is the full size of our page.So overlay background's also taking up the full widthand height for the background of the page.
The only thing that it's got in addition to thatis just the backgroundsso background here what we're usingis this linear gradient syntax.So this looks a little bit funky.I could never actually remember this off the top of my headso a quick google search for CSS gradientswill get you where you need yo go for that.And what I actually used to get these gradientswas something called uigradients.comso this is just the gradient generatorreally good for gettingsome nice kind of subtle color shifts.There's also some pretty awful onesbut they're a mixed bag.So I just kind of went throughfound some nice relatively dark onesand I just use the get CSS function here.It returns me back the gradient syntaxand then I've just basically copied that into the project.The only bit where I made it differentif you look here it says firstly to rightso the way that the gradient syntax worksfirst it gives it a directionthen the color it starts from and the color it goes to.And you can put any number of these colors in thereso you can have like ten different onesbut most of the time when you're dealing with gradientsyou kind of never really havemore than three or four gradient stops.And you can give these percentages and things.It's quite an advanced syntaxwhich is why I could never remember off the top of my head.So what I went and did is just applied rather than to rightI gave it 45 degreeswhich means it's going to go horizontallyfrom the bottom left to the top right corner.So it's a nice horizontal gradient.So for each of these different overlaysthey have a class name which is differentso I just appliedyou can see this bit changing herethe background gradient of each one.
And then the last thing that we have is this opacity.So by default on our overlay background divsthey are set with an opacity of zeroapart from our first one.So if we look at our first one hereit's got a class of visible as well.
So when we add and remove this class of visiblewhat it's gonna do is it's just gonna add the opacityonto our particular background.And then we're using a transitionto ease that opacity in and outso we get nice subtle effect as we move between them.
Secondly inside of our functionwe want to find outwhich overlay we want to show.
Thirdly we're going to remove the visible classfrom all of the overlaysand then lastly we need to add the visible classonto the overlay we have just hovered.
So the useful thing about htmlis we've got a bit of information taggedto each of our links that relates to the overlaythat we're going to trigger.So firstly in your menu.js what we're gonna dois we're going to sayfor our navigation linksso we have the li's with a class of navigation linkwe'll say .navigation link and then aso we're actually grabbing the linksthat are inside of these li tags.
We're gonna say every time we hoverso jquery has this .hover function built in.
What are we gonna do.We're gonna run a functionand our body of the function is gonna go in here.So we can put in a quick console.logso it's gonna send ourselves a messagejust to check that things are workingand we're gonna say you have hovered.
So I like to do this first and foremostjust to check that my function is actually runningwhen it's supposed to.So for that I can boot up the console.Let's just get rid of this arrow.And it's saying you have hoveredso every time I hover over a linkI'm getting lots of these messages so that's good.It's working for us.
So every time we are hovering over a linkwe run a function, yep we've ticked that one nicely.So secondly inside of our functionwe want to find out which overlay to show.So the way that we can grab the actual elementthat we've just clicked onis by using something called the this keyword.So if instead I put in this into my console.logwe'll see something very differentcome into our console here.So you can see when I hover over each of these linksit's giving me back the actual elementthat I've just hovered on.So this is very very usefulto be able to attach our functionalityto the context of whatever particular thingwe've interacted with.
We're gonna say var and we'll call it linkand it's going to be equal to our linkthat we just clicked on.And we need to put it inside of our dollarand round bracketsso it turns it into a sort of jquery version of an elementthat we can then work with.
So what we can do next is to grab the overlay.So attached to each of these linkswe have this data overlay attributeand the way that we can grab thatis by using something called the data method.
So if we say var overlay and it's going to be equal to link.Look link is equal to thisso we're essentially saying the same as that.We can say link and then .data and then overlayand if we put a console.log in here and we say overlaylet's see what we get back now.
So this is now grabbing that particular data attributefrom each of these links and it's just giving it back to us.So this is very very useful bit of informationand what we're going to do with thatis we're going to sayfirstly we're gonna grab all of our overlay elementsso this is a little bit tricky to seeI'll just zoom in a little bit hereso you could see we've got this class of visibleso what we want to do firstis we want to grab all of our overlay background imagesand we want to remove the class of visible.So we're gonna say .overlay-bg remove class visibleand we'll see what that does now.
What it's done is it's removed the opacityso you can seewe now just got a white background on the pageand to take it a step furthercause we've got our new overlay elementwhat we're gonna say is dollarand in the brackets we're gonna put the actual class nameso you remember this is equalto one of these class selectorsand then we're going to add the class of visibleto the current one that we've just hovered over.
So let me just write some comments in hereto explain quickly what's going on.So firstly this refers to the current linkwe've just hoveredhere we grab the data overlay attributewhich refers to the class of the overlaywe want to show.
Firstly we hide all of the overlaysby removing the visible class.
Lastly we add the visible class to the overlaywe have just hovered.
So let's see how this works out for us.
September 28th 2017