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.

• Home
• About
• Services
• Contact

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.

• Home
• About
• Services
• Contact

<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 Tweet