DEV Community

loading...
Cover image for Create a Side Menu Bar Using Only HTML and CSS

Create a Side Menu Bar Using Only HTML and CSS

backlinkn profile image backlinkn ・13 min read

In this article, I will show you how to easily create a side menu bar using only HTML and CSS programming code. This is a very popular menu bar design that is used in a variety of websites. Such designs are in great demand at present. And depending on this demand I have come up with a beautiful and professional side menu bar for this article. Here I will show you in a good way how you can make it. You can add it to your project or site if you want. I've already designed many more menubar designs (like Top Menu Bar, Pop-up Menubar, Side Menubar, etc.). Normally only icons are visible in this menu bar. When you hover the mouse over those icons, the whole bar will appear in front of you.

Alt Text




Some special information about this side menu bar

  • I only used HTML and CSS programming code to make it. While making it, I tried to make it as simple as possible so that everyone could understand.
  • This is a fixed menu bar. In the general case, the icons used in the menu can be seen. When you mouse over or click on that icon, the full menu bar will appear in front of you.
  • It is completely professional and responsive which has been made using CSS code.
  • Here I have added a lot of menus. You can change these as you need or add more.
  • There is also an opportunity to link to a social media account. If you want, you can add links like Facebook, YouTube, Instagram, etc. here.

All in all, it is a professional and modern side menu bar that will surely be your choice. You can follow the steps below to make it. Below I show you how to add it to your project and how you can learn to make it.

How To Make This Side Menu Bar

To create it, you must first create an HTML file. You need to open Notepad on your computer to create HTML files. Then copy and paste the following structure into that file.

<html>
<head>
     <style>
        Add CSS Code
     </style>

</head>
<body>
       Add Html Code
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Then save the file by adding dot HTML to the rename of your choice.
After creating the HTML file, add the HTML code in the structure above where the add HTML code is written. For this, you can download the codes by clicking on the download button above. Then you add the CSS codes in the structure above where the add CSS code is written. This way you can easily create this side menu bar.

I have given the necessary code to make it in the download button. You can download the code from there. Below I have told you how to add the necessary to make it your own project.

Add HTML Code

The following programming codes are HTML programming codes. Which is mainly used to add the structure and menus of this side menu bar. You copy the codes below then add the HTML codes in the place where the add HTML code is written in the above structure.

<!DOCTYPE html><html class="menu">
<html>

<head>

<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">

<!--                                                                                                                       /*fa position: relativedisplay: table-cell;width: 55px;height: 36px;text-align: center;top:12px; font-size:20px;}.main-menu:hover, nav.main-menu.expanded {width:250px;overflow:hidden;opacity:1;}.main-menu{background:#F7F7F7;position:absolute;top:0;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;}*/-->





</head>
<body>



</div><nav class="main-menu">



 <div>
    <a class="logo" href="http://startific.com">
    </a> 
  </div> 
<div class="settings"></div>
<div class="scrollbar" id="style-1">

<ul>

<li>                                   
<a href="http://startific.com">
<i class="fa fa-home fa-lg"></i><!--                                                                                                                       /* able-cell;width: 55px;height: 36px;text-align: center;top:12px; font-size:20px;}.main-menu:hover, nav.main-menu.expanded {width:250px;overflow:hidden;opacity:1;}.main-menu{background:#F7F7F7;position:absolute;top:0;bottom:0;height:100%;left:0;widthtransition: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;}*/-->
<span class="nav-text">Home</span>
</a>
</li>   

<li>                                 
<a href="http://startific.com">
<i class="fa fa-user fa-lg"></i>
<span class="nav-text">Login</span>
</a>
</li>   


<li>                                 
<a href="http://startific.com">
<i class="fa fa-envelope-o fa-lg"></i>
<span class="nav-text">Contact</span>
</a>
</li>   




<li>
<a href="http://startific.com">
<i class="fa fa-heart-o fa-lg"></i>
                       <!--                                                                                                                       /*farflow:hidden;opacity:1;}.main-menu{background:#F7F7F7;position:absolute;top:0;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;}*/--> 
<span class="share"> 


<div class="addthis_default_style addthis_32x32_style">

<div style="position:absolute;
margin-left: 56px;top:3px;"> 




 <a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png" width="30px" height="30px"></a>

   <a href="https://twitter.com/share" target="_blank" class="share-popup"><img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Twitter_alt.png" width="30px" height="30px"></a>




<a href="https://plusone.google.com/_/+1/confirm?hl=en&url=_URL_&title=_TITLE_
" target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/google-plus-icon.png" width="30px" height="30px"></a>   



</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script><!--                                                                                                                       /*fa0px;overflow:hidden;opacity:1;}.main-menu{background:#F7F7F7;position:absolute;top:0;bottom:0;height:100%;left:0;width:55px;overflow:hidden;webkit-transition:width .2s linear;tridth .2s linear;-webkit-transform:translateZ(0) scale(1,1);box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07)  opacity:1;}*/-->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ff17589278d8b3a"></script>





                        </span>
                        <span class="twitter"></span>
                        <span class="google"></span>
                        <span class="fb-like">  
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fstartific&amp;width&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>

                        </span>
                        <span class="nav-text">
                        </span>

                    </a>

</li>




</li>
<li class="darkerlishadow">
<a href="http://startific.com">
<i class="fa fa-clock-o fa-lg"></i><!--                                                                                                                       /*ound:#F7F7F7;position:absolute;top:0;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;}*/-->
<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>
</li>

<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-shopping-cart"></i>
 <span class="nav-text">Shopping</span>
</a><!--                                                                                                                       /*fa position: relativedisplay: table-cell;width: 55px;height: 36px;ition:absolute;top:0;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;}*/-->
</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>
</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>
<!--                                                                                                                       /*fa position: relativedisplay: table-cell;width: 55px;height: 36px;text-align: center;top:12px; font-size:20px;}.main-menu:hover,absolute;top:0;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;}*/-->
<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>
</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><!--                                                                                                                       /*fa position: relativedisplay: table-cell;width: 55px;height: 36px;text-align: center;top:12px; font-size:20px;}.main-menu:hor;-webkit-transform:translateZ(0) scale(1,1);box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07)  opacity:1;}*/-->
<span class="nav-text">Fun</span>
</a>
</li>


</ul>


<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"><!--                                                                                                                       /*fa position: relativedisplay: table-cell;width: 55px;height: 36px;text-align: center;top:12px; font-size:20px;}.main-menu:hover, nav.main-menu.expanded {width:250pidth: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;}*/-->
                         <i class="fa fa-lightbulb-o fa-lg"></i>
                        <span class="nav-text">
                            BLOG 
                        </span>

                    </a>
</li>  
</ul>
        </nav>






</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Add CSS Code

The following programming codes are CSS programming codes. Which was originally used to design this bar and make it fully responsive. You copy the following CSS programming codes and then paste them in the upper structure where the add HTML code is written.

 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);

.logo{

}

