Today we’re going to create a top navigation menu and side menu in CSS. This is like any website menu that we would see on most websites.

Inline Menu

This is an example of a website menu:

Menu

We can see that the menu is entirely inline and is actually really just an unordered list. Consider the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#menu {
     background-color:#4c4c4c;
     height:30px;
     font-size:30px;
     font-weight:700;
     padding:5px 0px;
}

#menu ul {list-style:none;}

#menu li {
     display:inline;
     padding:0px 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="menu">
     <ul>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
     </ul>
</div>

The CSS is setting the styles for the navigation menu… We have our ID selector #menu that is creating a background of #4c4c4c (grey), a height of 30px, a font size of 30px, a font weight of 700 (in other words, bold), and a padding of 5px that applies to the top and bottom ONLY.

#menu ul is basically saying that all <ul> elements inside of the ID #menu will have a list-style of none.

#menu li is saying that all <li> elements within the ID #menu will be displayed as inline elements (no breaks before or after the element, refer to the Display Property for more information) and will apply a 10px padding to the left and right sides ONLY.

Vertical Menu

A vertical menu is a menu that is, well, vertical.

Side Navigation

Side Menus are easier to make than inline menus. Consider the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

#side-nav {
     background-color:#4c4c4c;
     display:block;
     width:150px;
}

#side-nav ul {
     list-style-image:url("images/bullet.png");
     margin:10px;
}

#side-nav li {
     padding:5px 0px;
     border-bottom:1px solid #3b3b3b;
}

#side-nav.no-border {border:none;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="side-nav">
     <ul>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li class="no-border"><a href="url">Link</a></li>
     </ul>
</div>

So we have our ID selector side-nav that is creating the background color of #4c4c4c (grey), displaying the selector as a block element and a width of 150px. Note: since only the width is defined, we can have an unlimited height.

Next, we have our selector that is saying that all <ul> elements within the side-nav selector will have a list style image of “bullet.png” and will have a 10px margin around all sides.

Finally, we have our selector that is saying all <li> elements within the side-nav selector will have a top and bottom padding of 5px ONLY and a bottom border that is 1px wide, solid, and the color #3b3b3b. There is something interesting, however; there is an additional selector defined that states a border is none which we used on the last <li> element of our vertical menu. This will make the menu look better, or at least more symmetrical.

menu.zip
menu.zip
Size: 4.46 KB