PSD to HTML 4.4) Styling the Responsive Menu

Previous: PSD to HTML 4.3) Responsive Portfolio Items

Next: PSD to HTML 4.5) Arranging the Feature Section

PSD to HTML Complete Course

Transcription of PSD to HTML 4.4) Styling the Responsive Menu

hello and welcome back to the PSD to HTML responsive portfolio billed as weresizer browser once we get to that 640 pixel breakpoint our portfolio sectionbreaks up a little bit and it breaks up into separate lines instead of having itin four columns all since we’ve already got a media queries set up at breakpoint let’s go ahead and take care of our menu at that point as well we knowfrom our Photoshop file that once we get down to a smaller size we want this menuicon here and then menu icon is going to take the place of the menu itself sofirst we actually need to create this menu icon so in our Photoshop file ongoing to option right click on that item to select one of the layers in thatgroup and it’s actually a bunch of layers together if we just turn that offit’s just one of those bars there and so we actually need all three of these barsas well as this right here so menu icon in the three rounded rectangles on topof it goin drugs down to a new group and we’ll just call itmenu icon and then let’s just turn everything else off except that menuicon by option clicking on the icon next to it or alt clicking if you’re using aPC and then we’ll go to image trim trim be some transparent pixels click on OKterms it down and we still it’s got rounded corners so there’s a little bitof transparency around the edges so we do need to save it as a PNG file will goto File Save for Web will choose PNG 24 make sure transparency is checked clickon Save and then I’m gonna navigate to the site 22 folder which is where movedeverything and will sit in the images folder there and we’ll call itmenu icon that P&G who saved that let’s now go to File revert for thatparticular Photoshop file to go back to our original version and then let’s gointo our code and make something happen hereso in our HTML the very top we have our navigation section here now I’m gonnaadd one thing to this navigation section inside our container but just beforeArnav list I’m gonna create an image and I’m gonna give any class of menu iconand we’re gonna put that menu icon here so the source for that image is going tobe an expander images folder here in case we forget the name of it the sourceis going to be images forward slash menu hyphen icon dock P&G and then we can putan alt attribute here that says click to expand menu and we go so we can say thatand go back to krone and refresh the page and that basically just pusheseverything down not exactly what we’re going for so what I want to do by thefault win the browsers and its full size is a win a set that menu icons displayso we’ll come over here to our CSS and then will scroll back all the way up toour marine navigation section and up here at the very top maybe just belowthe neverland itself will point to that menu hyphen icon class which is theclass name we give to that image and will send its display tonight so thatthe browser will just pretend like it’s not even there then once we reach that640 pixel break point I wanted to show up again and I want the menu itself todisappear so that’s gonna take a little bit of CSS trickery to make that happenswe’ll go back into our CSS files scroll down to the bottom and here’s aresponsive section we’re gonna jump down to the 640 media query and just insidethat 640 media query we’re going to create a rule for the in nowlist class which is the unordered list that contains our navigation items and Ibasically wanted to disappear before we make it disappear I want to apply somedifferent styles to it first of all I’m gonna give it a different backgroundcolor because this is basically gonna be a drop down menu so we’re going to setthe background color to a darker gray than me main navigation menu bar gonnaset the width of that and have less to 100% so that it stretches out all theway will add some padding maybe 10 pixels of padding inside that drop downlist and let’s see how it looks so far we’ll save that Jim back into ourbrowser and refresh your page since we’re already below six hundred andforty and you know it kind of gets us where we’re going but not quitewhenever this appears whenever it expands out I wanted to show up belowthe main menu and then I want that menu icon to reappear at this point so let’scome back to that 640 media query and let’s point to that menu icon icon classand let’s say its display to block and we need to make sure we spell that rightsave it refresh your page and our menu icon is back now we just need to move itdown a little bit so it’s not really begins the top edge of the browser sofar that menu icon will also add maybe a little bit of padding to the top sopending top let’s do six pixels there and then I want to make sure that whenwe hope ur over that image it’s not inside an anchor tag it’s just an imagebut when we hover over it I wanna see the pointer cursor so that we knew thatwe can click on its oil change your cursor here to pointer so let’s savethat and refresh your page and that mentions it down a little bit now whenwe were over it looks like a link so that’s goodand now there’s six pixels in between the bottom of that and the bottom of theoriginal navigation background so I want to know this drop-down section downanother six pixelsso what we’re gonna do is we’ll come down to that now lists were gonna sitits margin top property to six pixels save that and refresh and that notice itdown a little bit closer to where we want to be nextI want to nudge it to the left 10 pixels cause we have this 10 pixels of paddingover here and I don’t want that 10 pixels of padding to apply to the struckdown list so I’m gonna give this basically a negative position and wewere gonna do that is we’re going to set the nav list position property torelatives so that we can get over and we’re simply going to set the leftproperty to negative 10 pixels and mental midget over 10 pixels to the leftsave that and refresh and there we go next thing I want is for these listsitems to be stacked on top of each other because once we get down to a certainsize does not gonna be there might not be enough room for the entire menuespecially if we had more menu items at some point so once we get down to thatsmaller size let’s create another rule for Mavs list space allies of the listitems inside a navigation and those are currently loading so let’s go ahead andjust set the displayed a block and sent the float 10 million save that andrefresh your page and that aligns them vertically but knowing a little spacebetween them so it’s also said he margin bottom property of me 20 pixels savethat and refresh there we go now and get a little more room to work with theproblem now is we have a little too much space on the bottoms we might go intothe rule for the nav list and we said the panning 210 pixels we might just setthe padding bottom here pending hyphen bottom 20 save that and refreshand that gives us a little bit of a better look there then the last thing Iwant to do that menu is make it disappear now who styled it we have itlooking like what we wanted to look like when it finally pops open now want tomake it disappear so we’re gonna go into nav list rule and we’re gonna sit itsdisplay to none now we’ve done all that work we’re gonna save that and refreshit and we can see that all that work is good for nothing because it’s nowdisappeared and another problem that we have now is that our social list hasbeen moved down because this item here is not flooding to the left and and soonce we get down to that break point instead of having these icons flow tothe right let’s just position them absolutely and that will take care ofthat so let’s go back to at 6:40 media query and maybe after are now have listswill create another rule for our social list which is the unordered list thatcontains those social media icons were gonna say its position to absolute willset the top position20 pixels Indy right position to 10 pixels will be 10 pixels from the rightedge will see that refresher page and now our social media icons are backwhere they originally were so they’re not really changing visually once we getthat break point but the way they’re positioned is changing behind the scenesso that takes care of some of our issues now we still have the issue of beingable to open and close their menu but we’ll get to that soon for now let’s goahead and move on with the next video thank you for watching