Today’s Goal:

• Use CSS display values block, inline, and inline-block to create horizontal and vertical webpage menus

 Today’s Featured Site:

• https://sidewaysdictionary.com/– This dictionary explains technology by using analogies.

 Vertical Website Menu

1. Website menus (or navigation bars) are simply lists (ul, li) of links (a).
2. Let’s look at some examples here
3. Links are inline elements and list items are block elements. We need to know this so we can style them and use the display property to help us create a vertical or horizontal menu. What’s a block element again? How about inline?
4. Let’s start a new webpage by adding opening and closing html, head, title, style, and body tags.
5. Now add some list items (a.k.a bullets) that say Home, About, and Contact so we can begin building our first menu.
6. Let’s get rid of the bullet circles. Remember how we did that yesterday by using CSS; what was the long-name property we used to style ul?
7. Let’s style our ul further with a background-color, padding, and a border. Why does it take up the whole page (hint- think about whether bullets are block or inline elements)? What CSS property could we use to change this (hint- you’ve used it before and it has to do with size)?
8. What type selector do we have to add to our CSS to begin styling the individual list items (Home, Contact, About)?
9. Let’s add some padding to our li and the same border as ul. That looks weird. Let’s get rid of the border, change the padding to 0px, and add margin: 0px;
10. Now let’s add links to our menu around Home, About, and Contact.
11. We need to get rid of the automatic underlining of the links in the menu. First, how can we select only the links inside of the list items so that our styling is only applied to those links and not to any other link we would add to our page (we are again using a descendant selector)? Second, what is the CSS property we use to add or remove links?
12. Let’s add another link outside of the menu to our webpage. Will it be underlined? Why yes or why no?
13. We have to change the display of li a because links are inline elements and we are using them inside of our list items. What should we change the display to, block or inline?
14. This looks pretty good. One last thing- how can we center the text?
15. Picky detail: let’s fix the double border between list items

 Horizontal Website Menu

1. Let’s comment out our style tags and then add new style tags below (we can keep all CSS this way).and comment out the other link we added to the HTML.
2. Let’s add ul to our style sheet with list-style-type: none; margin: 0px; and padding 0px;
3. Let’s add li to our style sheet and change the display from block to inline (why?)
4. Let’s also add padding: 8px 16px; under li.
5. We need to style the links inside our menu. Add a with curly brackets { } to the style sheet below li. Add text-decoration: none; to remove the underline. Add padding: 20px;. We must add display. Here is where inline-block comes in handy. Adding display: inline-block; to our links means we can have them line up next to each other while also styling them to look like a menu.
6. Finally, let’s add border-right: 1px solid blue; under li. You can also have border-top, border-bottom, and border-left. Very useful!
7. Question: How can we add the same hover color effect that we had with our vertical menu?
8. Questions: How can we get rid of the extra space at the end of our menu? What happens if we get rid of the width? Why?
9. Let’s take another look at these examples. There are several ways to create different vertical and horizontal website menus. These go beyond the basic stuff we just did.
10. Finally, let’s look at how to create a drop-down menu