Michael T Ganschow Green: alrighty then Hello everybody welcome back to another section of GR C 175 um this one's kind of interesting um it started out as it was going to be just a.
Michael T Ganschow Green: a lecture on how to set up your a hamburger menus and responsive design basically how to get your.
Michael T Ganschow Green: menu to collapse, so that it turns into a single column drop down that has a trigger button, the most common trigger button for mobile devices is what's called a hamburger menu, which is a little icon that's got to read lines on it as a.
Michael T Ganschow Green: As a symbol it's kind of become a agreed upon ui that if you click on that that's where your menu opens from well that little three stack thing is called a hamburger and, as I was going through my hamburger notes and my hamburger things.
Michael T Ganschow Green: I saw that hamburger menus play around with a couple of concepts that I haven't really spoken to you guys about.
Michael T Ganschow Green: In class, it was sort of like a nesting doll like I would open up one thing.
Michael T Ganschow Green: And then there was another and then there was another and then there was another So what should ostensibly be.
Michael T Ganschow Green: Like I don't know a day's lecture on hamburger menu is is probably the kind of thing two or three days that introduces a bunch of cool stuff.
Michael T Ganschow Green: That you guys may or may not wish to use on your project fours so stand by standby because there's a lot of interesting knowledge coming you guys as blank.
Michael T Ganschow Green: One of them actually the very first one that i'm going to go over is how to do a single page scrolling website, because the single page scrolling website uses a concept.
Michael T Ganschow Green: That we will also use when we make our hamburger menu so first So the first thing we're going to start off doing is building a website that is one single web page a bunch of you talked about that.
Michael T Ganschow Green: For your project for us and I actually don't mind if you do that as long as the five pages, or whatever, then i'm requiring.
Michael T Ganschow Green: Are delineated very clearly in your single page scroller that I can see the different pages of that website very clearly.
Michael T Ganschow Green: As a bunch of you have emailed me about that shouldn't be news to the folks who have emailed me about this and i've gone over it with you guys, but I don't think i've gone over it with the broader class yet so you know what let's go over with the broader class, because one of those.
Michael T Ganschow Green: Things.
Michael T Ganschow Green: That makes.
Michael T Ganschow Green: hamburger menu as possible requires this this concept that also makes a single page scroller.
Michael T Ganschow Green: necessary, so why not let's pop it open and.
Michael T Ganschow Green: And and let's explore so well, so today will be single page scholars and setting our menu up and then, I have a sneaking suspicion that that will be enough to fill your brains up, although maybe maybe not and then next class will be.
Michael T Ganschow Green: activating a hamburger functionality on it that hamburger functionality so and then we will introduce more concepts.
Michael T Ganschow Green: Direct targeting with CSS selectors and then we're going to finish it off with html icons, so we are just going to be going through it all through the next two or three classes so buckle up everybody it's madness ahead so before I do any of that the.
Michael T Ganschow Green: screen sharing action going on here i'm just a quick reminder to everybody that to provide your two cents for everybody's final project three.
Michael T Ganschow Green: there's some pretty good engagement going on here, but I would of course like to see additional folks opinions on.
Michael T Ganschow Green: Project threes I see a lot of people languishing down at the bottom of like one or two replies so i've been trying to as i've been doing my few and night.
Michael T Ganschow Green: reply to ones at the bottom to push them up to the top to get them a little more visibility, so I highly recommend you guys when you're replying to your project threes do that start with one that's down toward the bottom here.
Michael T Ganschow Green: The lead the they start about five posts off the bottom poor Cassandra right now it's the bottom one so she's next on my critique list and.
Michael T Ganschow Green: And do one of those, because that will instantly kick them up to the top this thing basically sorts by.
Michael T Ganschow Green: newest reply up at the top of the thread, so I would recommend, starting from the bottom so poor people don't get hidden.
Michael T Ganschow Green: better than you than it was when we first started and when there was like 30 people in here, and the last few projects will be hidden on another page but.
Michael T Ganschow Green: But it's it's a thing so just make sure you get that and make sure you get everybody your two cents, I really do appreciate that.
Michael T Ganschow Green: And they really do appreciate that, too, I like seeing as many people as possible, giving feedback, so you have until midnight on Friday to give feedback so pleased to be giving feedback to your fellow students.
Michael T Ganschow Green: alrighty then so before I get started that's pretty much all the class announcements, I have before I get started um does anybody have any questions on anything before we leap in and start doing strange things too terrible html.
Michael T Ganschow Green: Alright cool so that being said, I.
Michael T Ganschow Green: mean the chat over there and.
Michael T Ganschow Green: we're going to pop into dreamweaver here so.
Michael T Ganschow Green: Over the course of the Semester several you've asked about building a single page scroller and what exactly is involved in it.
Michael T Ganschow Green: And it is surprisingly easy okay i'm single page scholars are based around an html principle called anchor linking.
Michael T Ganschow Green: I think I got a little guide on anchor linking nope that's the drop down menu zoom chrome please to be going Thank you there we go how to create it yep yep this one cause of page jumping but the.
Michael T Ganschow Green: Most html tutorials, you will find um it's a process called anchor linking relatively straightforward, all things considered, to set up and it just sort of opens up your web page so we're going to do is we are going to.
Michael T Ganschow Green: not yet we're going to use this concept there's a nice little tutorial I dumped in the chat for all of you guys to enjoy and we're going to use that concept to.
Michael T Ganschow Green: to open this thing up into get our little babushka doll going and then we're going to then we're going to use this to make a hamburger menu, so all right anchor link, so let me build a nice little structure here first.
Michael T Ganschow Green: Of a web page, and then we will see where we want to go.
Michael T Ganschow Green: So let's go.
Michael T Ganschow Green: let's go and see where we want to go alright so i'm going to do i'm a root folder already set up my GR C 175 class demonstration eight there it is it's all set.
Michael T Ganschow Green: So.
Michael T Ganschow Green: If you guys have any questions on that, of course, to you know root folders and the criticality I see some of you were having issues with root folders on project three, but I think we got all these straightened out.
Michael T Ganschow Green: All right, let the brand new html brand new html and create know really like created we're going to get a color wheel nope we're not cool alright so let's chat i'll check chat in a second all right.
Michael T Ganschow Green: Time to open some things up a little bit here, give me some room to breathe.
Michael T Ganschow Green: that's.
Michael T Ganschow Green: The.
Michael T Ganschow Green: Standard it.
Michael T Ganschow Green: Okay cool so pop they would go in we're going to go file save.
Michael T Ganschow Green: This in the in the file pile we're going to throw nope we're going to throw going to go to desktop and we're going to put this in GR C 175 this is going to be our single page.
One moment single.
Page.
Michael T Ganschow Green: schooler may indeed use it as well for.
Michael T Ganschow Green: Other things i'm also going to open up ugly silicon mind him for spare parts, you guys know I like mining my other projects for spare parts, because it.
Michael T Ganschow Green: makes your life a lot easier makes your life a lot a lot a lot a lot easier so we're gonna we're going to go in and clear some stuff out alright, so do do do do okay.
Michael T Ganschow Green: Second, page scroll so typically when you're building single page web sites it's actually a one page website you're using some form of tag to break apart, each of your individual content.
Michael T Ganschow Green: So i'm going to start off with a pretty standard structure we're going to start off with a header.
Michael T Ganschow Green: dot n et te would go and then we're going to do a nav I don't know yet where I want them to have placed with a one in the header or outside of it so for now, the nav will rest outside of it and then i'm going to do main to contain all of my.
Michael T Ganschow Green: main content and then you do a full.
Michael T Ganschow Green: Of a father, the father Okay, so a couple of you discovered and you've emailed me about it that.
Michael T Ganschow Green: If i'm just writing whatever for my tags like whatever word bracket some word bracket as long as I close it somewhere bracket forward slash some word bracket in my document, it seems to work and.
Michael T Ganschow Green: The answer to that is yes, you can invent new tags at a whole cloth with html5 and i'm telling you this, but.
Michael T Ganschow Green: Several of you come across it independently so might as well bring it to the rest of you.
Michael T Ganschow Green: you've been met you just invent tags, on the whole cloth if html5 does not recognize the tag as long as the syntax is proper IE it's all lowercase and you close it somewhere.
Michael T Ganschow Green: um it will treat it like it's a layout tag like it's a div tag basically essentially treated as kind of a whack a new class style div tag which is.
Michael T Ganschow Green: Always fun So yes, in theory, you can name tags whatever you want, but that will also on occasion.
Michael T Ganschow Green: Damage your search engine optimization and indeed damage delay your website is displayed in browsers because browsers are looking for certain tags and some browsers opera will flush.
Michael T Ganschow Green: Non standard html tags So if you wrap some critical piece of your website in some random tag you've made.
Michael T Ganschow Green: It always be visible, but it is something you can do.
Michael T Ganschow Green: All right, let's say we got us a five page website here just for fun.
Michael T Ganschow Green: So for those five pages i'm going to use five article tags in my main oh snap dog so we're gonna go article.
Michael T Ganschow Green: Class equals room I don't make pages for him, why not we'll make classes, that are the friggin pages, why not, why not what's stopping me you guys you can't stop me so i'm going to copy paste this article so we're gonna go home.
Michael T Ganschow Green: About.
Michael T Ganschow Green: Oh no i'm not going to do them as classes you guys i'm not going to miss classes i'm change some up we haven't really worked with these before in the Semester i've done a couple of examples.
Michael T Ganschow Green: To show you guys how to sign up but we've not worked with these, and this will help our a single page scroller immensely, these are not going to be classes you guys, this is just old habit of Michael these are going to be ids, why are they going to be ids.
Michael T Ganschow Green: Because tag ids are very important to set up the links for single page scroll lawyers and so i'm gonna go i'm just gonna go copy paste.
Michael T Ganschow Green: that's not a home look at this two straight ideas in one tag you can use to ids in one in one html file.
Michael T Ganschow Green: People will cry everything would break that's not how it works up canceling each other out don't use multiple ids in an html file be good alright So here we go, we got home article a home about let's go this next one will be I don't know products products.
Michael T Ganschow Green: And then.
Michael T Ganschow Green: we're going to go.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: do go product.
Michael T Ganschow Green: we're gonna go.
Michael T Ganschow Green: let's see about us.
Michael T Ganschow Green: Products reviews.
Michael T Ganschow Green: Contact or.
Michael T Ganschow Green: Contact so now i've got five different article tags with five different ids on the one ID for each page and and we put an ID on our header of top we go sweetness and light.
Michael T Ganschow Green: So we now have all the bits and bobs ready to start building a.
Michael T Ganschow Green: A single page scroller So why did I use ids here, instead of classes well nine times out of 10 you would use classes in a situation like this because they're multi applicable they're very flexible.
Michael T Ganschow Green: All of this, but the reason why i'm using ids here is because we're going to use a specific type of linking called anchor linking.
Michael T Ganschow Green: Basically what anchor linking is is a pretty standard a tag link you guys written a million a tag links now.
Michael T Ganschow Green: A space a trip equals quotation marks with your link in it close bracket then whatever triggers that link, then a bracket and a closing Brett and closing slash and another a standard html link well.
Michael T Ganschow Green: That is a pretty regular link that goes out looking for different files right.
Michael T Ganschow Green: So go it so it'll either go it's either looking for an image file like we did with our photo gallery is looking for an html file locally, on your site or it's looking for an html file outside of our site well.
Michael T Ganschow Green: One additional trick, you can do with a with an A tag which is you can hook it up to an ID within a page or even.
Michael T Ganschow Green: On another page so as long as you know what these ideas are you can actually have a link that points to them that goes out and basically points to these ideas okay so so.
Michael T Ganschow Green: That link that a H RAF equals quotation marks, instead of just being a filename images slash funny dot jpg or.
Michael T Ganschow Green: contact that html or https colon slash slash www dot CRC 175 dot com in this case we link it to the ID we put a hashtag in front of it.
Michael T Ganschow Green: Remember, using the hashtag is a placeholder character for links is where it comes back to our you put a hashtag in front of it, and then you put whatever the ID is and your thing will go there it's NUTS you guys it's crazy it's wild we're gonna have a good time.
Michael T Ganschow Green: All right, let's see either one, I want to toss in one index.
Michael T Ganschow Green: I want to open up one other thing to.
Michael T Ganschow Green: To to mind for parts is it this guy.
Michael T Ganschow Green: there's another one on mining earlier.
Michael T Ganschow Green: You.
Michael T Ganschow Green: da minute for parts yeah my new parts all right, I don't know why you went to okay yeah one minute for parts too cool.
Michael T Ganschow Green: All right, so can I see activity in the chat nope alright cool so back to my page if the chrome will get out and go and give browser chrome and get out of my alright so.
Michael T Ganschow Green: i'm gonna go ahead and build a series of nav buttons in my NAB that will link to each of these pages and I will show you how to build that a tag okay So here we go so inside whenever i'm going to wedge it open with a good old fashioned you.
Michael T Ganschow Green: Have a bracket around that who helped me go Hello that not on the capital this isn't European safety ratings come on now.
Michael T Ganschow Green: And we go alright, so now we got a match set of us just means whatever bullets we stick in here will show off with their little bullets out so we're gonna do some list items.
Michael T Ganschow Green: How about a closing list item.
Michael T Ganschow Green: How about an A tag.
Michael T Ganschow Green: know about some button text home Now this is pretty standard kind of link writing right well here's the difference.
Michael T Ganschow Green: So we're coming here and i'm putting my a draft in this guy right here so i'm going to go a draft.
Michael T Ganschow Green: equals quotation marks and then instead of putting in a file name here i'm going to put in a hashtag a good old fashioned pound sign.
Michael T Ganschow Green: And i'm going to type in home okay now what does that do well what that does is that whole button is now inextricably tied to this article, right here, so this article will NASA whenever you click on this home button, it will now take you to this article take you right there.
Michael T Ganschow Green: Let me write another one here, so you can see what i'm doing.
Michael T Ganschow Green: This list items.
Michael T Ganschow Green: You know, and then some a's.
Michael T Ganschow Green: And then, our next page is in about page.
Michael T Ganschow Green: And then we're going to do an h.
Michael T Ganschow Green: equals quotation marks hashtag a boom.
Michael T Ganschow Green: There we go, so now notice, by the way, as i'm writing these as well, I don't have a target underscore blank.
Michael T Ganschow Green: attribute on them, I just have the hrs because I don't want this link to open in another page, I want to all stay on this page okay.
Michael T Ganschow Green: All right, so single page scroller oh boy I now that you guys know the process i'll do one more hand building in the process, and then I copy paste the other two so.
Michael T Ganschow Green: we're going to do some a tagging in the middle of a list item of what you guys have done 1.77 billion by now products, and I know you have because i've seen the results, the results are on the forum for everybody to see each ref equals.
Michael T Ganschow Green: screw boop and we're gonna go product.
Michael T Ganschow Green: and go save a copy paste the other two.
Michael T Ganschow Green: Doo Doo Doo Doo Doo Doo.
Michael T Ganschow Green: and review.
Michael T Ganschow Green: review.
Michael T Ganschow Green: And let's go to contact.
Michael T Ganschow Green: You know what now, what are you getting coding it for when you've got a copy paste copy pasted my goal copy paste we're going to get a contact we're going to go contact.
Michael T Ganschow Green: Blue yeah so now all set So here we go.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: Now then, now, then now, then.
Michael T Ganschow Green: want to add a couple of pieces of content to each page so i'm going to put an H2 to function as a headline for each of our pages and then i'll put a little button that says back to top one of the things you will notice with a lot of single page scholars is, as you get.
Michael T Ganschow Green: As you get your further and further down a particular page.
Michael T Ganschow Green: Typically, at the bottom or near the bottom, there will be a button somewhere there that says back to top that will take you to the BAT that will take you to the top of the website.
Michael T Ganschow Green: Either that, or the menu is run as a fixed bar at the top of the of the browser window and the whole website will scroll underneath it you'll see both of those formats i'm going to put back to top buttons on this one, because.
Michael T Ganschow Green: it's good practice with anchor linking so coming here and i'm going to go H two.
Michael T Ganschow Green: And i'm gonna go home.
Michael T Ganschow Green: And then underneath here and i'm gonna go and a.
Michael T Ganschow Green: And then, in that a put back to top jethro an exclamation point in there just for fun on the goodwill and then the ID on my header is top.
Michael T Ganschow Green: So a H equals quotation marks pound sign top.
Michael T Ganschow Green: So i've been doing a lot of talking so i'm going to pause for a second here does anybody have any questions on anchor linking okay.
Michael T Ganschow Green: chat open anybody's got any questions or if anybody wants to verbally as pre recorded people were watching this I four days from now we're two weeks from now you got any questions you know where to find.
Michael T Ganschow Green: Okay, so.
Michael T Ganschow Green: i'm going to copy paste all of this year now to hand code one more of it, and then I will copy paste the rest so renaming some age to us.
Michael T Ganschow Green: And we're going to go a boot ski boot.
Michael T Ganschow Green: And then gonna go.
Michael T Ganschow Green: And then we're going to go egg tags and then we're going to go back to top an exclamation point and then gonna go hmm.
Michael T Ganschow Green: equals quotation marks hashtag top backed it.
Michael T Ganschow Green: up all right now the.
Michael T Ganschow Green: boot.
copy.
Michael T Ganschow Green: reviews.
Michael T Ganschow Green: In going to go content.
Michael T Ganschow Green: It would go now let me show you how this thing works, because should be fully running now it's already a single page scrolling website closed up the chat to pop this open OK, so my shrink my browser window down just a little bit.
Michael T Ganschow Green: And we go.
Michael T Ganschow Green: Now this thing should scroll around all over the place, when I click on this stuff So if I come here to contact there it goes down to contact.
Michael T Ganschow Green: That, if I go to this contact button here that clear That takes me back up to the top but go to my home button snap That takes me to the.
Michael T Ganschow Green: To my home if I go to about snap there goes to the about are going to product snap there's the products we're going to review snap there's reviews.
Michael T Ganschow Green: So you kind of see how this is working right so now we're all the way back up at the top right snap there's contact.
Michael T Ganschow Green: Back to top paying we're back up to the top product snap there's products back to the top bang to kind of see how this thing is working right, it is.
Michael T Ganschow Green: It doesn't work real well and folder solution because we're just kind of wandering around here, but nevertheless.
Michael T Ganschow Green: It does work you just have to shrink the browser down, so what i'm going to do is i'm going to use the power of CSS to give everything a bit more scale and then we're going to have some fun.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: Back to top snap contact back to chopped snap so pretty straightforward, we now have a single page scrolling website look at that that is NUTS you guys a single page scrolling website, just like that.
Michael T Ganschow Green: Alright, so let's have some fun.
Michael T Ganschow Green: Time to dig in here time to dig in and start start making this get a little weird.
Well it's too late for that.
Michael T Ganschow Green: double check and see if anyone has hit me up with questions questions and no verbal asks so i'm going to assume that everyone is all good when we go in and style the crap out of this thing technical term and get it all set and ready to go for.
Michael T Ganschow Green: For all sorts of fun.
Michael T Ganschow Green: All right, let's do this so.
Michael T Ganschow Green: So so so so so.
Michael T Ganschow Green: We new CSS create a new CSS browse we're going to shove, it in our CSS folder where that sun don't shine we're going to save this as a single page.
Michael T Ganschow Green: Page scroller.
Michael T Ganschow Green: and save and we're going to go okay there's a single page scroller CSS, that is, all of a sudden, to a miracle popped in up here notice also Michael did a bad he forgot to Title this page.
Michael T Ganschow Green: So fine we'll title the page I see you people snickering in the back there I see you to back there don't think I don't think I didn't see you see all alright so we're going to call this thing.
Michael T Ganschow Green: We we scrolling.
Michael T Ganschow Green: All right, we're going to hit some save new quick file save all actually because you know what better way to save them to save all there it is alright, so now it's time.
Michael T Ganschow Green: to steal honesty I know steal this this big huge crazy style I did an ugly here just tearing the margin and padding off of everything that I have here so we're going to go.
Michael T Ganschow Green: Take this guy i'm going to copy paste him i'm going to shove him into my CDs.
Michael T Ganschow Green: And we're going to go html comma body P ul.
Michael T Ganschow Green: em gee so we're going to go P ul article in a one article and a yes just get rid of all the margin there goes by X minus life a lot easier.
Michael T Ganschow Green: crunches everything go oh H2 as well, H two O P would go rip.
Michael T Ganschow Green: Well, it was good, while it lasted Eric goes now now, this is a page of nothing there's nothing to you anymore, when you go well you know bracketing ego.
Michael T Ganschow Green: is nothing there it's all crammed together our God yeah it's all crammed together don't worry we're gonna make it look better alright, so now we're all set to do fun things.
Michael T Ganschow Green: Like put heights on stuff and do terrible background colors which is michael's favorite little hobby in this class is just just spray awful background colors all over the place, so.
Michael T Ganschow Green: let's go and let's go no not you, you.
Michael T Ganschow Green: were going to do we put up top to an html comma body for that text align goodness text.
Michael T Ganschow Green: align.
Michael T Ganschow Green: Center.
Michael T Ganschow Green: oops and should be a semicolon all right now it's time to get heights and background colors and that will mess around with our buttons in a second so i'm gonna go header.
Michael T Ganschow Green: Mostly midnight's.
Michael T Ganschow Green: As you really should be doing anyway, so that your content can kick and stretch everything so we're gonna go man.
Michael T Ganschow Green: hello, my name is men honey and lemon height is going to be 150 pixels for the header and my background color back when.
Michael T Ganschow Green: is going to be.
Michael T Ganschow Green: bama bama Bush I just go black i'll just go play one.
Michael T Ganschow Green: There we go big black bar at the top website.
Michael T Ganschow Green: And then we're going to go now rank a tautology Min height.
Michael T Ganschow Green: 75 pixels.
Michael T Ganschow Green: background color.
Michael T Ganschow Green: Maybe something like Warren.
Michael T Ganschow Green: Okay, fair enough looks good to me ah OK let's see we got here think yeah oh yeah we're looking at a browser.
Michael T Ganschow Green: Number you always got to check in in the browser periodically cuz you never know what you might get like this.
Michael T Ganschow Green: All right, let's do this man So here we go.
Michael T Ganschow Green: So so so so so already it's got good contrast, I think I need to ruin that so First things first we're going to do an overall article style article.
Michael T Ganschow Green: hi.
Michael T Ganschow Green: i'm 500 pixels.
Michael T Ganschow Green: arch pretty good 500 pixels seems like a pretty good kind of Min Heidi thing to do, we got to.
Michael T Ganschow Green: get over that but I did ooh Okay, what a footer at the bottom.
Michael T Ganschow Green: I think, will make the footer a slightly.
Michael T Ganschow Green: slightly.
Michael T Ganschow Green: thinner version of our header.
Michael T Ganschow Green: footer OK, so now, I am going to give each of my pages a lovely background color so that we can see them at work so we're going to go hashtag home like a technology.
Michael T Ganschow Green: background color.
Michael T Ganschow Green: line.
Michael T Ganschow Green: yeah.
Michael T Ganschow Green: I don't know I think I might do like do I might do I might do something that will go nicely with that.
Michael T Ganschow Green: Even you know we'll do things that go with an orange so how about we do an orange red.
Michael T Ganschow Green: yeah that's looking better than a it will do like a 70s color scheme, I think let's do that.
Michael T Ganschow Green: hashtag letter that you put in hashtag and it's already given me a list of things so there's my about wrecked ology background color.
Michael T Ganschow Green: Sam sand hey here it is we'll do some sandy Brown and save.
Michael T Ganschow Green: And then we're gonna do like a tautology product.
Michael T Ganschow Green: background color.
Michael T Ganschow Green: Do to do to do to do.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: corn flour now we'll do coral, why not.
Michael T Ganschow Green: let's see so.
Michael T Ganschow Green: Actually, you know I may leave products blank and I may put a background picture in in the html so that it looks like it's scrolling all over the place, I think i'm going to do that alright cool.
Michael T Ganschow Green: cool beans let's let's do that all right, just to show you guys that it's possible to have a terrible thing so we're going to change that coral we're going to go hashtag reviews give reviews the coral.
Michael T Ganschow Green: And then we're going to go contact.
Michael T Ganschow Green: Technology and we're going to go.
Michael T Ganschow Green: background color.
Michael T Ganschow Green: yellow orange fine.
Michael T Ganschow Green: Poorly would then we go.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: Good i'm scrolling scrolling action there we go OK now go back up to bloody.
Michael T Ganschow Green: And you know we'll just stick a background on that guy background image let's go here background image background image go to images.
Michael T Ganschow Green: In the background here, something that'll get Nice and rest out when I blow it up sure why now about a meal sure let's go no background position Center Center.
Michael T Ganschow Green: background current attachment fixed background size cover and go save so now, when I scroll through my page.
Michael T Ganschow Green: scrolling scrolling oh look at that look at that are yeah that's just that's just some nice background.
Michael T Ganschow Green: Here so we've got a we've got a secret background image behind everything and then, if I click back to top it stamps me back up to the top.
Michael T Ganschow Green: I click on products there goes back to the top there that is there's some reviews, then we go back to the top contact back to the top home back to the top see how this is working, you guys look at that it's a single page scroller NUTS look at all this madness.
Michael T Ganschow Green: Alright questions.
Michael T Ganschow Green: Anyone had any questions, since i've been working nope nothing in the chat and nobody's asked anything so.
Michael T Ganschow Green: Time to oh I got one other thing I want to do they're going to convert the whole thing to a Sam Sarah type face and then we'll have a little fun so we're going to go.
Michael T Ganschow Green: let's go html bond, you know loving right here and body.
Michael T Ganschow Green: Family gotham.
Michael T Ganschow Green: would go save and go down to our article give all of our text color white.
Michael T Ganschow Green: way it POPs against wherever it is.
Michael T Ganschow Green: you're in it refresh I know and have to enlarge some things and add some padding and a few other things, to get everything all set so coming along nicely done so we're gonna go let's go article.
Michael T Ganschow Green: And we're going to go padding paying.
Michael T Ganschow Green: 35 pixels of padding so that Nice big old padding will push everything off the edges so it's it's sort of gentle and kind.
Michael T Ganschow Green: Then our.
Michael T Ganschow Green: Article.
Michael T Ganschow Green: H tues we Nice and big.
Michael T Ganschow Green: So not tech sighs what sighs font size.
Michael T Ganschow Green: 3am I so big it is put a drop shadow on it to text shadow.
Michael T Ganschow Green: And we'll go five pixels five pixels five pixels.
Michael T Ganschow Green: pixels.
Michael T Ganschow Green: And we'll do some blur on these shadows one three pixels and Oh, what the hey will make the background black so it's a nice hard tech shadow on our H choose.
Michael T Ganschow Green: Our yeah look at that that POPs in nicely yeah yeah it makes it really easy to click on our single page scroller here, look at that.
Michael T Ganschow Green: All right, slick beautiful i'll tighten the shadow up a little bit too, I have some aesthetics, contrary to what some of you have said, I actually deliberately do build these pages rather badly mostly so that you're not inspired to to use the.
Michael T Ganschow Green: word go, I had better alright, so now we're going to make some buttons and then we are good to go.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Many of you have emailed me that how to turn in a link into a button and then like one half of you've done so so um.
Michael T Ganschow Green: i'll show you how to do that real quick as well yeah so we're going to just make these back to tops buttons by just doing a.
Michael T Ganschow Green: A.
Michael T Ganschow Green: Article a.
Michael T Ganschow Green: compound selector so got an article H2 article a bracket display block.
Michael T Ganschow Green: And we go and we're going to go.
Michael T Ganschow Green: gonna do we're gonna go display block we're gonna go with.
Michael T Ganschow Green: 200 pixels.
Michael T Ganschow Green: Min width excuse Min width.
Michael T Ganschow Green: And height.
Michael T Ganschow Green: Go.
50 pixels.
Michael T Ganschow Green: And we'll go border.
Michael T Ganschow Green: One pixel.
Michael T Ganschow Green: White one pixel solid white.
Michael T Ganschow Green: Maybe more later border radius.
Michael T Ganschow Green: By pixel I don't know we'll see what we need to do on that radius and padding.
20 pixels.
There we go save.
Michael T Ganschow Green: And to the magic of television refresh all you didn't oh you didn't.
Michael T Ganschow Green: Article a display block so wait did I miss something, what do you oh we're gonna do white color to let's just make sure that we're doing it.
Michael T Ganschow Green: Oh that's why because it helps if you add in a colon you guys X, Y the colons not whoa that's a little big let's go with.
Michael T Ganschow Green: The fixed with fine i'm going to do it that way you margin.
Michael T Ganschow Green: Zero auto.
Michael T Ganschow Green: Center them.
Fresh.
Michael T Ganschow Green: it's a little big I think we'll do.
Michael T Ganschow Green: You know what no midnight none at all, none at all, there you go look at that now.
Michael T Ganschow Green: color.
Michael T Ganschow Green: white.
Michael T Ganschow Green: text decoration.
Michael T Ganschow Green: None.
Michael T Ganschow Green: Wait.
Michael T Ganschow Green: To the magic of TV.
Michael T Ganschow Green: Using some absolute are absolute three use of some.
Michael T Ganschow Green: Some are going to enlarge that tight man I going towards that type of put know with on it either, now that will do.
Michael T Ganschow Green: will do with.
Michael T Ganschow Green: A little yeah I do will do 150.
Michael T Ganschow Green: Okay, so.
Michael T Ganschow Green: Go font size.
Michael T Ganschow Green: to him.
Michael T Ganschow Green: So basically what you do to make a button is you wrap your tags your individually tags if you're not using html button tags to i'm not here i'm just using a tags whoops little big.
Michael T Ganschow Green: If you're not using your.
Michael T Ganschow Green: Your if you're not using button tags around these guys.
Michael T Ganschow Green: You can do it with your html a tax.
Michael T Ganschow Green: margin 15 pixels auto save it's a nice margin off that top there goes fresh so you can do any old button any old way we got these back to tops like that action Bam.
Michael T Ganschow Green: Back to tops and then we just go, you know think they need a rollover state to.
Michael T Ganschow Green: Go a.
Michael T Ganschow Green: Or to go a colon hover my aesthetics demanding a rollover state, so there goes article a hover color nope background color.
Michael T Ganschow Green: Black OK, so now got a nice little page built up here fresh, new navigation and then we're good there we go back to top it's going to contact back to top.
Michael T Ganschow Green: we'll do one more i'll do a little bit of transparency on this button here of a product so it's a little more visible and then we're good to go.
Michael T Ganschow Green: Back to top top home back to top bout back to top CEO it's all working Santa bouncing around the page saying it's all going and that's how we're working, so now we have a single page scroller all set and ready to rock.
Michael T Ganschow Green: With a bunch of buttons I need around those corners more you guys I need to I can't not so we're going to go 10 know that.
Michael T Ganschow Green: aesthetics twitching again alright so then we're going to come down here and we're going to go to.
Michael T Ganschow Green: The guy who has let's see the guy who's covered is products right yep products as a food background so we're gonna go go down here to let's see about products so i'm going to do a hashtag product.
Michael T Ganschow Green: A racket background color.
Michael T Ganschow Green: Obama use the color picker this time we're going to go pitch black.
Michael T Ganschow Green: we're going to go rgb a about 30% transparency there we go Why am I doing that, but you can actually see the button.
Fresh.
Michael T Ganschow Green: Products over the background image look at that i'm going to roll over fresh ooh the overriding my overstate let's find out, it is all right well you got it.
Michael T Ganschow Green: Product today.
Michael T Ganschow Green: will find.
Michael T Ganschow Green: Products a colon hover.
Michael T Ganschow Green: cool and.
Michael T Ganschow Green: we're gonna go black.
Michael T Ganschow Green: There we go.
Michael T Ganschow Green: Alright, so everybody's rolling over nicely look at that cool So you see the structure on this guy so.
Michael T Ganschow Green: So, building a single page scroller is actually really straightforward from an html perspective so saw a couple of you jumped in I after we had built the html so single page scrolling websites are very, very straightforward okay.
Michael T Ganschow Green: In order to get them to work you basically just need a set of ideas in your web page for.
Michael T Ganschow Green: buttons to link to or links to link to so you just need ideas sprinkled liberally throughout your page and then you can link to them.
Michael T Ganschow Green: With a standard ah ref except instead of pointing to a file, it points to the ID so you're doing a space H ref equals quotation marks.
Michael T Ganschow Green: hashtag and then whatever you want that link to point to so whichever ID you have in the system to correspond to so, for example, these back to top buttons I was just so lovingly styling.
Michael T Ganschow Green: point to my header which has an ID of top so that when i'm all the way down at the bottom of the page I can click on this guy boom and it will take me right back to the top so just a little fyi.
Michael T Ganschow Green: So one thing that I have not told anybody, though, so this is new to both you current people who've been here, and you late arrivals is that this you can link to an ID from another page.
Michael T Ganschow Green: So if you want to link to an ID in another page all you have to do is right before that hashtag no spaces right before that hashtag you put in either the name of the file.
Michael T Ganschow Green: The name of the html file on your local site that has that ID in it, or.
Michael T Ganschow Green: The full address of the web page, plus the file name you're going to.
Michael T Ganschow Green: Plus that hashtag ID so you can do this for external pages internal pages as well, nine times out of 10 though you're just going within a page it's called an intro I am tra interrupt page link or a page jumper you hear them called sometimes depending on the tutorial.
Michael T Ganschow Green: So questions on any of that.
that's back to the top.
Michael T Ganschow Green: Top cool okay so time to style my buttons and get them all set up for prime time and then we will start getting them set up.
Michael T Ganschow Green: drop down no actually not for drop down for a hamburger a nice delicious hamburger okay.
Michael T Ganschow Green: Well you'll start getting everything all set up and ready to go for that so before I jump in and begin styling my menu and prepping him to be to be made into a burger does anybody have any questions on anything i've gone over.
Michael T Ganschow Green: You guys are watching this pre recorded like two weeks from now any questions.
Michael T Ganschow Green: cool I sound of prep this menu i'm just gonna be I don't know theme a bunch of manual stuff off of one of the others that will make this nicer so i'm gonna go ugly.
Michael T Ganschow Green: and go find my nav ul and clear everything off of that, let me do nicely I might do even I might do nice don't want to go Nice, no, no, Nice and clean.
Michael T Ganschow Green: All right, hang on let's go because i've already got this guy washed out right i've already got this guy washed out right up here, so all my ul stuff it's taken off of that so there goes my margin and padding to find.
Michael T Ganschow Green: NAB ul.
Michael T Ganschow Green: going to go.
Michael T Ganschow Green: bubble bubble how simple, I want to take it really I think we'll just go list I yeah I will just go what I did there list style type none.
Michael T Ganschow Green: And then display FLEX and justify content so list style.
Michael T Ganschow Green: type.
Michael T Ganschow Green: None.
Michael T Ganschow Green: Then i'm.
Michael T Ganschow Green: splay.
Michael T Ganschow Green: wax.
Michael T Ganschow Green: And then.
Michael T Ganschow Green: justify content Center justify content.
Michael T Ganschow Green: Center there we go so solid now that should Center all the button yep there, they are so now we can start playing around with them a little bit.
Michael T Ganschow Green: So now, a vertically centered.
Michael T Ganschow Green: I.
Michael T Ganschow Green: Think I might I think I might okay.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: I can add borders on things to.
Michael T Ganschow Green: Let me see here, we see what I wind up wanting to do here so.
Michael T Ganschow Green: Okay let's go.
Michael T Ganschow Green: New an ad nav ul Li eight.
Michael T Ganschow Green: So we're going to go nav ul Li a.
Michael T Ganschow Green: tautology.
Michael T Ganschow Green: Alright, so First things first to do this way.
Michael T Ganschow Green: Why did not yes, I did display block would go.
Michael T Ganschow Green: A month might need down I might not we'll see we're gonna go display block.
Michael T Ganschow Green: will do padding.
Michael T Ganschow Green: that's the distance between them.
Michael T Ganschow Green: 20 pixels and try 16 like I did on the other one see how that works.
Michael T Ganschow Green: So yeah that's coming along and they are spreading part nicely what am I doing them on 20 I might do a 25 or.
Michael T Ganschow Green: 25 are all right let's go and I will do 20 blow it up a little so we'll go.
Michael T Ganschow Green: we'll go fonts.
Michael T Ganschow Green: 1.5 and.
Michael T Ganschow Green: font weight.
Michael T Ganschow Green: Low.
Michael T Ganschow Green: text decoration.
Michael T Ganschow Green: looks pretty good.
Michael T Ganschow Green: Maybe a little more into like a 22.
Michael T Ganschow Green: Alright cool.
Michael T Ganschow Green: And we'll give them a quick roll over color to go nav.
Michael T Ganschow Green: ul Li a colon hover.
Michael T Ganschow Green: color background color.
Michael T Ganschow Green: dark orange.
Michael T Ganschow Green: sandal Brian lamb rollover brown see these guys are too big refresh there we go boop boop boop I just a little bit more just a little bit more on the padding and then we're good.
Michael T Ganschow Green: sorry about that I didn't mute it and time boom refresh she caught me by surprise yeah we go alright cool so that looks good we got our nice little menu buttons here, I think I apologize to poor headphone users but that's nice it snuck up on me.
Michael T Ganschow Green: put some.
Michael T Ganschow Green: Like I put some.
Michael T Ganschow Green: put some orders on them to yeah I think we will real quick just some real real quick borders, I could do the one where I do you know borders with the edges of the allies and whatever but i'm feeling lazy order.
Michael T Ganschow Green: let's go board your warder.
Michael T Ganschow Green: One pixel solid white.
Michael T Ganschow Green: I know it's gonna look fat in between the buttons and i'm aware.
Michael T Ganschow Green: Too bad actually we're going to go border left.
Michael T Ganschow Green: Oh, you know what you know what fine fine we'll do an ally online we'll do.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: You know Li you guys talked me into it last child.
Michael T Ganschow Green: And I can tell a border right standard menu stuff so now i've done on the aesthetics on the menu.
Michael T Ganschow Green: So we're gonna go.
Michael T Ganschow Green: Border right.
Michael T Ganschow Green: Safe alright cool so now.
Michael T Ganschow Green: they're they look at those guys very nice very nice indeed back to reviews down to products back to top and it's working pretty well so there's a nice little single page scroller.
Michael T Ganschow Green: bang that out in an hour we've got our everything going on the html is working correctly, everything is solid yeah.
Michael T Ganschow Green: So.
Michael T Ganschow Green: we're going to do now is we're going to set this thing up to be a hamburger menu now i've been kind of messing around with a hamburger menu thing here, which I am going to include in the class files, so that you can have this pure hamburger menu as well that i've been playing with so.
Michael T Ganschow Green: All right now.
Michael T Ganschow Green: There is there is some some odd stuff that you got to do to make a hamburger menu work, which is a little bit interesting.
Michael T Ganschow Green: and builds off of this.
Michael T Ganschow Green: Unless the hamburger menu because we're on.
Michael T Ganschow Green: Thank you look it's a hamburger it opens up there goes the drop down okay so nevermind so.
Michael T Ganschow Green: There is.
Michael T Ganschow Green: quite a bit in this thing that builds off of that anchor link concept yeah.
Michael T Ganschow Green: So.
Michael T Ganschow Green: The very first thing we have to add in actually is a couple of buttons that will be made invisible via CSS.
Michael T Ganschow Green: That are basically a set of buttons that trigger the hamburger menu through CSS it's a very, very strange kind of.
Michael T Ganschow Green: kind of thing we'll just put it that way, so i'm going to get the code setup and then i'm going to go through and i'm going to CSS it just a little bit.
Michael T Ganschow Green: there's a I haven't I haven't done too much, and you can see the CSS for all the weird selectors and it's got it's got it.
Michael T Ganschow Green: it's not some weird selectors you guys that's weird selectors from the weird selectors it's a it's not a huge style sheet to drive this and I will explain.
Michael T Ganschow Green: what's going on with all the selectors because it's a, this is the most complex selector you guys are right, probably in here, and probably in GR C to 75, believe it or not, the one selector that actually drives this which is kind of kooky to think about so.
Michael T Ganschow Green: Let me go back to the main one, and we will start getting it ready yeah so aside from the kind of kooky.
Michael T Ganschow Green: CSS the runs it.
Michael T Ganschow Green: The big difference between a hamburger menu and a regular menu, is the fact that you have a couple of buttons right here.
Michael T Ganschow Green: And these couple of buttons are are are are two sides to the same coin.
Michael T Ganschow Green: One is a button that opens the navigation and another is a button that closes the navigation.
Michael T Ganschow Green: And they're basically two buttons that sits separate.
Michael T Ganschow Green: Outside even have your ul they sit in your nav tag she have your name tag and then you have two buttons and then you have the your menu this URL here, so this menu is essentially being driven, at least at the mobile level by these two buttons so.
Michael T Ganschow Green: i'm going to set this code up it's very strange, let me tell you.
Michael T Ganschow Green: And then we're going to play around with it we're going to style it up and we're going to play around with it a little bit we'll see if it actually explodes hilariously because my my hamburger menu efforts almost entirely explode on the first try because hamburgers are not easy look.
Look at that.
Michael T Ganschow Green: Just pop open there, like a mad menu so here is where I got this from this is a great little tutorial on how to make a.
Michael T Ganschow Green: A responsive menu that that that that collapses into a hamburger menu and then he uses a little teeny bit of jquery here's his DEMO of it, by the way, uses a tiny bit of low.
Michael T Ganschow Green: pop this real quick.
Michael T Ganschow Green: uses a tiny bit of jquery to make this menu.
Michael T Ganschow Green: touch sensitive so drop down menus this is mostly men for drop down I don't know the our test one will build has dropped down the test when I built previously.
Michael T Ganschow Green: This guy right here as drop downs, but what he's done is he's made drop Downs usable on touch screens, because they are not usually.
Michael T Ganschow Green: Usually, what happens is you click the button the menu POPs open and then it goes to wherever the button is the myth.
Michael T Ganschow Green: The menu does not stay engaged it's one of the problems with drop down menus on mobile devices and we get much deeper into that in gic to 75 we come back to this this drop down actually at that point um.
Michael T Ganschow Green: But he solves that through a through a piece of jquery a little script that that basically.
Michael T Ganschow Green: holds the first touch, so the menu opens up and essentially pauses that so that then the hand the big fat finger can go down and fat finger.
Michael T Ganschow Green: The buttons that it uses now we're probably we're not going to play much without i'll show you how to install it but we're mostly concerned about this functionality, right here we're mostly concerned about.
Michael T Ganschow Green: This guy right here.
Michael T Ganschow Green: Where POPs down into a hamburger and depending on whether it's clicked or not it's either visible or not okay.
Michael T Ganschow Green: Alright, so a couple things first to get this set up.
Michael T Ganschow Green: To go back to my single page scroller and i'ma go into my source code and i'm going to add a couple of things, first of all i'm gonna give the name and ID.
Michael T Ganschow Green: of now, because one of those buttons the way it opens up this ID is you're essentially clicking on the navigation you're going to the navigation very similar to how.
Michael T Ganschow Green: When you click on products, it takes you down to the product page Okay, when you clicking on reviews, it takes you down to the reviews page.
Michael T Ganschow Green: clicking on content that takes you to the contact page and then, when you click back to top bang it goes back up to the top okay.
Michael T Ganschow Green: So very similar to that one of those buttons boom is actually clicking on the menu i'm going to put in an ID of nav then as per my little tester here, we are going to put in.
Michael T Ganschow Green: A couple of H refs i'm going to put in two buttons that basically duplicate each other and really should probably blow my page to smithereens while they're visible Okay, so in between my NAB and my an ordered list i'm going to put in a couple of.
Michael T Ganschow Green: anchor tags.
Michael T Ganschow Green: And you notice in my DEMO one of them has an H ref that's pointed at the NAB and one of them as an H ref that goes nowhere.
Michael T Ganschow Green: So the first button.
Michael T Ganschow Green: A little guy here is going to go ah RAF.
Michael T Ganschow Green: hashtag now and before we end what i'm going to put in a hamburger just yet i'm going to call this one open.
Michael T Ganschow Green: Save and then i'm going to get another one whoo that's this one right here, this one right here.
Michael T Ganschow Green: A H ref equals.
Michael T Ganschow Green: hashtag.
Michael T Ganschow Green: This one's gonna be called whoa.
Michael T Ganschow Green: Okay now if I open up my thing here upstairs my buttons legend my menu opens why we used a Min aight.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: First things first.
Michael T Ganschow Green: I gotta hide these Dudes I gotta hide them and to do so, I use a very, very interesting bit of CSS targeting now i'm talking about CSS targeting.
Michael T Ganschow Green: In general terms, before relating to compound selectors IE if you have a tag and or, if you have any selector a space and another selector, whether it be tags or classes, or a mix and match or ids or whatever.
Michael T Ganschow Green: That is working for whatever the whatever the innermost item is within each of the outermost items so that kind of directed targeting well what we're gonna do is we're going to do an even more direct form of targeting so before I do that, let me get the.
Michael T Ganschow Green: Precision targeting tutorial yay so again we'll talk about some of this we talk about more than 275 for good times.
Michael T Ganschow Green: Here we go, so I have to do a little bit of precision targeting in order, in order to hide the buttons up at the top here Okay, in order to hide the open and close up at the top, here I got to.
Michael T Ganschow Green: I got to do, just like the most of the the kiss he has bit of precision targeting here okay.
Michael T Ganschow Green: Here is the precision target.
Michael T Ganschow Green: So ordinarily.
Michael T Ganschow Green: Oh, I know what I can do I know what it can do and i'm going to I could change some things Oh, I could change some things so instead of this just being Now this is now hashtag nav yay we are giving the name of an ID oh snap you guys, yes, I know it's the same as it's coach.
Michael T Ganschow Green: Silence peanut gallery so.
Michael T Ganschow Green: You know what I could do it without that, though, but it doesn't need the hashtag.
Michael T Ganschow Green: For the link, so why not let's take advantage of the hashtag while we're here well we've got the fun and the time to do it okay so here's the specific.
Michael T Ganschow Green: here's the very specific, targeted this guy right here now, the carrot a so let me explain to you what we're doing with that Okay, so I go hashtag now.
Michael T Ganschow Green: carrot a racket ology then a display of none.
Michael T Ganschow Green: A display of none so if I hit save.
Michael T Ganschow Green: should hide they're gone Okay, so what am I done well this carrot is a very, very good example of that precision targeting I was talking about okay.
Michael T Ganschow Green: it's called just fyi we have a full list of things it's called a child target or actually a child combinator combinator is the technical term for them.
Michael T Ganschow Green: So what this does when you put a carrot in instead of a space, if I did space Nam a watch this so I didn't Nam space, a right there's my namespace a.
Michael T Ganschow Green: Fresh.
Michael T Ganschow Green: Oh didn't even hide them ah weird it should have um So if you put a space on it will apply to every instance, if I didn't finish interesting um it would apply to every instance of a of a tag within one of the particular containers Okay, if you.
Michael T Ganschow Green: If you put that little carrot in it will apply only to the very first instance of it basically what's called the direct child or the first little piece of it within.
Michael T Ganschow Green: That tag right there, so this carrot is saying leave the buttons alone, although they displayed anyway i'm not 100% sure why, but whatever i'm leave the buttons alone, it only hide the.
Michael T Ganschow Green: The.
Michael T Ganschow Green: Show and hide buttons.
Michael T Ganschow Green: Go now today.
Michael T Ganschow Green: So this first one hi does buttons right there yeah.
Michael T Ganschow Green: Well, I think I worry too much about his visual styling just yet, but we will play around once we get into the media queries so.
Michael T Ganschow Green: he's got his coming in at 640 pixels you see her I got mine coming in here, I think I think I think.
Michael T Ganschow Green: yeah this coming in here hey.
Michael T Ganschow Green: yeah using hymns daring alright, so I can add mine and i'll just do one of these guys I think it's 641 will do what is 640 so it shows when I crunch it on the phone alright so what's their own media query and and the bottom here.
Michael T Ganschow Green: At media only screen.
Michael T Ganschow Green: X with 640, by the way, I noticed some good use of media queries on your project threes you guys considering a show that to very late in your build process and project three I got to tell you how proud I am of your usage of it.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: let's go, we use this position relative.
Michael T Ganschow Green: Fresh that's that one.
Michael T Ganschow Green: So we'll see if we need the position relative in a moment.
Michael T Ganschow Green: Okay.
auto displaying.
Michael T Ganschow Green: play around with that we'll see if we need the.
The.
Michael T Ganschow Green: What we need here exactly.
Michael T Ganschow Green: So.
Michael T Ganschow Green: In order to in order to make this run uh let's see here just blame none.
Michael T Ganschow Green: Ah right ul point okay cool so.
Michael T Ganschow Green: We have a couple of.
Michael T Ganschow Green: couple of fun things to do here.
Michael T Ganschow Green: Alright, so what we're going to do first things first.
Michael T Ganschow Green: Is i'm going to add in.
Michael T Ganschow Green: The selector the triggers all this and it's insane okay it's wild i'm just going to copy paste this this.
Michael T Ganschow Green: This entire CSS rule this entire style into the chat So you can see what this is and i'm going to i'm going to explain in fact here, you know what i'm going to zoom in on it so that we could.
Michael T Ganschow Green: So we can see what's going on here I don't even know if this will work actually it worked with a basic one that I messed with but.
Michael T Ganschow Green: we'll see if it'll work on my advanced one here, so the shrink my portion sharing down shrink my portion sharing down.
Michael T Ganschow Green: A high portion sharing why aren't you changing dimension, I would like you to get wider Thank you and a little bit smaller Thank you.
Michael T Ganschow Green: Thank you and we go Okay, this is a crazy ass selector here technical time okay it's a compound selector in multiple ways it's actually a compound selector.
Michael T Ganschow Green: of compound selectors i'm using a whole bunch of pseudo class styles, that we will well, we talked about a couple of them yeah we have.
Michael T Ganschow Green: We have on our main here we've talked about where is he.
Michael T Ganschow Green: talked about first child and last child, this has a couple of similar ones to that, but i'm going to walk you through what each piece is doing here, because this is basically showing and hiding the buttons and showing and hiding the menu so.
Michael T Ganschow Green: wow not showing hiding the menu will show and hide the menu in a second.
Michael T Ganschow Green: Okay, so.
Michael T Ganschow Green: here's what the selector is doing it's an if then selector in CSS I know I told you, they don't exist when they kind of do okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Very first very first selector in this chain okay very first selector in this chain is this Nam colon not brackets colon Tara brackets are an ample enough parentheses colon target.
Michael T Ganschow Green: wow I don't even think we're getting into selectors this wildman to 75 but here's What this means, it means, yes, the name is not clicked on okay that's all this means if hashtag NAB is not collect on.
Michael T Ganschow Green: Then, which is the this little carrot here this precise selector little carrot here this, what was the what was the term they used it it fell out of my head this combinator this combinator right here.
Michael T Ganschow Green: If it's not clicked on show the first button, if it is clicked on colon target means it's another one like focus and active colon target if it's not clicked on.
Michael T Ganschow Green: show the close button, so this is opening and closing buttons based on essentially States essentially whether or not they're clicked on this thing is insane, this is one of those same selectors you probably ever use in your entire web design career this guy right here so.
Michael T Ganschow Green: First selector if it's not clicked on display block the first button.
Michael T Ganschow Green: If it is clicked on display block the second button and now what's all this, then well.
Michael T Ganschow Green: As you recall, we have where's my source code, thank you, we have added in two buttons and open and close button if the things not clicked on show the open button, if it is clicked on show the close button okay.
Michael T Ganschow Green: All right now time to go, and let me get back to my regular screen sharing here, because this is this can get a little crazy.
Michael T Ganschow Green: Okay boom let's pop it open again okay so i'm gonna i'm just going to copy paste this thing and paste it into my.
Michael T Ganschow Green: Current style at the media query and then we're gonna and then i'm gonna mess around with a few other things.
Michael T Ganschow Green: With my guy here, because for because we have to hide our navigation, I also have to flip them so that they drop down that kind of thing, so we kind of got to we got to do a few things here, but I am going to.
Michael T Ganschow Green: Actually, you know what i'm going to wait i'm going to drop them i'm going to drop the navigation down though real quick, so we got a 640 here So the first thing i'm going to do.
Michael T Ganschow Green: i'm going to come to my nav ul.
Michael T Ganschow Green: God, what is the lost my mind, what is the.
Michael T Ganschow Green: What is the column one oh great now, now is the time to lose my mind hang on one second guys.
Michael T Ganschow Green: flux direction column there it is alright so.
Michael T Ganschow Green: we're going to go NAB ul.
Michael T Ganschow Green: ul.
FLEX.
Michael T Ganschow Green: direction.
column.
Michael T Ganschow Green: Here we go.
Save.
Michael T Ganschow Green: Now, take my guy.
Michael T Ganschow Green: let's shrink it down to a certain point there it is there calming yay.
Michael T Ganschow Green: yay yay look at all the calming yay.
Michael T Ganschow Green: I should probably trigger that at a different point we gotta look at look at this crunch point all right where's this crunch point time to find time to do some crunch point research here.
Michael T Ganschow Green: founders of crunch point research let's try it let's just trigger this early right thing Susan crunch point research, here we go where are we crunching so.
Michael T Ganschow Green: i'm gonna put it on my hamburger menu come in in 1000 pixels.
Michael T Ganschow Green: i'm the worst all right fine we'll have to come in at 1000 pixels instead of 640, why not, and will help the DEMO I suppose alright so let's bring this in at 1000 pixels, why not.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: rash.
Michael T Ganschow Green: Here we go.
Michael T Ganschow Green: Okay um alright.
Michael T Ganschow Green: And i'm gonna do a.
Michael T Ganschow Green: nav.
Michael T Ganschow Green: ul Li a and i'm going to change that border to bottom yeah.
Michael T Ganschow Green: yeah of ul Li a.
Michael T Ganschow Green: Border bottom.
Michael T Ganschow Green: would go and let's go grab.
Michael T Ganschow Green: Mr list item tag.
Michael T Ganschow Green: None.
Young.
Michael T Ganschow Green: Go.
Michael T Ganschow Green: and have ul Li first child.
Top.
Michael T Ganschow Green: The stuff you guys have been doing so no need to go over and into deeper detail, because I know you guys done it because i've seen it on your project threes you can't hide from me so i'm gonna go top and we go.
Michael T Ganschow Green: Now we go Bob.
Michael T Ganschow Green: What do you look like now yeah look at that big picky borders let's go oh border.
Michael T Ganschow Green: You know it kind of like them all the way around I do so, I let's go border.
Michael T Ganschow Green: I think it kind of like them all the way around so we're going to go border.
Michael T Ganschow Green: left so border right on everybody to why not why now they deserve it border right.
Michael T Ganschow Green: It would go say.
Michael T Ganschow Green: Fresh okay cool, so now we have very, very big touchable buttons look at that boop.
Michael T Ganschow Green: thousand pixels you guys 1000 pixels okay so we're going to go here and see if we have any questions so before I start digging into much more deeply do we have any questions double check the chat here.
Michael T Ganschow Green: So what am I done what have I done well, I basically just flipped my navigation menu, so that, once it started to crunch Richard thousand pixels it flips it into this tall menu that is very, very touchable with fingers in fact I think I might even enlarge the type a little bit.
Michael T Ganschow Green: Of ul Li a fonts size and they might even in larger type just a little bit like 3am to make them Nice and big and shiny and touchable to make them irresistibly touchable.
Michael T Ganschow Green: yeah look at that irresistibly touchable Bam you just want to get you just want to get your finger all over that thing so.
Michael T Ganschow Green: Now we're good to go okay boop.
Michael T Ganschow Green: boop Okay, so now let's see if we can.
Michael T Ganschow Green: let's see what bravery will need to do here, so this things are all set and ready for that hamburger rabble rabble so we'll need to hide it here to display block.
Michael T Ganschow Green: Interesting interesting okay i'm just curious to see.
Michael T Ganschow Green: So we put the display none on the ul.
Michael T Ganschow Green: Alright, so First things first is, I am going to add on our crazy selector that I still from this fine gentleman right here.
Michael T Ganschow Green: This is his crazy selector so there's his main CSS and then suddenly he has this crazy selector right here that's that then i'm stealing right now we're going to copy paste to make the button show so i'm going to do that up top here to make the button show do hashtag man you well.
Michael T Ganschow Green: I will go so let's go to come back and not.
Michael T Ganschow Green: yep you need to come back and now.
You need to come back.
Michael T Ganschow Green: and bring you back a notch to thank you all the way around up there, there we go look at that crazy ass selector now.
Michael T Ganschow Green: let's see here, it should with its display none once we get this thing it should pop open, I think I think there it is open when I click on it and there's the close button on the menu popped out look at that open close see how it's taking us to the menu loop, as I click on it boop.
Michael T Ganschow Green: boop.
Michael T Ganschow Green: boop close alright, so now, then I think it should just be a matter of hiding our nav ul I think it should just be a matter of that let's see.
Michael T Ganschow Green: let's see what happens, I think it should just be though a matter of hiding that guy now have you will display.
None.
let's see.
Michael T Ganschow Green: we'll see if this thing explodes.
Michael T Ganschow Green: Fresh open loops ah so there's something that is popping it open okay so that's hidden let's see what piece did I miss.
Michael T Ganschow Green: So we're going to position relative display block auto display none.
Michael T Ganschow Green: Oh, I got it one other selector one other selector I did not put in.
Michael T Ganschow Green: So I have a display none on my on ordered list right so some of the wrong one here, I have a display none on ordered list so it's hidden in theory, if I click on my little open button here and it's a little close self and it's a little open so and it's a little close cell yep I.
Michael T Ganschow Green: click on that guy it should open my name up Okay, but.
Michael T Ganschow Green: Does it because my name is hidden, so I need to make my name visible, so this involves a mildly wild selector.
Michael T Ganschow Green: Which is this guy.
Michael T Ganschow Green: paste them in here so what's going on here well this says when.
Michael T Ganschow Green: The tag with the ID of nav because if you're an idea of nav on everything, so the link works when the idea of nav is targeted that is it's clicked on and it's open to anyone, a the first level of an ordered list inside it should display So if I copy paste this and stick it in here.
Michael T Ganschow Green: let's go now to you ll and then we're going to go back back back so Nam target ul play block, so this says, if this name is clicked on override this display none and show the menu so we're gonna find out here we're gonna find out here.
Michael T Ganschow Green: So we're going to go.
For.
Michael T Ganschow Green: blues right open look at that whoop there it is so wheat okay look at that look at that.
Michael T Ganschow Green: Here it is popping open wheat.
Michael T Ganschow Green: Okay now and, by the way, if you want to see it in action.
Michael T Ganschow Green: Here is.
Michael T Ganschow Green: Good he is DEMO real quick show me that DEMO we're going to pop his DEMO into our lovely firefox up.
Michael T Ganschow Green: So there was his DEMO and if I shrink it down poop it turns into this lovely little guy up in the corner now.
Michael T Ganschow Green: mine.
Michael T Ganschow Green: flexes ever so slightly when it hits that because it's rolling down to the navigation when it opens it up.
Michael T Ganschow Green: I think we can probably.
Michael T Ganschow Green: I because it's going down to the top of the nav tag here, so I think if we stick the nav in the header and apply our.
Michael T Ganschow Green: Our open to the ladder, I think that will keep it from flexing so it's working right now, as you can see it's opening and closing.
Michael T Ganschow Green: Opening closing very nicely fact what I think I am go Okay, let me try something here.
Michael T Ganschow Green: Let me try something.
Michael T Ganschow Green: Okay, so.
Michael T Ganschow Green: set that doesn't look good looks down to the should I put it in, so I might have to put it inside of my header.
Michael T Ganschow Green: Alright, so Michael is going to do a little bit of investigation to see if he can.
Michael T Ganschow Green: Keep it from flicking when it POPs open because there's you can see it FLEX down to the top of the menu now that's perfectly natural, by the way.
Michael T Ganschow Green: Because if you click on any one of these guys they go to the top of their tag there as well, boom and that goes back up to the top so got a thought got a thought that i'm gonna try here.
Michael T Ganschow Green: That is i'm going to stick my nav inside my i'm going to stick my neck inside my header which is, which has a source code of top.
Michael T Ganschow Green: header top and we're going to stick it in top and then i'm going to have it FLEX open and ever go to the inhabit go to top rather than go to header when it's clicked on, so let me see okay so switch reliant on never being we're good okay so.
Michael T Ganschow Green: Here we go.
Michael T Ganschow Green: out so we stick my name inside of my header first things.
Michael T Ganschow Green: It doesn't snap up to the top and we're going to start messing with things do to do to do alright let's see what this looks like.
Michael T Ganschow Green: Well that's interesting because ready for the top.
ones by Pakistan.
Michael T Ganschow Green: see that opens and closes cleanly what up in them to the bottom in a second we'll worry about that in a second alright cool so.
Michael T Ganschow Green: let's go see oh on it.
Michael T Ganschow Green: yeah alright so we're gonna go.
Michael T Ganschow Green: Okay got it.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: You will display FLEX.
Michael T Ganschow Green: Okay, so I got to pin him to the bottom here real quick so um so what i'm going to go ahead and do is i'm going to see if I can solve that flickering problem.
Michael T Ganschow Green: Before I get too deep into it, though, does anybody have any questions.
Michael T Ganschow Green: Okay, so what i'm going to do is i'm going to work on my navigation and see if I can solve the flickering problem.
Michael T Ganschow Green: Before classes done, but I am going to effectively end of the lecture here next class we're going to go over icon fonts how to put in the little hamburger.
Michael T Ganschow Green: And how to and troubleshooting some of the issues you may encounter with these guys but i'm going to spend the next hour seeing, if I can fix the flicker if you would like to stay along.
Michael T Ganschow Green: and watch me troubleshoot this thing and then feel free to stay along, if you would like to take off feel free to take off i'm recording this thing, so you can always come back later.