Good website navigation is an essential website feature. And we’re not just saying that — there’s research to back it up. Roughly 38% of consumers look at a page’s navigational links and layout when looking at a site for the first time.
The importance of navigation can’t be understated. And, it’s understandable why visitors prefer sites that implement website navigation best practices. It can help them quickly and easily find the information they’re looking for, so navigation is a quintessential part of the user experience and your website strategy.
Enjoy this simple snippet that shows the basic structure for the infamous navigation bar.
Code Snippet
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Code Explanation
The list style type for ‘ul’ is set to none to remove the bullet icons, and overflow is set to hidden to clear the float. The background color of the navigation bar is set to a dark shade (#333).
The ‘li’ items are set to float left which helps arrange the items in one line horizontally.
For the ‘li a’, CSS is used to style the anchor links within the navigation bar. The text color is set to white with a decent amount of padding on all sides. Text decoration is also set to ‘none’ to remove any underlines from the links.
In addition to this, a hover effect is added, which changes the background color of a navigation item when the mouse pointer hovers over it. Following these steps will enable you to develop a decent and functional navigation bar for your website.