Creating a vertical navigation bar using HTML and CSS is a fairly simple process that can add a professional touch to any website. Here is an outline of how to create a vertical navigation bar using HTML and CSS:
- First, create an HTML file and add a div element with a unique id. This will be the container for your navigation bar.
- Inside the div element, add an unordered list (ul) element. Each list item (li) within the ul element will represent a navigation link.
- For each list item, add an anchor (a) element with a unique href attribute. The href attribute should link to the page that the navigation link represents.
- Add some text to each anchor element to represent the navigation link.
- Next, create a CSS file and add a style rule for the div element with the unique id. Set the display property to “block” and give the div a fixed width and height.
- Add a style rule for the ul element within the div. Set the list-style-type property to “none” to remove the default bullets, and use the margin and padding properties to add some space between the list items.
- Add a style rule for the anchor elements within the ul. Use the display property to set them to “block” so that they span the entire width of the navbar. Use the font-size and color properties to style the text of the anchors.
- Finally, use the hover pseudo-class to add a hover effect to the anchors. This can be done by changing the background-color or text-decoration property when the mouse cursor hovers over a navigation link.
Video Tutorial Of How To Create Vertical Navigation Bar Using HTML And CSS
In the tutorial video for creating a vertical navigation bar using HTML and CSS, if you become bored and want to try out the code for yourself, you can find it below. To create this navigation bar, you will need to create two files: an HTML file and a CSS file.
Start by creating an HTML file and paste the provided code into it. This file will contain the basic structure and content of your website, including the navigation links.
Next, create a CSS file and paste the provided code into it. This file will control the appearance and styling of your website, including the layout and design of the navigation bar. Once you have both of these files set up, you can begin customizing and fine-tuning the appearance of your navigation bar to suit your needs.
You can change the colors, fonts, and layout to create a unique and cohesive look for your website. Don’t forget to save both of these files with the appropriate extensions (.html and .css). With that, you should have a fully functional vertical navigation bar for your website. Happy coding!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<title>Navigation bar</title>
</head>
<body>
<header class="header">
<ul class="icon-menu">
<li class="icon-box">
<i class="fa fa-home" aria-hidden="true"></i>
<a href="#">
<h2>Home</h2>
</a>
</li>
<li class="icon-box">
<i class="fa fa-user" aria-hidden="true"></i>
<a href="#">
<h2>About</h2>
</a>
</li>
<li class="icon-box">
<i class="fa fa-briefcase" aria-hidden="true"></i>
<a href="#">
<h2>Portfolio</h2>
</a>
</li>
<li class="icon-box">
<i class="fa fa-envelope-open" aria-hidden="true"></i>
<a href="#">
<h2>Contact</h2>
</a>
<li class="icon-box">
<i class="fa fa-comments" aria-hidden="true"></i>
<a href="#">
<h2>blog</h2>
</a>
</li>
</ul>
</header>
</body>
</html>
Second, make a CSS record with the name of style.css and glue the given codes in your CSS document. Keep in mind, you’ve to make a record with .css extension.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #111;
}
.header
{
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 200px);
position: relative;
}
.header li
{
margin: 20px 0;
width: 50px;
height: 50px;
background: #2b2a2a;
color: #ddd;
border-radius: 50%;
list-style: none;
display: flex;
align-items: center;
position: relative;
transition: 0.3s;
}
.header li i.fa
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #ddd;
font-size: 19px;
pointer-events: none;
z-index: 2;
}
.header li a
{
display: block;
padding: 0;
width: 50px;
height: 50px;
text-decoration: none;
}
.header li a h2
{
color: #fff;
font-size: 15px;
font-weight: 500;
line-height: 50px;
height: 50px;
padding: 0 25px 0 30px;
position: absolute;
top: 0;
right: 0;
text-transform: uppercase;
transition: 0.3s;
opacity: 0;
z-index: -1;
border-radius: 30px;
}
.header li:hover a h2
{
background: #ffb400;
opacity: 1;
border-radius: 30px 0px 0px 30px;
right: 27px;
}
.header li:hover,
.header li.active
{
background: #ffb400;
}
Thank you for following along with this tutorial. I hope you enjoyed it and found it helpful. Don’t hesitate to reach out if you have any questions or need further assistance.
Click on the following button to download Source Code for Free.
