In the resources folder, there’s an HTML file called “menu.html”. Open this up in your text editor and look at it: it’s a simple list of movie reviews and book reviews. For a review site, it would be nice to let visitors navigate around our recent reviews.
- Unique identifiers
- Add an “id” attribute to the top-most tag, a UL tag.
- Display types
- There are three basic kinds of elements, as far as style sheets are concerned: block, inline, and list-item. Block elements are elements such as paragraphs, headlines, and div. Elements that are what in a word processor we’d call character-level styles, are inline elements. You can use the display property to change an element from one to another. You can also use the display property to hide an element, by settings its display to “none”.
- List style types
- So let’s make this menu look a little nicer before we put it at the top of the page.
- Precise positioning: Width
- If we want to position this menu on the side of the page, it can’t have a width that goes all the way across the page.
- Position: absolute
- In order to position elements, we need to say what kind of positioning we’re using. In this case, the positioning will be absolute. And then, we need to align the element relative to its top, its left, its bottom and/or its right.
- Position: relative
- Currently, the menu is positioned relative to the browser window. The way that positioning directives work is that they are relative to the nearest parent that also has positioning other than static, which is the default that all elements have.
- Display on hover
- Don’t forget about that review quote we hid earlier. Now that we know both hover and position, we can make the quote paragraph show up when a visitor hovers over one of the review links. We have the space for it on the left.
