Create a side navigation bar with lists and CSS

In this article we will see how the same HTML code, with different CSS style declarations, allows us to obtain navigation bars of various models. All the models have vertical navigation bars, which are very useful for the sides of the pages. Although if we wish, we have also created some .

We start, as we say, from a very simple HTML:

We have several layers to which we have assigned different classes and identifiers: a main layer called “nav”, where we will put the entire navigation bar. Another call “titulonav” with the title of the bar. Finally another “cuerporec” with the body of the different options of the navigation bar.

Now we will see different definitions of styles to adapt to this same HTML. Each one more difficult than the last.

First CSS style

Let’s see a first CSS style that is very simple.

We can see it in one.

In this example each link comes with a border. With some backgrounds in flat colors that are very simple, but moderately showy.

body{
font-family: verdana, helvetica;
font-weight: bold;
}

#nav{
width: 155px;
}

.titlenav{
border: 1px solid #d7d7d7;
font-size: 8pt;
font-weight: bold;
background-color: #e0e0e0;
colour: #000;
padding: 4px;
}

.bodyec{
margin-top: 0px;
margin-right: 0pt;
margin-bottom: 10px;
margin-left: 0pt;
}

.bodyrec ul{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
}

.bodycli{
border-bottom: 1px solid #d7d7d7;
border-left: 1px solid #d7d7d7;
border-right: 1px solid #d7d7d7;
padding: 1px 0 2px 4px;
font-size: 8pt;
margin-top: 0px;
margin-right: 0pt;
margin-bottom: 0px;
margin-left: 0pt;
background-color: #ffffcc;
}

.bodyec to{
text-decoration: none;
}

Second example of CSS styles

The second example uses the list to display a more common style of list items, but in a custom fashion.

We can see it in one.

body{
font-family: verdana, helvetica;
font-weight: bold;
}

#nav{
width: 155px;
}

.titlenav{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #d7d7d7;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #d7d7d7;
padding-top: 5px;
padding-right: 0pt;
padding-bottom: 5px;
padding-left: 4px;
font-size: 8pt;
font-weight: bold;
background-color: #e8e8e8;
}

.bodyec{
border-width: 1px;
border-style: solid;
border-color: #d7d7d7;
margin-top: 4px;
margin-right: 0pt;
margin-bottom: 10px;
margin-left: 0pt;
}

.bodyrec ul{
margin-top: 5px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 1px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
}

.bodycli{
padding-left: 12px;
font-size: 8pt;
padding-bottom: 2px;
margin-top: 1px;
margin-right: 0pt;
margin-bottom: 1px;
margin-left: 0pt;
background: transparent url(“yellow-square.gif”) 0 2px no-repeat;
}

.bodyec to{
text-decoration: none;
}

Third example of CSS styles for the browser

A third example that is not much more difficult than the previous one, but that significantly alters the visual aspect.

In this case we are going to separate each of the boxes where the links come from and we are going to put a background with an attractive gradient in each element of the list.

We can see it working in a .

body{
font-family: verdana, helvetica;
font-weight: bold;
}

#nav{
width: 155px;
}

.titlenav{
border-width: 1px;
border-style: solid;
border-color: #000000;
font-size: 8pt;
font-weight: bold;
background-color: #999999;
color: #ffffff;
padding: 4px;
}

.bodyec{
margin-top: 4px;
margin-right: 0pt;
margin-bottom: 10px;
margin-left: 0pt;
}

.bodyrec ul{
margin-top: 5px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 1px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
}

.bodycli{
border-width: 1px;
border-style: solid;
border-color: #d7d7d7;
padding: 1px 0 2px 2px;
font-size: 8pt;
padding-bottom: 2px;
margin-top: 2px;
margin-right: 0pt;
margin-bottom: 2px;
margin-left: 0pt;
background-image: url(gray_background.gif);
}

.bodyec to{
text-decoration: none;
}

I hope these different examples of CSS styles to make a navigation bar have inspired readers.