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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
- 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:
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:
Combine the code of HTML and CSS: This is the final code that is the combination of the above two sections.