In modern web design, navigation bars play a crucial role in guiding users through a website. A well-designed navigation bar can enhance the user experience by providing clear and intuitive navigation options.
Icons have become an increasingly popular choice for navigation menus due to their ability to convey meaning quickly and effectively. By combining icons with hover effects, we can create an interactive and engaging navigation bar that encourages users to explore the website.
In this tutorial, we will explore how to create a modern navigation bar with icons using HTML, CSS, and hover effects.
What is Navigation Bar?
The navigation bar is a UI element in the website that contains links to other sections of the same website or other websites. In maximum websites, the navigation bar is displayed on almost every page of the website but this can differ.
In most of websites, the navigation bar is mostly displayed as a horizontal list of links (link to different parts of the website) at the top of every page styled in such a way that it perfectly fits into the website design.
The navigation bar contains the website logo and other navigation options and a search bar too.
Although in most cases, the navigation bar is placed horizontally at the start of the webpage(on top), in some cases, a horizontal navigation bar may not fit the website design, so in this type of case we create a vertical navigation bar on the left side or right side of the website. This type of vertical navigation bar is also called a sidebar, as it appears on the side of the main content. Some websites have both a horizontal navigation bar at the top and a vertical navigation bar on the left or right side of each website.
Many other websites use a horizontal navigation bar for the desktop view and a vertical navigation bar for the mobile view of their websites.
In this tutorial, we will learn how to create a simple Horizontal Navigation Bar for any website in a few simple steps by just using HTML, CSS, and some hover effects.
Step 1: Creating the Folder
Create a new folder in your computer and name it something like "Navbar"
In the "Navbar" folder we will save our HTML and CSS files which are required in our project to create a navigation bar and style the navigation bar. After creating the "Navbar" folder, open any text editor(we are using Brackets) to create HTML and CSS files.
Step 2: Creating the required files
Create 2 new files in the text editor and name nav.html and nav.css, then save them in the "Navbar" folder
Step 3: Writing the Basic Structure
Next, we will create the basic structure of the Navigation bar using HTML and link the nav.css file
<link rel="stylesheet" type="text/css" href="nav.css">
Step 4: Writing the HTML Code
Here is the HTML code for the modern navigation bar:
<!doctype html>
<head>
<title>Navigation Bar with different Icons</title>
<!-- change or write your page title with the help of title tags-->
<link rel="stylesheet" type="text/css" href="nav.css">
<!-- connect css file with html useing link tag -->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- link this font-awesome icon css link with html file for accessing all fornt awesome
icon form boostrapcdn.com -->
</head>
<body>
<ul>
<!--starting ul tag to create unordered lists.-->
<li>
<!--The HTML li element is used to represent an item in a list. ... In menus and unordered lists-->
<!--the a tag defines a hyperlink, which is used to link from one page to another-->
<a href="#">
<!-- this anchor text for link your home to another page -->
<div class="icon">
<i class="fa fa-home" aria-hidden="true"></i><!-- this is home icon link get form fornt-awesome icon for home button -->
<i class="fa fa-home" aria-hidden="true"></i><!-- copy and paste the home icon link here for hover effect -->
</div>
<div class="name"><span data-text="Home">Home</span></div>
<!-- we are create first menu item name home -->
</a>
</li>
<li>
<a href="#">
<!-- this anchor text for link your About page to another page -->
<div class="icon">
<i class="fa fa-file" aria-hidden="true"></i><!-- this is file icon link get form fornt-awesome icon for about -->
<i class="fa fa-file" aria-hidden="true"></i><!-- copy and paste the file icon link here for hover effect -->
</div>
<div class="name"><span data-text="About">About</span></div>
<!-- we are create second menu item name About -->
</a>
</li>
<li>
<a href="#">
<!-- this anchor text for link your service page to another page -->
<div class="icon">
<i class="fa fa-cogs" aria-hidden="true"></i><!-- this is cogs icon link get form fornt-awesome iocn for service menu -->
<i class="fa fa-cogs" aria-hidden="true"></i><!-- copy and paste the cogs icon link here for hover effect -->
</div>
<div class="name"><span data-text="Services">Services</span></div>
<!--- we are create third menu item name services -->
</a>
</li>
<li>
<a href="#">
<!-- this anchor text for link your portfolio page to another page -->
<div class="icon">
<i class="fa fa-picture-o" aria-hidden="true"></i><!-- this is picture icon link get form fornt-awesome icon for portfolio -->
<i class="fa fa-picture-o" aria-hidden="true"></i><!-- copy and paste the picture icon link here for hover effect -->
</div>
<div class="name" ><span data-text="Portfolio">Portfolio</span></div>
<!-- we are create fourth menu item name portfolio -->
</a>
</li>
<li>
<a href="#">
<!-- this anchor text for link your team page to another page -->
<div class="icon">
<i class="fa fa-users" aria-hidden="true"></i><!-- this is picture icon link get form fornt-awesome icon for portfolio -->
<i class="fa fa-users" aria-hidden="true"></i><!-- copy and paste the home icon link here for hover effect -->
</div>
<div class="name"><span data-text="Team">Team</span></div>
<!-- we create first menu item name home -->
</a>
</li>
<li>
<a href="#">
<!-- this anchor text for link your home to another page -->
<div class="icon">
<i class="fa fa-envelope" aria-hidden="true"></i><!-- this is picture icon link get form fornt-awesome icon for portfolio -->
<i class="fa fa-envelope" aria-hidden="true"></i><!-- copy and paste the home icon link here for hover effect -->
</div>
<div class="name"><span data-text="Contact">Contact</span></div>
<!-- we create first menu item name home -->
</a>
</li>
<li>
<a href="#">
<!-- this anchor text for link your Blog page to another page -->
<div class="icon">
<i class="fa fa-book" aria-hidden="true"></i><!-- this is Book icon link get form fornt-awesome icon for Blog -->
<i class="fa fa-book" aria-hidden="true"></i><!-- copy and paste the Book icon link here for hover effect -->
</div>
<div class="name"><span data-text="Blog">Blog</span></div>
<!-- we are create seventh menu item name Blog -->
</a>
</li>
<li>
<a href="#">
<!-- this anchor text for link your cart page to another page -->
<div class="icon">
<i class="fa fa-cart-arrow-down" aria-hidden="true"></i><!-- this is cart icon link get form fornt-awesome icon for cart -->
<i class="fa fa-cart-arrow-down" aria-hidden="true"></i><!-- copy and paste the cart icon link here for hover effect -->
</div>
<div class="name"><span data-text="Cart">Cart</span></div>
<!-- we are create eight menu item name Cart -->
</a>
</li>
<li>
<a href="#">
<!-- this anchor text for link your Price page to another page -->
<div class="icon">
<i class="fa fa-usd" aria-hidden="true"></i><!-- this is usd icon link get form fornt-awesome iocn for Price -->
<i class="fa fa-usd" aria-hidden="true"></i><!-- copy and paste the usd icon link here for hover effect -->
</div>
<div class="name"><span data-text="Price">Price</span></div>
<!-- we are create nineth menu item name Price -->
</a>
</li>
<li>
<a href="#">
<!-- this anchor text for link your login page to another page -->
<div class="icon">
<i class="fa fa-sign-in" aria-hidden="true"></i><!-- this is sign in icon link get form fornt-awesome icon for Login -->
<i class="fa fa-sign-in" aria-hidden="true"></i><!-- copy and paste the sign in icon link here for hover effect -->
</div>
<div class="name"><span data-text="Login">Login</span></div>
<!-- we are create tenth menu item name login panel -->
</a>
</li>
</ul>
</body>
</html>
Step 5: Applying CSS to the HTML
Next, we will complete our CSS file code to apply the style of the HTML and make it more attractive and beautiful.
/* Add a sky blue background color to the body background */
body{
margin: 0;
padding: 0;
font-family: sans-serif;/* we can change font style by using the font-familiy css tag */
background: aqua;/* you can change the background color of body using background css tag */
}
ul{
position:absolute;/* set the position of the navigation bar*/
top: 8%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
padding: 20px 0; /* Adding some padding */
background: #fff; /* Add a white background color to the top navigation */
display: flex; /* flex Set navigation bar horizontally using the display tag*/
border-radius: 10px; /* add the border radius */
box-shadow: 0 10px 30px rgba(0,0,0,.3)
}
/* Style the links inside the navigation bar */
ul li{
list-style: none;
text-align: center;
display: block;
border-right: 1px solid rgba(0,0,0,0.2);
}
ul li:last-child{
border-right: none;
}
ul li a{
text-decoration: none;
padding: 0 50px;
display: block;
}
/* Style the icon inside the navigation bar */
ul li a .icon{
width: 40px; /* changing the width of the icon */
height: 40px; /* changing the height of the icon */
text-align: center;
overflow: hidden;
margin: 0 auto 10px;
}
/* set the size, height, width of the icon*/
ul li a .icon .fa{
width: 100%;
height: 100%;
line-height: 40px;
font-size: 34px;
transition: 0.5s; /* adding the transition to make it more attractive */
color: #000;
}
/* Change the color of icon on hover */
ul li a .icon .fa:last-child{
color: aqua;
}
/* style the color and transform of the icon on hover */
ul li a:hover .icon .fa{
transform: translateY(-100%); /* translate y to add the hover effect */
}
ul li a .name{
position: relative;
height: 20px;
width: 100%;
display: block;
overflow: hidden;/*make ul li a .name overflow is hidden*/
}
/*style the font size and set transition of the navigation menu*/
ul li a .name span{
display: block;
position: relative;
color: #000;
font-size: 18px; /* changing font size */
line-height: 20px;
transition: 0.5s; /* adding the transition to make it more attractive */
}
/*set and change position, top, width, left, height color of the 'class'.name span:before*/
ul li a .name span:before{
content: attr(data-text);
position: absolute;
top: -100%;
width: 100%;
left: 0;
height: 1005;
color: aqua;
}
/*style hover effect of ul li a .name span */
ul li a:hover .name span{
transform: translateY(20px);
}
Final Output
Here is how the final output will look.
and on hovering over the navigation bar icons, the color will change:
Live Version:
Here is the live version of the code.
Conclusion
Using HTML, CSS, and hover effects to create a contemporary navigation bar with symbols is a fantastic way to improve your website's user experience. Y
ou can build an aesthetically appealing and interactive navigation bar that will lead users through your website with simplicity by following the steps described in this lesson. Remember to try various hover effects to make your menu bar stick out, and think about using responsive design to ensure that it appears fantastic on all platforms.
You can build a navigation bar that not only appears good but also enhances the usability of your website using these methods.
Frequently Asked Questions(FAQs)
1. Can I build my navigation panel using any symbol set?
You can use any symbol collection that contains scalable vector images that are CSS-customizable.
2. Do I need code expertise to build an icon-based navigation bar?
Basic HTML and CSS understanding is needed, but no complex computer training is required.
3. How can I make certain that my menu panel is mobile-friendly?
Use responsive design methods, such as a mobile-first strategy and touchscreen optimization.
4. Can I use symbols to add dropdown options to my navigation bar?
You can use HTML and CSS to add dropdown panels, but make sure they are available and simple to use on all platforms.
Also Read:
