Side Menu Bar with Icon using HTML and CSS [ With Code ]

Blogger Leb
November 20, 2020
1





You may have seen the side menu bar on many web sites to keep the menus neatly arranged. This type of menu bar is very popular and is used on a large number of websites. You can easily create this sidebar using HTML and CSS programming code. I will show you in this article and try to explain how this type of menu bar is created. And how to add such menubars to your project or your website. We are all familiar with the top menu bar but the side menu bar is a menu bar where you can arrange your menus horizontally. This will greatly increase the beauty of your website. The bar that I will show you here is a fixed menubar i.e. some icons can be seen in this menu bar under normal conditions. When you hover the mouse over those icons, the whole bar will open in front of you. Here I have added icons to each menu. As a result, it looks more beautiful and professional.


 I hope you like this side menu bar and from this article, you can better understand how I made it. You can download all the code required to make it from the download button below.


Some special information about this side menu bar


    ➤ I only used HTML and CSS programming code to make it. I have given all the necessary code below.


   ➤ Only icons can be seen in this menu bar under normal conditions. When you hover the mouse over that menu bar, you will see the full menu with the menu icon.


   ➤ Here I have added a lot of menus and with it, I have added the link to my social media account. You can add the link to your social media platform here.


    ➤ It is designed in a completely modern way. As a result, it is fully responsive and works well with any professional device. So you can definitely add it to your blog or website.


 All in all, it is a professional and responsive menu bar. Hope you like it. If you want to make it and learn how to make it, follow the steps below.

Side Menu Bar with Icon using HTML CSS and JavaScript


 

How To Make This Side Menu Bar with the icon

To create one, first, you need to create an HTML file and then a CSS file. Download the required code from above. You add the CSS code to the CSS file. Then you add the HTML code to your HTML file. Of course, you must associate your CSS file with HTML. This way you can make it very easily.

 To add it to a website or blog, you paste the HTML codes into the body tags and the CSS codes into the style tags.

I have completely shown which code I have used for any task to create this side menu bar. I hope you can learn how to make it from the article.


Make Structure


 The following codes have been used to construct the structure of this side menu bar.


<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content=="IE=edge"/>
<meta name="google" value="notranslate"/>
<title>Side Menu</title>

<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">




 body
{
  margin:0px;
  padding:0px;
  font-family: "Open Sans", arial;
  background:url('https://static.tumblr.com/94eb957a00fd03c0c2f7d26decd71578/u1rhacw/osAmyyh1q/tumblr_static_tumblr_static_gaussian_blur_gradient_desktop_1680x943_wallpaper-393751.jpg');
  color:#fff;
  font-weight:300;

}


@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);

Add Menu and link


 I used these HTML and CSS codes to create all the types of menus and links I added to this menu bar. If you want to add a menu of your choice, you can change the following codes.

  
</li>
<li class="darkerlishadow">
<a href="http://startific.com">
<i class="fa fa-clock-o fa-lg"></i>
<span class="nav-text">News</span>
</a>
</li>
  
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-desktop fa-lg">
</i>
<span class="nav-text">Technology</span>
</a>
</li>
  
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-plane fa-lg"></i>
<span class="nav-text">Travel</span>
</a><!--                                                                                                                               /*page-header .sub-menu {display: noneposition: absolute;top: 100%;left: 50%;transform: translateX(-50%padding: 1.5rem 2rem;background: var(--purple-2);page-header .sub-menu li + li {margin-top: 1.2rem;}.page-header .sub-menu apadding: 0.5rem 1rem;white-space: nowrap;}.page-header .has-dropdown {position: relative;}page-header .has-dropdown:hover .sub-menu {isplay: block}.page-header .search {display: flex;*/-->
</li>
  
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-shopping-cart"></i>
 <span class="nav-text">Shopping</span>
</a>
</li>
  
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-microphone fa-lg"></i>
<span class="nav-text">Film & Music</span>
</a>
</li>

<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-flask fa-lg"></i>
<span class="nav-text">Web Tools</span><!--                                                                                                                               /*page-header .sub-menu {display: noneposition: absolute;top: 100%;left: 50%;transform: translateX(-50%padding: 1.5rem 2rem;background: var(--purple-2);page-header .sub-menu li + li {margin-top: 1.2rem;}.page-header .sub-menu apadding: 0.5rem 1rem;white-space: nowrap;}.page-header .has-dropdown {position: relative;}page-header .has-dropdown:hover .sub-menu {isplay: block}.page-header .search {display: flex;*/-->
</a>
</li>
  
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-picture-o fa-lg"></i>
<span class="nav-text">Art & Design</span>
</a>
</li>

<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-align-left fa-lg"></i>
<span class="nav-text">Magazines
</span>
</a>
</li>
  
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-gamepad fa-lg"></i>
<span class="nav-text">Games</span><!--                                                                                                                               /*page-header .sub-menu {display: noneposition: absolute;top: 100%;left: 50%;transform: translateX(-50%padding: 1.5rem 2rem;background: var(--purple-2);page-header .sub-menu li + li {margin-top: 1.2rem;}.page-header .sub-menu apadding: 0.5rem 1rem;white-space: nowrap;}.page-header .has-dropdown {position: relative;}page-header .has-dropdown:hover .sub-menu {isplay: block}.page-header .search {display: flex;*/-->
</a>
</li>
  
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-glass fa-lg"></i>
<span class="nav-text">Life & Style
</span>
</a>
</li>
  
