DEMO LINK
HTML structure:
Creating a vertical navigation can be achieved in various ways.
One common method is using ul and li:
<div id="nav_container">
<ul id="nav">
<li class="nav_item"><a href="#">Item 1</a></li>
<li class="nav_item"><a href="#">Item 2</a></li>
<li class="nav_item"><a href="#">Item 3</a></li>
<li class="nav_item"><a href="#">Item 4</a></li>
</ul>
</div>
It is also common to place a tags inside li.
Styling:
To remove the bullets, you can use list-style-type: none; for the ul.
Different styles on hover can be applied using the :hover selector for interactivity.
.nav_item {
width: 74%;
margin-top: 10px;
}
.nav_item:first-child {margin-top: 0px;}
.nav_item.selected {width: 86%;}
.nav_item a {
display: inline-block;
width: 100%;
line-height: 30px;
padding: 8px 5px 5px 0px;
background-color: yellow;
color: black;
font-weight: bold;
text-decoration: none;
border-radius: 2px 12px 12px 2px;
}
.nav_item.selected a {
background-color: green;
color: white;
font-size: 18px;
}
.nav_item:hover a {background-color: orange;}
To remove the underline from a, use text-decoration: none; and adjust its color as desired.
Javascript (jQuery):
Attaching a clickListener to the items is simple:
$('.nav_item a').on('click', function() {
//$(this) item is clicked, perform necessary actions
$('.nav_item').removeClass('selected');
$(this).parent().addClass('selected');
});
EDIT:
If customization is needed for each navigation item, there are different approaches:
DEMO LINK
You can utilize CSS' nth-child() selector:
.nav_item:nth-child(2):hover a{background-color: #252F1D;}
.nav_item:nth-child(3):hover a{background-color: white;}
In jQuery, you can use the index parameter within a function and possibly incorporate eq if necessary.
$('.nav_item > a').each(function(index) {
if(index == 0) {
//apply different onClick action, CSS rule, etc
}
//repeat for other elements
});
index starts at zero, while nth-child begins from one.