Today’s lab is designed around something I saw in a lot of your mockups: dropdown navigation menus. There aren’t a lot of new ideas here, but application of old ones. So, I won’t talk much.
However, in this lab we start to incorporate a few of the pseudoclass selectors that you met in CSS Diner. Let’s revisit some of those:
<parent> <child>A</child> <child>B</child> </parent>
parent:first-childmight be useful if you have a series of horizontal rectangular buttons, and you want the leftmost one only to have rounded edges on its left side.
<parent> <child>A</child> </parent> <parent> <child>B</child> <child>C</child> </parent>
parent:only-childmight be useful if you have are presenting a list of pairs in a table, with pair in a
trand each name in a
td. Perhaps you want to highlight the individuals still seeking a teammate.
<parent> <child>A</child> <child>B</child> <child>C</child> </parent>
parent:last-childmight be useful if you have an image slideshow with previous and next links. On the last child, you could disable the next link.
<parent> <child>A</child> <child>B</child> <child>C</child> <child>D</child> </parent>
parent:nth-child(2)might be useful if you have a set of tables with headers, and you want to apply a particular style to the first non-header row.
<parent> <child>A</child> <child>B</child> <child>C</child> <child>D</child> <child>E</child> </parent>
parent:nth-child(odd)might be useful if you have a table and you want to apply a style to the odd rows.
<element>A</element> <element>B</element> <element>C</element>
element:first-of-typemight be useful if you have a list of paragraphs, and you want the first to have larger text.
Here’s your TODO list:
See you next time!
First create a
lab17 directory. Add a
partners.html and include your first names and last initials.
spenditures.html (sic) a table displaying a breakdown of the federal budget of the United States. It looks like this:
And it interacts with the viewer like this:
Health 28% Social Security 25.3% Defense 16.2% Remainder 9.1% Veterans 4% Transportation 4% Food and Agriculture 4% Education 3% International Affairs 2% Housing 1% Energy 1% Science 1% Labor 1%
header, place the page’s title. Match the reference as closely as you can, setting colors and tweaking margins and padding as necessary.
nav, add an unordered list of the top-level menu labels. For your mental health, I recommend adding just the
Menu Aitem for the time being. A later checkpoint will ask you to add the subsequent menus. Apply list-wide rules to the
ulthat is a direct child of
nav. Make each
lia member of the
menuclass. Apply list item rules to the
menuclass. Match the reference as closely as you can. Note how the list items are not block elements, as is the default for list items. Include a 1-pixel right border above and to the right of each menu.
menu, color it dark gray and change the cursor to a pointer with this CSS property:
ulto hold that menu’s content: an unordered list of links. Name your links
Link B, and so on. It doesn’t matter where they link to; pick a site of your choosing. Make sure your nested list appears fully inside a menu’s
menu. Recall that for this to work, the parent must be non-statically positioned. Relative positioning will allow a parent to serve as an anchor. The list of links and its parent should be aligned on their left edges. The list should appear below the menu label, so what must
topbe? We don’t know the exact height by which to push the list down, but we can always use a percentage.
box-shadowto the list of links to increase the layering effect. Include enough vertical offset that the shadow can’t be seen at the top. We want the label and the menu to feel “attached,” and a visible shadow between them breaks that illusion.
blocks, which fill their horizontal space, so that the whole rectangular “button” is clickable—not just the text.
block. This is most easily done by using a descendant selector. In this case, you want to apply a style to
uls that are children of a hovered
navand make sure your solution scales. You should haven’t to provide any new CSS rules. Create link lists of different lengths.
navelement altogether when your media query kicks in.
divcontaining just the text
☰—which is the HTML entity for a menu-ish icon. Sometimes this is called the hamburger icon. This icon will act as a popup menu alternative to the navigation bar on small screens.
diva member of the
menuclass so it gets a lot of the same styling as your other menus.
menu, pinning it to the top, right, and bottom of its parent.
menua 1-pixel white border on its left. Override the other borders to not appear.
menuso the hamburger icon has some heft.
navmenus, add to the
divan unordered list of anchor elements. Nesting menus deeply is not a good idea on a small screen or mobile device, so just have these links go to hypothetical pages:
Page B, and so on. Does your menu appear in the right spot? Probably not. The list of links is left-anchored from an earlier step. Undo that by setting
autofor just the list of links in the header.
menuby default, but make it visible when the media query takes effect. You should see only one of the
navand the icon at a time.
Commit and push your work. Verify that all pages have been uploaded by visiting
https://USERNAME.github.io/cs318/lab17 in your browser.
Validate your pages with the W3C Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and push until the validator reports no errors or warnings.