PSD to HTML 4.6) jQuery Navigation

Previous: PSD to HTML 4.5) Arranging the Feature Section

Next: PSD to HTML 5.1) Final Thoughts

PSD to HTML Complete Course

Transcription of PSD to HTML 4.6) jQuery Navigation

hello and welcome back to the PSD to HTML responsive portfolio build in thislesson we’re going to finish up some of our responsivehere by changing the way our weather behaves whenever we decide so once weget to that same break point here where we’re reaching 640 pixels and things arechanging their arrangement were also going to change the footer so that we nolonger have three columns and said there’s gonna be stacked on top of eachother and that’s pretty simple to do so I’m gonna jump into our CSS andeverything into the site 24 folder now and then down here below everything elsebut still inside that media query notice were still inside the closing curlybracket for that media query we’re gonna point to our columns and remember ourcolumns four-footer have a class of Cohl hyphen 15 and third and what we’re gonnado is simply set or flute to none so that they’ll no longer be floating tothe left and then we’ll set our with for those columns to 100% safe that go backto our page in refresh it and now our items are all stacked on top of eachother instead of lined up in three columns and just to double check will goall the way to the bottom make sure our copyright still looks fine and it doesand we are now almost done with our responsive design the last thing we needto do is we need to tackle our menu items here and and what we need to do isactually use a little bit of G query don’t let that frighten you if you neveruse Javascript or jQuery before it’s just a couple of lines of code thatwe’re going to use to get that mean you to work so once it disappears we want toclick on that to see our menu dropdowns that we can click to go to another pageso we’re going to add that jQuery to our index HTML file but first we actuallyleaveto jQuery otherwise we won’t be able to use it so we’re gonna go back up to thehead of our document then down here just below are still she we’re gonna link tojQuery and we’re gonna do that by going to grow and expand your browser at alittle bit for new code that jQuery dot com and we want to link using the jQueryCDN so scroll down and see different versions of decreed that we can use butyou’ll notice that with two point Xie anything less than ie9 is not supportedyet so we’re going to jump down to this one here and we can click on themagnifying version to view it or we can just right click on the minute 5 versionand click on copy the address they were going to use that link address in ourHTML so just below are just before closing head tag I’m gonna create ascript tag and we’re gonna set the source for that equal to that link wejust copied soco done jcrew.com / jQuery hyphen one-dot 11 20 demanded Jes theremight be a more recent version by the time you watch this video series orthere might not be a min opener closing script tag after it then all the codethat I’m going to use for our menu I’m gonna put down here just before theclosing body tags will put a few line breaks in there and then somewherebetween the closing foot attack in the closing by DTAC we’re gonna put a scripttag and we’re going to put her closing script tech so when you’re using jQuerythe first thing we want to do is we want to wait till the entire page is finishedloading before we run our code in the way we do that I’m not gonna go intodetail on how this works but we’re going to take a dollar sign the set ofparentheses and inside the parentheses we’re going to create a function so takefunction another set of opening and closing parenthesis and opening curlybracket then we’ll skip a couple endsare closing curly bracket and a semicolon at the end of that so we havethis function that is called after the entire page is finished loading soinside that function we want to point to our navigation list remember it has aclass of now hyphen list and we can actually use that CSS selector in jQueryto point to it but we don’t want to point to it the way you would point toit first of all as you type a dollar sign in an inside parentheses and insidesingle quotes who would tighten have died in that I should list so we canpoint to that particular item that navigation list in jQuery using that CSSselector a.net hyphen list however referring to it this way can be a littletaxing on the system so what I’m gonna do is to avoid referring to it this wayover and over againnumber to create a variable called dollar sign now and then we’ll just setit equal to this value so anytime we want to refer to that and have list wecan now refer to it using this dollar sign now have variable so when I want todo is when I click on that menu icon that we created that menu I kind ofremember has a class of menu hyphen icon whenever we click on that I want ournavigation to open up so we’ll skip a couple lines and we’re gonna do that iswe’re going to point to that menu icon first of all you’re gonna say . menuhyphen icon and again that’s contained inside quotation marks insideparentheses just after that dollar sign no space after the dollar sign or it’snot gonna work and then in order to create a click event just after theclosing practices were gonna take . click in the imprint the seas were in atype function open close parenthesis again open curly bracket give a couplelines in the new clothes curly bracket and then open a semicolon after thatclosecurly bracket then insidethis function this click function we’re going to take the code that we want tooccur whenever we click on that menu icon will win I click on that menu iconI want this navigation to toggle open and close to basically and there’s agreat function in jQuery for that called slide toggle certain points to that andhave lists class which is that drop down menu that we have now and again we canrefer to it now using dollar sign now and we’re gonna say dollar sign that .slide toggle with a capital Tinsensitive function we need to include open and close parenthesis and asemicolon to in their statement so let’s see if that works see that jump backinto our page and refreshes and then will resize it until we can see our menuicon near now when we click on it it expands open and click on it again tocollapse the problem mill is the firing resize my browser that menu icondisappears but my menu doesn’t come back so we’re going to create some orgy queryto make that happen so we’re still inside this document ready functiondysfunction that isn’t going to run until everything has loaded just insidethat we’re gonna skip a couple lines and make sure you pay attention to theplacement of all these closing curly brackets and parentheses and everythingbecause things might break if you don’t so if you’re having some problemsgetting your code to work right then double check to make sure that all yourprint the seasoned curly brackets are in the right place so after the closingearly break in print this is for this click function but before the closingcurly bracket for this document ready function we’re going to create anotherfunction what we’re gonna do is working to create a function that that detectstwin where resizing the windowand if the windows which is greater than six hundred and forty or greater than orequal to 640 pixels than we want that navigation to show up we want this navlist menu to show up we went to set its display to the similar blocker whateverit is well there’s a function in jQuery Culture Show and another one called hidethat allows us to do that so the way this is going to happen is this time wehave dollar sign in parentheses but instead of a CSS selector we’re justgonna type window which will points to the current browser window and thenafter the parenthesis wanna take . resize and inside parentheses somethingthat we’ve done already a couple of times function open close parenthesisopen and close curly brackets and then a semicolon after that closing princessesat the end so inside this function we’re going to basically test to see if thewidth of the window is greater than or equal to six hundred and forty in if itis then we want to see our menu we wanted to show up in that rain out barthat light green fr the top of the way we do that as we type if and when usingan if statement will then type parentheses and put our condition insidethe Sprint disease and then if it ends up being true we’ll put everything wewant to happen inside these curly brackets here so are conditional here isword testing to see what the size of the window is as we’re resizing it that’swhat this resize function does all of this code inside this recites functionis going to run over and over again as long as we’re resizing itso we’re gonna test to see if the width of the windows will point to window .winds did with is a function there it’s not a property to function so we haveprint the season there as well we’re gonna see if that’s equal to actuallyreceived its greater than or equal to six hundred and forty so we put a littlespace in here so you can see this a little bit better so we’re pointing tothe window again here and we’re checking the width of the window if the whipthrough that window is greater than or equal to six hundred and forty then whatdo we want to happen we want that navigation menu to show up so we’regonna say dollar sign now . show in that show method is a jQuery method then wecan say else in other words if our windows with is less than 640 we want tohide it so . now I’m sorry dollar sign that . wide open close parenthesissemicolon to interstate and that’s all the jQuery you need now if you can’t getthis to work right you might go back and watch this video of couple of times totry to understand it if you’ve never used jQuery before and he still can’tget it to work right it might behoove you just to come into the project filesand copy the script and paste it into your own file but let’s save that andsee if it works will jump back into our code refresh the page and we can see ourmenu at first but that wasn’t a problem before it wasn’t a problem until weshrink it down and then resize that backups let’s make it smaller againlet’s expand it out and contracted and then let’s make it larger again andhopefully the menu text will show up again and it does he go smaller and itstill works and now we are finally done with our responsive portfolio site thankyou for watching and I’ll see you in the next video