CSS – Vertical and Horizontal Menus

Posted on by tchastkavich

Shape of the Day:

  • Complete last class concept of intro to CSS display property with block inline and inline-block values
  • Key concepts for Bullets, Links and Menus
  • Creating a Vertical Website Menu
  • Creating a Horizontal Website Menu

Website of the Day:

https://www.instructables.com/halloween/ – Instructables is a website for creating and building things – but here’s the halloween themed page!

1. Remind yourself with what you did last lesson – CSS Display

  • Click here if you haven’t finished the previous lesson.

2. Here are some key concepts

  • Menus are made of bullets (listed items) and links (to click) so CSS is required to change their default styles.
  • Bullets are block elements while links are inline elements thus we need to change the display (to either block, inline, or inline-block) in order to make them line up vertically or horizontally, depending on the type of menu you would like.
  • Adding borders, padding, and background colors give it more style.

3. Creating a Vertical Website Menu

  • Website menus are simply lists (<ul> and <li>) of links (<a>).
  • Look at these examples here
  • Create a new webpage by adding opening and closing html, head, title, style, and body tags. Call this file cssdisplay2.html
  • Add some list items (aka bullets) that say Home, About, and Contact to build the first menu.
  • Get rid of the bullet circles by using list-style-type: none;  to the ul selector.
  • Give the following style to your ul: Gray background, 0 pixel padding, 0 pixel margin and a solid navy 1 pixel border. Why is it taking up the whole page? (are bullets block or inline elements?). What CSS property can you use to change this issue? Think about size. You can use 10% if you like.
  • Add line-height: 150%; to allow the menu to be more readable.
  • Add links to the menu around Home, About and Contact – for now you can make them link to different links on my website. Just use the links at the top and make sure each one goes to a different page.
  • What type of selector do we have to add to our CSS to style the list items (Home, Contact, About)? What about the links inside of the list items? You can combine two selectors if needed!
  • Add padding: 8px 16px; and color: #000000; to selectors li and a. What does this change? What does the added padding do? The box drawings will help to see it.
  • To get rid of the underlining links in the menu, what CSS property do we use to add or remove the underline?
  • Add another link to the outside of the menu to the web page. Will it be underlined? Why yes or why no?
  • Change the display of li a because links are inline elements  and they are being used inside of the list items. Which value will you change the display to, block or inline?
  • Now some style to the li element is needed. Add li to your style sheet and center the text, add a border only on the bottom.
  • TRICKY: Try fixing the double border between the list items
  • TRICKY x2: Highlight the menu items as the mouse rolls over them. Use a pesuedo-class similar to a:hover. Once you’ve targeted it correctly, change the background color or add a text shadow.

4. Creating a Horizontal Website Menu

  • Try commenting out all of your style tags, so you can add new style tags below to keep all the previously used CSS. Comment out the other link that was added to the HTML – also add HTML comments to label the CSS as horizontal and vertical menus.
  • Add ul to the style sheet – remove the bullets, 0 margin, 0 padding, align the text, and give the background colour a light blue.
  • Add li to the style sheet and change the display from block to inline (why do we need to do this?)
  • Add padding: 8px 16px; under li and line-height: 40px; and height: 40px;
  • Time to style the links inside the menu – add a to the style sheet below li. Add text-decoration: none; to remove the underline. Add padding: 10px;. Add display:inline-block; to the links in order to have them line up next to each other while also styling them to ensure they look like a menu.
  • Lastly, change the background color on hover.
  • Take another look at these examples and note the several ways to create different vertical and horizontal website menus. Try some of those examples and play with them – they go beyond the basic stuff you just did here.
  • Now try making a drop down menu using the instructions/example here.