Navigation menus are a crucial element of web design as they help users navigate through the website easily.
A fixed side navigation menu stays in the same position even when the user scrolls down the page.
This feature makes it easier for the user to access the menu without having to scroll back to the top of the page.
In this tutorial, we will learn how to create a fixed side navigation menu using CSS.
HTML Structure
To create a fixed side navigation menu, we need to first create a basic HTML structure for our menu.
We will use an unordered list to create the menu items and wrap it in a div element with a class name “navigation”.
<div class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
CSS Styles
Once we have our HTML structure in place, we can now add CSS styles to create the fixed side navigation menu.
To fix the navigation menu to the side of the page, we can use the “position:fixed” property.
.navigation {
width: 200px;
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
}The above CSS code will fix the navigation menu to the left side of the page and center it vertically. We have also set the width of the navigation menu to 200px.
You can adjust the width as per your needs.
Making the Menu Items Horizontal
By default, the menu items in an unordered list are displayed vertically.
To display them horizontally, we can use the “display:inline-block” property.
.navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.navigation li {
display: inline-block;
width: 100%;
text-align: center;
padding: 10px 0;
background-color: #333;
color: #fff;
}The above CSS code will make the menu items horizontal and add a background color of #333 and text color of #fff to each item.
Styling the Menu Items
We can further style the menu items by adding styles to the anchor elements.
.navigation a {
display: block;
color: #fff;
text-decoration: none;
}
.navigation a:hover {
background-color: #444;
}The above CSS code will change the background color of a menu item to #444 when the user hovers over it.
Conclusion
In this blog post, we learned how to create a fixed side navigation menu using CSS.
We started by creating a basic HTML structure for our menu and then added CSS styles to fix the menu to the side of the page and make the menu items horizontal.
Finally, we added some styles to the menu items to make them look attractive.
With these simple steps, you can easily create a fixed side navigation menu for your website.
