How To make Responsive Side Bar Menu Using HTML and CSS

Blogger Leb
October 11, 2020
0
How To Create HTML Side Menu Bar


How To Create HTML Side Menu Bar 

The responsive side menu bar is one of the most important parts of web design. You can create a Responsive Side menu bar using common HTML and CSS programming languages.

Hello reader I am Shantanu a web designer. I am going to show you how you can easily create an HTML side menu bar. You can use this menu bar anywhere, such as websites, blogs, personal projects. This project will work even if you don't have programming knowledge. I will tell you step by step how to make this project () using only HTML and CSS code.

There are many menu bars such as the top menu bar, side menu bar, popup menu bar, hidden menu bar. The top and side menu bars are the most popular. I have already told you (Click Here) how to make the top menu bar. If you do not know, you can find out using the link below. In this article, I will tell you how to create a side menu bar.


The video below will give you an idea about this sidebar. This video will help you understand what it feels like to make a sidebar.

Watch the video on how to make a SideBar menu using HTML CSS

 Now I will tell you some information about this sidebar. This sidebar is fully professional and responsive. That means the sidebar will work equally well for both mobile and desktop. There is a logo on the sidebar. You can change its logo as you wish. First of all, when you open the sidebar, you will find some icons on the side. When you move the mouse over that icon, the sidebar will come out at 250px. This is usually done with the hover (: hover) effect. When you click on the menu in the sidebar or hover the mouse over the menu, the icons will rotate 360 ​​degrees. Then when you remove the mouse from the sidebar, the sidebar will be hidden.

Side Menu Bar Menu Using HTML and CSS[Source Code⇩]

Hopefully from the video above you can fully understand how to make and work this transparent login form. If you want to try this code yourself, you can. That is why I have given the source code below. First of all, you create an HTML file (rename.html) and a CSS file (rename.css). Then you put the HTML code in the HTML file and the CSS code in the CSS file. Be sure to link the HTML and cis code to each other (<link rel="stylesheet" href="sidebar.css">).

Also if you want to put HTML and CSS code in a file, you can do that. For that, give HTML code in body tags (<body></body>) and CSS code in head tags. Then your program will work beautifully. If you encounter any problems, you can take the help of the video above.


Note:  I would like to make a special request that you download and use the source code by clicking on the "Download" option above. Because there were many errors while uploading the code below so I am adding a lot of comments (<!--comment-->)in this code. However, there is no change in the code, but the amount of code has increased a lot. Hover you can use this code if you want there will be no problem. But you can download the code, it would be best.


HTML TAGS (<body> Add Code </body>)

This code is an HTML code (rename.html). Put this code in the head tags of your project and also in the head tags in the HTML file.

 
    <div class="header">
  <a href="#" id="menu-action">
    <i class="fa fa-bars"></i>
    <span>Close</span>
  </a>
  <div class="logo">
    Simple Admin
  </div>
</div>
<div class="sidebar">
  <ul>
    <li><a href="#"><i class="fa fa-desktop"></i><span>Desktop</span></a></li>
    <li><a href="#"><i class="fa fa-server"></i><span>Server</span></a></li><!--     <li><a href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
      <li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
        <ul class="su-->
    <li><a href="#"><i class="fa fa-calendar"></i><span>Calendar</span></a></li>
    <li><a href="#"><i class="fa fa-envelope-o"></i><span>Messages</span></a></li>
    <li><a href="#"><i class="fa fa-table"></i><span>Data Table</span></a></li>
</div>

<!-- Content -->
<div class="main">
  <div class="hipsum">
   
    <table class="table table-bordered">
      <thead>
        <tr>
          <!--<li><a href="#">Sub-Menu 1</a></li>
              <li><a href="#">Sub-Menu 2</a>
                <ul>
                  <li><a href="#">Sub Sub-Menu 1</a></li>
                  <li><a href="#">Sub Sub-Menu 2</a></li>
                  <li>-->
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
         <!--<ul class="sub-menu">
              <li><a href="#">Sub-Menu 1</a></li>
              <li><a href="#">Sub-Menu 2</a></li>  <li><a href="#">Sub-Menu 4</a></li>
              <li><a href="#">Sub-Menu 5</a></li>
            </ul>--> 
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
    
  </div>