.settings {

  height:73px; 
  float:left;
  background:url( https://s3.postimg.org/bqfooag4z/startific.jpg);
  background-repeat:no-repeat;
  width:250px;
  margin:0px;
 text-align: center;
font-size:20px;
font-family: 'Strait', sans-serif;

}


                                                                                                                       /*fa position: relativedisplay: table-cell;width: 55px;height: 36px;text-align: center;top:12px; font-size:20px;}.main-menu:hover, nav.main-menu.expanded {width:250px;overflow:hidden;opacity:1;}.main-menu{background:#F7F7F7;position:absolute;top:0;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;}*/



/* ScrolBar  */
.scrollbar
{

height: 90%;
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
}

.scrollbar:hover
{

height: 90%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
                                                                                                                       /*fa position: relativedisplay: table-cell;width: 55px;height: 36px;text-align: center;top:12px; font-size:20px;}.main-menu:hover, nav.main-menu.expanded {width:250px;overflow:hidden;opacity:1;}.main-menu{background:#F7F7F7;position:absolute;top:0;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;}*/
/* Scrollbar Style */ 



#style-1::-webkit-scrollbar-track
{
border-radius: 2px;
}

#style-1::-webkit-scrollbar
{
width: 5px;
background-color: #F7F7F7;
}

#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #BFBFBF;
}
/* Scrollbar End */ 

                                                                                                                       /*fa position: relativedisplay: table-cell;width: 55px;height: 36px;text-align: center;top:12px; font-size:20px;}.main-menu:hover, nav.main-menu.expanded {width:250px;overflow:hidden;opacity:1;}.main-menu{background:#F7F7F7;position:absolute;top:0;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;}*/


.fa-lg {
font-size: 1em;

}
.fa {
position: relative;
display: table-cell;
width: 55px;
height: 36px;
text-align: center;
top:12px; 
font-size:20px;

}



.main-menu:hover, nav.main-menu.expanded {
width:250px;
overflow:hidden;
opacity:1;
                                                                                                                       /*fa position: relativedisplay: table-cell;width: 55px;height: 36px;text-align: center;top:12px; font-size:20px;}.main-menu:hover, nav.main-menu.expanded {width:250px;overflow:hidden;opacity:1;}.main-menu{background:#F7F7F7;position:absolute;top:0;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 {
background:#F7F7F7;
position:absolute;
top:0;
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;                                                                                                                       /*fa position: relativedisplay: table-cell;width: 55px;height: 36px;text-align: center;top:12px; font-size:20px;}.main-menu:hover, nav.main-menu.expanded {width:250px;overflow:hidden;opacity:1;}.main-menu{background:#F7F7F7;position:absolute;top:0;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;}*/
width:250px;



}

.main-menu li>a {
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;  
}



.main-menu .nav-icon {                                                                                                                       /*fa position: relativedisplay: table-cell;width: 55px;height: 36px;text-align: center;top:12px; font-size:20px;}.main-menu:hover,n:absolute;top:0;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;}*/

position:relative;
display:table-cell;
width:55px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;

}

.main-menu .nav-text  {

position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}

.main-menu .share {
}


                                                                                                                       /*;position:absolute;top:0;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 .fb-like {

left: 180px;
position:absolute;
top: 15px;
}

.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;

}

.no-touch .scrollable.hover {
overflow-y:hidden;

}

.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;

}
                                                                                                                       /*ow:hidden;opacity:1;}.main-menu{background:#F7F7F7;position:absolute;top:0;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;}*/

/* Logo Hover Property */


.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; 
}


a:hover,a:focus {
text-decoration:none;
border-left:0px solid #F7F7F7;



}                                                                                                                       /*ain-menu.expanded {width:250px;overflow:hidden;opacity:1;}.main-menu{background:#F7F7F7;position:absolute;top:0;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;}*/

nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;

}

nav ul,nav li {
outline:0;
margin:0;
padding:0;
text-transform: uppercase;
}




/* Darker element side menu Start*/


.darkerli
{
background-color:#ededed;                                                                                                                       /*250px;overflow:hidden;opacity:1;}.main-menu{background:#F7F7F7;position:absolute;top:0;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;}*/
text-transform:capitalize;  
}

.darkerlishadow
{
background-color:#ededed;
text-transform:capitalize;  
-webkit-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow:         inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
}


.darkerlishadowdown
{
background-color:#ededed;
text-transform:capitalize;  
-webkit-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow:         inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
}

/* Darker element side menu End*/




.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; 
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
@font-face {                                                                                                                       /*in-menu.expanded {width:250px;overflow:hidden;opacity:1;}.main-menu{background:#F7F7F7;position:absolute;top:0;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;}*/
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}

Enter fullscreen mode Exit fullscreen mode

I hope you have learned how to make a side menu from this article. If you have any problems in making this project, you can definitely let me know in the comments.

Discussion

pic
Editor guide