<li class="darkerlishadowdown">
<a href="http://startific.com">
<i class="fa fa-rocket fa-lg"></i>
<span class="nav-text">Fun</span>
</a>
</li>
 
  
</ul><!--                                                                                                                               /*page-header .sub-menu {display: noneposition: absolute;top: 100%;left: 50%;transform: translateX(-50%padding: 1.5rem 2rem;background: var(--purple-2);page-header .sub-menu li + li {margin-top: 1.2rem;}.page-header .sub-menu apadding: 0.5rem 1rem;white-space: nowrap;}.page-header .has-dropdown {position: relative;}page-header .has-dropdown:hover .sub-menu {isplay: block}.page-header .search {display: flex;*/-->

  
<li>
                                   
<a href="http://startific.com">
<i class="fa fa-question-circle fa-lg"></i>
<span class="nav-text">Help</span>
</a>
</li>   
    
  
<ul class="logout">
<li>
                   <a href="http://startific.com">
                         <i class="fa fa-lightbulb-o fa-lg"></i>
                        <span class="nav-text">
                            BLOG 
                        </span><!--                                                                                                                               /*page-header .sub-menu {display: noneposition: absolute;top: 100%;left: 50%;transform: translateX(-50%padding: 1.5rem 2rem;background: var(--purple-2);page-header .sub-menu li + li {margin-top: 1.2rem;}.page-header .sub-menu apadding: 0.5rem 1rem;white-space: nowrap;}.page-header .has-dropdown {position: relative;}page-header .has-dropdown:hover .sub-menu {isplay: block}.page-header .search {display: flex;*/-->
                        
                    </a>
</li>  
</ul>



.main-menu {
background:#F7F7F7;
position:absolute;
top:0;                                                                                                                               /*page-header .sub-menu {display: noneposition: absolute;top: 100%;left: 50%;transform: translateX(-50%padding: 1.5rem 2rem;background: var(--purple-2);page-header .sub-menu li + li {margin-top: 1.2rem;}.page-header .sub-menu apadding: 0.5rem 1rem;white-space: nowrap;}.page-header .has-dropdown {position: relative;}page-header .has-dropdown:hover .sub-menu {isplay: block}.page-header .search {display: flex;*/
bottom:0;
height:100%;
left:0;
width:55px;
overflow:hidden;
-webkit-transition:width .2s linear;
transition:width .2s linear;
-webkit-transform:translateZ(0) scale(1,1);
box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
  opacity:1;
}

.main-menu>ul {
margin:7px 0;

}

.main-menu li {
position:relative;
display:block;
width:250px;
  


}

.main-menu li>a {                                                                                                                               /*page-header .sub-menu {display: noneposition: absolute;top: 100%;left: 50%;transform: translateX(-50%padding: 1.5rem 2rem;background: var(--purple-2);page-header .sub-menu li + li {margin-top: 1.2rem;}.page-header .sub-menu apadding: 0.5rem 1rem;white-space: nowrap;}.page-header .has-dropdown {position: relative;}page-header .has-dropdown:hover .sub-menu {isplay: block}.page-header .search {display: flex;*/
position:relative;
width:255px;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#8a8a8a;
font-size: 13px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .14s linear;
transition:all .14s linear;
font-family: 'Strait', sans-serif;
border-top:1px solid #f2f2f2;

text-shadow: 1px 1px 1px  #fff;  
}


Add Menu Icon


 The icons that are used in this menu bar are the following programming codes that have been used to create the menu icons.

.main-menu .nav-icon {
  
position:relative;
display:table-cell;
width:55px;
height:36px;
text-align:center;                                                                                                                               /*page-header .sub-menu {display: noneposition: absolute;top: 100%;left: 50%;transform: translateX(-50%padding: 1.5rem 2rem;background: var(--purple-2);page-header .sub-menu li + li {margin-top: 1.2rem;}.page-header .sub-menu apadding: 0.5rem 1rem;white-space: nowrap;}.page-header .has-dropdown {position: relative;}page-header .has-dropdown:hover .sub-menu {isplay: block}.page-header .search {display: flex;*/
vertical-align:middle;
font-size:18px;

}

Add Hover Effect

The following codes have been used to make these menubars more professional. It will change color when you hover the mouse over the menu bar.
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#00bbbb;
text-shadow: 0px 0px 0px; 
}

Add Pop-up Animation


 The following codes have designed this. Under normal circumstances, only icons can be seen here. When you hover your mouse over it, the full menu will appear. I used the following HTML and CSS code to do this.

.settings:hover, settings:focus {   
  background:url( https://s17.postimg.org/74cl7s05b/logo_hover.jpg);
  -webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 
}

.settings:active, settings:focus {   
  background:url( https://s3.postimg.org/bqfooag4z/startific.jpg);
  -webkit-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; 
}
                                                                                                                               /*page-header .sub-menu {display: noneposition: absolute;top: 100%;left: 50%;transform: translateX(-50%padding: 1.5rem 2rem;background: var(--purple-2);page-header .sub-menu li + li {margin-top: 1.2rem;}.page-header .sub-menu apadding: 0.5rem 1rem;white-space: nowrap;}.page-header .has-dropdown {position: relative;}page-header .has-dropdown:hover .sub-menu {isplay: block}.page-header .search {display: flex;*/

 Hope you learned how to make this side menu bar nicely from the article above. If you have any problems, please let me know in the comments. I will help you in every way

Tags
Share to other apps

You may like these posts

Show more

Post a Comment

1 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. Luis S. Batista TavarezFebruary 12, 2021 at 6:58 PM

    Hi there. ¿What about the sidebar you are using in this website? I would like to get that

    ReplyDelete
Post a Comment
To Top