Create a Hoverable Side Navigation with HTML, CSS and JavaScript Last Updated : 26 Jul, 2024 Comments Improve Suggest changes Like Article Like Report To create hoverable side navigation with icon on any website there is a need for two things HTML and CSS. If you want to attach the icons on the navigation bar then you need a font-awesome CDN link. These features make the website looks cool than a normal website where the nav-bar is old-school design. In this article, we will create the structure of the side with the side nav bar that will be Creating Structure section and the other section for designing the website i.e. Designing Structure. Below is the output of the complete code. Creating Structure: In this section, we are creating the basic website structure and also attach the CDN link of the Font-Awesome for the icons which will be used as a hover nav bar icon.  CDN links for the Icons from the Font Awesome:  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">HTML code to make the structure:  html <!DOCTYPE html> <html> <head> <title> Hoverable Side Navigation with Icon </title> </head> <body> <!-- Geeksforgeeks and Slogan --> <div class="banner"> <h1>GeeksforGeeks</h1> <p> A Online Computer Science Portal for Geeks </p> </div> <!-- Body content topic --> <div class="hoverable-topic"> <h3>Hoverable Side Navigation with Icon</h3> <p> There are many kind of sidebar, hoverable sidebars are on them and quite popular. You can easily create hoverable sidebar by using the HTML and CSS only. To add extra features may you need to add some jQuery. But that totally depends on your requirements. </p> </div> <!-- Side navigation Bar --> <div class="sidehoverbar"> <a href="#" class="article"> Write an Article <i class="fa fa-edit"></i> </a> <a href="#" class="Interview"> Interview Experience <i class="fa fa-file-o"></i> </a> <a href="#" class="Scripter"> Technical Scripter <i class="fa fa-commenting"></i> </a> <a href="#" class="Suggested"> Suggested Topic <i class="fa fa-plus"></i> </a> <a href="#" class="Practice"> Coding Practice <i class="fa fa-laptop"></i> </a> </div> </body> </html> Designing the Structure: In the previous section, we have created the structure of the basic website where we are going to use hoverable Side Navigation with the icon. In this section, we will design the structure and attach the icons for each navbar.CSS code to look good the structure:  html <style> /* Head banner team */ .banner { text-align: center; width: ; } h1 { color: green; } /* styling sidebar */ .sidehoverbar a { background-color: grey; position: absolute; font-size: 22px; text-decoration: none; Color: white; padding: 10px; border-radius: 0px 25px 25px 0px; left: -190px; transition: 0.5s; opacity: 0.5; } /* Hover effect on sidebar */ .sidehoverbar a:hover { left: 0px; opacity: 1; background-color: #4CAF50; } /* float icons*/ .sidehoverbar i { float: right; } /* defining position of each nav bar */ .article { top: 50px; width: 210px; height: 30px; } .Interview { top: 110px; width: 210px; height: 30px; } .Scripter { top: 170px; width: 210px; height: 30px; } .Suggested { top: 230px; width: 210px; height: 30px; } .Practice { top: 290px; width: 210px; height: 30px; } /* content margin */ .hoverable-topic { margin-left: 55px; } </style> Combine the code of HTML and CSS: This is the final code that is the combination of the above two sections.  html <!DOCTYPE html> <html> <head> <title>Hoverable Side Navigation with Icon</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> /* Head banner team */ .banner { text-align: center; width: ; } h1 { color: green; } /* styling sidebar */ .sidehoverbar a { background-color: grey; position: absolute; font-size: 22px; text-decoration: none; Color: white; padding: 10px; border-radius: 0px 25px 25px 0px; left: -190px; transition: 0.5s; opacity: 0.5; } /* Hover effect on sidebar */ .sidehoverbar a:hover { left: 0px; opacity: 1; background-color: #4CAF50; } /* float icons*/ .sidehoverbar i { float: right; } /* defining position of each nav bar */ .article { top: 50px; width: 210px; height: 30px; } .Interview { top: 110px; width: 210px; height: 30px; } .Scripter { top: 170px; width: 210px; height: 30px; } .Suggested { top: 230px; width: 210px; height: 30px; } .Practice { top: 290px; width: 210px; height: 30px; } /* content margin */ .hoverable-topic { margin-left: 55px; } </style> </head> <body> <!-- Geeksforgeeks and Slogan --> <div class="banner"> <h1>GeeksforGeeks</h1> <p> A Online Computer Science Portal for Geeks </p> </div> <!-- Body content topic --> <div class="hoverable-topic"> <h3>Hoverable Side Navigation with Icon</h3> <p> There are many kind of sidebar, hoverable sidebars are on them and quite popular. You can easily create hoverable sidebar by using the HTML and CSS only. To add extra features may you need to add some jQuery. But that totally depends on your requirements. </p> </div> <!-- Side navigation Bar --> <div class="sidehoverbar"> <a href="#" class="article"> Write an Article <i class="fa fa-edit"></i> </a> <a href="#" class="Interview"> Interview Experience <i class="fa fa-file-o"></i> </a> <a href="#" class="Scripter"> Technical Scripter <i class="fa fa-commenting"></i> </a> <a href="#" class="Suggested"> Suggested Topic <i class="fa fa-plus"></i> </a> <a href="#" class="Practice"> Coding Practice <i class="fa fa-laptop"></i> </a> </div> </body> </html> Output:  Comment More infoAdvertise with us Next Article Create a Hoverable Side Navigation with HTML, CSS and JavaScript S Sabya_Samadder Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Projects Similar Reads How to create a revealing sidebar using HTML CSS and JavaScript? A revealing sidebar is a hidden UI element that becomes visible upon user interaction, such as clicking or swiping, providing navigation links. The content of the page will rotate and the navigation bar will reveal itself when the menu button is clicked. ApproachCreate an HTML file with headings and 3 min read How to create a Landing page using HTML CSS and JavaScript ? A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v 7 min read How to create a Responsive Bottom Navigation Menu with CSS and JavaScript. A responsive bottom navigation menu provides mobile-friendly access to important links. We will see how to create a responsive bottom navigation menu that adjusts to different screen widths. The menu will include elements like Home, Contact, and About. When viewed on a smaller screen, a hamburger me 2 min read How to Create a Portfolio Website using HTML CSS and JavaScript ? A portfolio website is a website that represents you online on the web pages. It contains different sections like Introduction to Yourself, About You, Your Services, Your Contact Details, and Your Portfolio. We are going to build all of the sections with an interactive and attractive web design that 15+ min read Slide Down a Navigation Bar on Scroll using HTML, CSS and JavaScript To create a slide down navigation bar you need to use HTML, CSS, and JavaScript. HTML will make the structure of the body, CSS will make it looks good. This kind of sliding navbar looks attractive on a site. By using JavaScript you can easily make the navigation bar slideable when the user scrolls d 4 min read Create A Responsive Navbar with Icons using HTML CSS and JavaScript The navigation bar, or Navbar is an essential component in modern web design. It allows users to navigate through a website easily. Adding icons to the navbar is not only enhances visual appeal but also improves user experience. The Responsive Navigation bar means the Navbar elements are visible on 2 min read Create a Mobile Toggle Navigation Menu using HTML, CSS and JavaScript To create a Mobile Toggle Navigation Menu you need HTML, CSS, and JavaScript. If you want to attach the icons with the menu then you need a font-awesome CDN link. This article is divided into two sections: Creating Structure and Designing Structure.A glimpse of complete Navigation: Creating Structur 3 min read How to Create a Responsive Top Navigation Menu with CSS & JavaScript? Top navigation menus offer users immediate access to key sections of a website. A responsive top navigation menu enhances user experience because if our website is fully responsive then it can be accessible by any device like PC, mobile, or tab. PreviewApproachFirst, create a basic HTML structure fo 5 min read How to Change Tabs on Hover with CSS and JavaScript ? In this article, we are going to learn how can we change tabs on hover, with CSS and JavaScript. Changing tabs on hover enhances the user experience by offering interactive hover navigation. Users can quickly preview different sections without clicking which reduces the time it takes to explore diff 4 min read How to Create Full Screen Overlay Navigation Bar using HTML CSS and JavaScript ? Create a full screen Navigation Bar: In this article, you will learn how to create a full-screen navbar for your website. There are three methods to create a full screen overlay navigation bar which are listed below: From Left From top No animation- Just show You will be required to create two divs. 4 min read Like