CSS Menu Purpose: Learn CSS and a common selector trick using :hover. Goal: Create the menu shown below except for the text which comes from your HTML Outline assignment. Perfectly completing all of this is rare, so get as far as you can. look like the example images in that uses relevant CSS properties) a working menu Alignment of the menu is difficult and not as important; the gradient is tricky too. Note: Some parts are A-level difficulty, figure out all you can. Being pixel perfect is not that important. THERE ARE HINTS AT THE BOTTOM. 1. Prerequisites: o Valid HTML outline assignment (duplicate and use as starting point) O CSS selectors (just a few basic ones; but knowing some more can reduce how much you have to edit the HTML.) o skim this assignment for links and hints (bottom) 2. Each item in the HTML outline must have an A tag around the item's text which can link anywhere; this tag needs to exist for the CSS to have something to grab onto. Should already be there from previous assignment. fyi: is the tag that makes web links you click on-- an attribute called href does this... look it up in a reference if you need more. 3. Each menu title's text needs an tag around it which links to just "#" so it goes nowhere. This was not in the previous assignment. 4. HTML outline assignment must be valid HTML; otherwise, it might cause your CSS to not work properly. HTML is your foundation, things that appear to work but are too flawed can comeback to haunt you later when you build more complexity on top of it. Note: I do not want to see DIV tags (maybe i but no more!) I did this using only LIST tags from the outline, A tags for links, and a NAV tag for the whole thing (or 1 div would be ok too.) 5. AGAIN: all the text matches your HTML outline assignment and NOT the text is shown here in the example images! 6. Background Image. Please choose your own but my background image made from a dress fabric pattern can be used. 7. Begin by not using positioning or hiding or hover. Think of productivity (and complexity since positioning is tricky save it for later.) Aim for this: Menu A Menu B Menu C Your Item A1 Your Item B1 Your Item Ci Your Item A2 Your Item B2 Your Item C2 SOCO NSAPO Remember: centering is a little tricky, you don't have to perfect all of this to move forward. See Hints at the bottom. Details that should be useful: DO NOT USE CSS "float" at any point! Font size: 19px any padding: 8px (some tags come with default padding) most margins: 3px Menu Title: color= black width=3px style=outset (aka button) border curve: 16px Menu: color: blue .7 alpha Gradient: black .1 to .5 alpha white shadow: 8x8 16 blur border curve: 16px on bottom corners only Menu Items: take up the full width with the A tag (try a background color to make sure of size then delete the color after you confirm) Menu Bar: all menu boxes are centered on the page (this is tricky.) What is alpha? see hints at bottom 8. Active and Hover Menu Title: when "hover' (mouse over): style=inset (aka button down) border curve: 16px on top corners only Menu Items: when "hover' (mouse over): black background when 'active' (mouse down): red background Menu A Menu B Menu C Your Item A1 MV Your Item B1 Your Item CI 0:00 %0:06 tem A2 Your Item B2 Your Item 3 0:06 9. Positioning: At least 2 CSS position properties have to be used and a few more to place it propertly. Note: 3px (title's border width) + 8px (title's padding width) Menu A Menu B Menu C Your Item A Your Item BYour Item Ci Your Item A Your Item BYour Item C2 Quick description: position lets css place content independent of the rest the page content; like a separate layer. absolute is to the whole document unless a tag above it over-rides this by setting it's position to relative (it should be called override) which does nothing to itself but changes all child tags using absolute. absolute and relative positioning are required for the menu to work. Here is another MDN page on positioning. Ask if confused, this is confusing at first for 90% of people. I made a video on this too. 10. ist menu is positioned differently than the others. This is tricky. 10. ist menu is positioned differently than the others. This is tricky. Menu A Menu B Menu C Your Item A1 Your Item BYour Item Ci Your Item A2 Your Item BYour Item C2 11. Hide then show on hover final result: (see hints) Menu A Menu B Menu C 0:00 / 0:24 Note: the green circle indicates a click and is part of my screen recording software NOT part of the assignment. 12. Content: find an ipsum generator and place that text on the page as content. no formatting required but it should go below the menu and not look like the menu. This will possibly bring out issues with your work if you went down a poor direction; otherwise, it'll just put some text on the page for your menus to drop down on top of. 13. Email submission of all files. Hints: 1. New to CSS: Then you should just work on the basic appearances. Start by setting simple colors to the page background, menu, the items in the menu, etc. once you've painted all parts some random color. THEN you look up CSS properties to change them to look the way they should. Work in baby steps! Do not even think of using interactive : hover type things until the end. o Selecting the right tags can be a puzzle. Pick something easy to see like background-color:red; o Try out selectors until you turn the colors of what you want to select. Start with BODY {background-color:red;}. o See Firefox's Inspector does CSS too! o You'll be best off with Firefox's CSS file editor o Changes in the Inspector connected to your CSS file will automatically change in your CSS file, all you have to do is click save. 2. What is alpha? 3. Remove built-in HTML CSS appearances first. For example, the list numbering or bullets needs to be turned off. Firefox's tool to find this quickly HTML tags convey MEANING but they all have built-in CSS appearances you often need to change, never choose an HTML tag solely for it's appearance! You pick HTML tags for the best purpose for structuring content - you use CSS to make it look the way you want even if that means replacing the default look of the tags. CSS Menus are most often done using outlines. Advanced students: Definition List tags are arguably better suited but less known... use those instead of outline tags. Then decide if you agree or not. 4. display:inline-block; This is an incredibly useful CSS property! It makes any tag work like an image box: it acts like a block with borders margins etc but instead of taking up 100% width like all blocks do (think paragraphs headings etc) it flows with the text at the minimum or set width as if it were an image or a really big emjoi character. 5. Style the coloring of most of it without much concern about placement; The menu behavior is MOST the $$$ on this. Use the Firefox Dev Tools. 6. Do not get stuck on trying to get the centering with the left/right placement of the menus, that is an intentionally challenging part. Move on to more rewarding parts and come back to the harder bits. 7. margin/padding and positioning. Never do hover or active or focus CSS selectors until the end (it just wastes tons of development time. think about it.... then realize you probably won't fully appreciate this advice unless you learn it the hard way.) 8. Obviously there are lecture materials to review