</div>
       

       


CSS CODE (<head><style> Add code</style></head>)

This code is a CSS code (rename.css). You enter this code in the style tags in the head tags of your project. Also, you put in the style tags in the CSS file.

 @import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh7USSwiPHA.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwiPHA.ttf) format('truetype');
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background: #f5f5f5;
  padding: 0;
  margin: 0;
  font-family: 'Lato', sans-serif;
}
i.fa {
  font-size: 16px;
}
p {
  font-size: 16px;
  line-height: 1.42857143;
}/*after{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    he*/
.header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  background: #3498DB;
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #fff;
}
.header .logo {
  text-transform: uppercase;
  letter-spacing: 1px;
}
.header #menu-action {
  display: block;
  float: left;
  width: 60px;
  height: 50px;
  line-height: 50px;
  margin-right: 15px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  background: rgba(0, 0, 0, 0.15);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.header #menu-action i {
  display: inline-block;
  margin: 0 5px;/*x;
    line-height: 45px;
    padding: 0 10px;
}

.field input{
    height: 100%;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;*/
}
.header #menu-action span {
  width: 0px;
  display: none;
  overflow: hidden;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.header #menu-action:hover {
  background: rgba(0, 0, 0, 0.25);
}
.header #menu-action.active {
  width: 250px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.header #menu-action.active span {
  display: inline;
  width: auto;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}/*after{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    he*/
.sidebar {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 50px;
  height: 100%;
  width: 60px;
  background: #fff;
  border-right: 1px solid #ddd;
  text-align: center;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.sidebar:hover,
.sidebar.active,
.sidebar.hovered {
  width: 250px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.sidebar ul li {
  display: block;
}
.sidebar ul li a {
  display: block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
  color: #444;
  text-align: left;
}
.sidebar ul li a i {
  display: inline-block;
  width: 60px;
  height: 60px;/*after{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    he*/
  line-height: 60px;
  text-align: center;
  -webkit-animation-duration: 0.7s;
  -moz-animation-duration: 0.7s;
  -o-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}
.sidebar ul li a span {
  display: inline-block;
  height: 60px;
  line-height: 60px;
}
.sidebar ul li a:hover {
  background-color: #eee;
}
.sidebar ul li a:hover i {
  -webkit-animation-name: swing;
  -moz-animation-name: swing;
  -o-animation-name: swing;
  animation-name: swing;
}
.main {
  position: relative;
  display: block;
  top: 50px;
  left: 0;
  padding: 15px;
  padding-left: 75px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}/*t-align: center;
    z-index: 999;
    width: 370px;
    text-align: center;
    padding: 60px 32px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: -4px 12px 48px 0px rgba(0,0,0,0.75);
}

.content header{*/
.main.active {
  padding-left: 275px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.main .jumbotron {
  background-color: #fff;
  padding: 30px !important;
  border: 1px solid #dfe8f1;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.main .jumbotron h1 {
  font-size: 24px;
  margin: 0;
  padding: 0;
  margin-bottom: 12px;
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {/*margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  }
   
  .sidebar header {
  font-size: */
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    -ms-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }/*ul a {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 65px;
  font-size: 20px;
  color: #fff;
  padding-left: 40px;*/
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    -ms-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    -ms-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }/*z-index: 1111;
  left: -195px;
  top: 17px;
  font-size: 30px;
  color: #0a5275;
  padding: 4px 9px;
  transition: all 0.5s;
  }
   #check:checked ~ .sidebar{
   left: 0;*/
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    -ms-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    -ms-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}/* position: fixed;
   left: -250px;
   width: 250px;
   height: 100%;
   background: #042331;
   transition: all 0.5s ease;
  */
.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}



Using this method you can easily create an HTML sidebar menu. This method is very simple. I hope you have benefited a lot from this article. So be sure to comment on how you like this article.

❤Sharing is caring❤

Tags
Share to other apps

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)
To Top