Ad Code

Ticker

6/recent/ticker-posts

How to make a Hover Slide navigation bar | Must watch | Easy tutorial | Abhicoder

Abhinav Mishra July 11, 2021

       Hey guys! In this video, I will show you that 'How you can create a hover slide navbar for your website, using HTML, and CSS only!! This the most used navigation bar used in lots of websites nowadays. Even you can also use it on your website to make your website look attractive and user-friendly! You can also use it on your Blogger website. So let's see how it is made.

The Hover slide Navigation bar

The image of the Navigation bar is at 👆 and the video 👇

[youtube https://www.youtube.com/watch?v=duhzC8nMQfI]


So, now let's see its process

Process of creating 

first open 'Visual Studio Code' or any code editor you want. then create a file named 'Index.html' and 'style.css'. Then Paste the HTML code in the 'Index.html' file and the CSS code in the 'style.css' file. Then just RUN it! In Blogger, just pastes the code by going to edit with HTML.


HTML code:-

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/
font-awesome/4.7.0/css/font-awesome.min.css" 
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3S
l0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Hover slide navbar | ABHICODER</title>
</head>
<body>
    <div class="navigation">
        <ul>
            <li>
                <a href="#">
                <span class="icon"><i class="fa fa-home" 
aria-hidden="true"></i></span>
                <span class="title">Dashboard</span>
                </a>
            </li>
            <li>
                <a href="#">
                <span class="icon"><i class="fa fa-lock" 
aria-hidden="true"></i></span>
                <span class="title">Password</span>
                </a>
            </li>
            <li>
                <a href="#">
                <span class="icon"><i class="fa fa-phone" 
aria-hidden="true"></i></span>
                <span class="title">Contact</span>
                </a>
            </li>
            <li>
                <a href="#">
                <span class="icon"><i class="fa fa-comments" 
aria-hidden="true"></i></span>
                <span class="title">Messages</span>
                </a>
            </li>
            <li>
                <a href="#">
                <span class="icon"><i class="fa fa-cogs" 
aria-hidden="true"></i></span>
                <span class="title">Settings</span>
                </a>
            </li>
            <li>
                <a href="#">
                <span class="icon"><i class="fa fa-sign-out" 
aria-hidden="true"></i></span>
                <span class="title">Sign-out</span>
                </a>
            </li>
        </ul>
    </div>

</body>
</html>


CSS code:-

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@500&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    min-height: 100vh;
    background: #150019;


}

.navigation{
    position: fixed;
    width: 60px;
    height: 100%;
    background: #3e0748;
    transition: 0.5s;
    overflow: hidden;

}
.navigation:hover{
    width: 300px;
}



.navigation ul{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
}


.navigation ul li{
    position: relative;
    width: 100%;
    list-style: none;

}

.navigation ul li:hover{
    background: #ea1d63;
}


.navigation ul li a{
    position: relative;
    display: block;
    width: 100%;
    display: flex;
    text-decoration: none;
    color: #fff;
}


.navigation ul li a .icon{
    position: relative;
    display: block;
    min-width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.navigation ul li a .icon .fa{
    font-size: 24px;

}
.navigation ul li a .title{
    position: relative;
    display: block;
    padding: 0 10px;
    height: 60px;
    line-height: 60px;
    text-align: start;
    white-space: nowrap;
}


Explanation

So In the Html, I have Import the font awesome icon CDN using the 'href' property, So that we can use the icon online. NOTE:- it will not work offline as this is the CDN. And CDN means online access to the icon only! To use it offline you need to install it's library. If you want you can go to 'Fontawesome icon 4.7' and add or change the icon. Well that's another topic, let's come to our program. Then we have '

    ' class. Inside the '
      ' there are several '
    • ' You can add more according to your needs. In every '
    • ', I have given The '' class to icon so that it will help help us in CSS. Inside of the '' I have given a '' class for icon.

      So, That's it! for today's post. see you in the next post! And If you like this video then please leave a like. And if you are new to my channel, please click on SUBSCRIBE button and turn it to SUBSCRIBED! Please help me reach 1000 subscribers to keep me motivated to bring such Amazing content!



      Keep visiting!


      Goodbye!

      (adsbygoogle = window.adsbygoogle || []).push({});

Post a Comment

0 Comments

Ad Code