Vertical List: Navigation Menu: CSS Web Design Tutorial Part 32

vertical list navigation menu

Creating A Vertical List Navigation Menu

In this lesson, we will create a vertical list navigation menu from start to finish. To make a vertical list, we need to start with some very basic Html. We will use the ul element to create a link list, and in our CSS code, we will remove the unwanted styles, margin, and padding that come with the unordered list by default. See the images below.

index.html Example 1: CREATING A LINK LIST WITH THE UL ELEMENT

vertical list navigation menu html

my-styles.css Example 1: CREATING A LINK LIST WITH THE UL ELEMENT

vertical list navigation menu css

Displayed Page Example 1

vertical navigation menu displayed

index.html = We add a unordered list with anchor (link) elements inside of each li element. The a elements have href ATTRIBUTES of #home, #news, etc. These attributes with the #name are there to allow us to see certain effects on our links. Because we don’t actually have all of these pages created, we cannot give an address to link to. So we use the #name for now. This would be replaced with an actual link later on. For example, the News button would have an href attribute of “news.html”. To learn more about hyperlinks and bookmark links click here: HYPERLINKS.

my-styles.css = We create a CSS rule with a selector of ul. This rule takes away the bullets from our unordered list with the list-style-type: none; declaration. The default MARGIN AND PADDING that is added by the browser is removed with the next two declarations. Let’s style our vertical list menu by targeting the a elements that are NESTED inside of the li elements. See the images below.

my-styles.css Example 2: ADDING STYLE TO OUR VERTICAL LIST

vertical navigation menu css

Displayed Page Example 2

vertical navigation menu displayed

ul = We add three more declarations to our ul rule. First, we specify a width of 200px because we are going to display our a elements in block format. If you remember, from the BLOCK FORMAT lesson, a block element will take up the entire width of the screen. Second, we add a light orange background COLOR for the entire ul element, which is essentially our horizontal list menu. Third, we create a 1 pixel, solid black BORDER around the ul element.

li a = This CSS rule targets a elements that are children of li elements.

display: block; The first declaration makes our a elements display in block format. This does a few things. It makes the entire text area clickable instead of just the text, and it allows us to specify the width, margin, padding, height, etc.

color: #000; Sets the color of the text black.

padding: 10px 15px; Gives padding space of 10 pixels on the top and bottom and 15 pixels on the left and right between the text and the border.

text-decoration: none; Removes the default underline that is added to anchor elements.

li = We target and style list items with this rule.

text-align: center; Centers our link text inside of our list items (buttons).

border-bottom: 1px solid #000; Adds a 1 pixel, solid black border to the bottom of all of our list item. This gives our vertical list navigation menu a button look.

li:last-child = This CSS rule targets list item. A pseudo-class of last-child it added on to specifically affect the last child list item, which is our last button “About”.

border-bottom: none; Removes the bottom border from the About button. We take away this border line because the entire ul element already has a border. This prevents the About button from having a 2-pixel thick bottom border line because we are removing one of the 1-pixel lines.

Looking at the Displayed Page Example 3 image, our vertical menu is looking pretty good. We will now add some color changing hover effects to our buttons. Refer to the images below.

my-styles.css Example 3: ADDING COLOR CHANGING HOVER EFFECTS

vertical menu css

Displayed Page Example 3

vertical list menu displayed with hover effect

li a:hover = This CSS rule targets the anchor elements that are children of li elements. A pseudo-class of hover is added on. Pseudo-classes target specific states of an element. In this case, we want the styles that we declare in this rule to display when the element is hovered over with the mouse pointer. To learn more about pseudo-classes, click here: PSEUDO-CLASSES.

background-color: #f6a014; Changes the background color of the list item (button) to a darker shade of orange when hovered over.

color: #fff; Changes the color of the list item text (button text) to white when hovered over.

Displayed Page Example 3 shows the color changing hover effect on the Contact button. That finishes up the vertical menu lesson. You can play around with different COLORS, HOVER EFFECTS, POSITIONING, and even the shape of your vertical menu. Try using the BORDER-RADIUS property to create a rounded corner menu. You are only limited to your imagination. Thanks for reading, we’ll see you in the next lesson.

index.html Source Code


<!doctype html>
<html>
<head>
<title>Vertical List Navigation Menu</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#store">Store</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

my-styles.css Source Code


ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f4b914;
border: 1px solid #000;
}

li a {
display: block;
color: #000;
padding: 10px 15px;
text-decoration: none;
}

li {
text-align: center;
border-bottom: 1px solid #000;
}

li:last-child {
border-bottom: none;
}

li a:hover {
background-color: #f6a014;
color: #fff;
}

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: