css navigation

Customizing Different Menus in CSS

With CSS you can transform boring HTML menus into good-looking navigation bars.

Vertical Navbar

	<ul>
	<li><a href="#" class="active">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Contact</a></li>
	</ul>

Lets remove the bullets first.

	ul li{
	list-style-type: none;
}

To build a vertical navigation bar, you can style the <a> elements inside the list after specifying width for the entire ul.

ul{
	width: 300px;
}

ul li a{
display: block; 
background: #d7d7d7; 
padding: 10px; 
margin-bottom: 1px; 
color: #333;
}

ul li a.active{
color: #fff; 
background: #000;
}

ul li:hover a{
color: #fff;
background: #000;
}

Displaying the links as block elements makes the whole link area clickable. Class active is added to let the users know the page on which they are currently.

Horizontal Navigation Bar

We can use two methods to create a horizontal navbar. They are

Display list items as inline-block.

Floating the list items.

<ul>
	<li><a href="#" class="active">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Contact</a></li>
</ul>	

Fixed Navbar

Make the navbar fixed at the top or the bottom of the page even when the user scrolls the page. Add css property position: fixed along with width: 100% and top or bottom: 0 to keep it aligned right at the top or bottom.

	ul{
	position: fixed;
	width: 100%;
	top: 0;
}

0 Like 0 Dislike 0 Comment Share

Leave a comment