Create Responsive Mobile Menu using Only HTML CSS | Responsive Navigation Slide Using CSS

You can create a sliding side navigation bar mobile menu for your responsive website using only HTML and CSS. This tutorial blog to learn how to create a side menu with hamburger menu icon click to menu show hide without JavaScript.

Video Tutorial for "Responsive Mobile Menu using Only HTML CSS"

You can create a sliding side navigation bar mobile menu for your responsive website using only HTML and CSS. This tutorial video to learn how to create a side menu with hamburger menu icon click to menu show hide without JavaScript.

Create Responsive Mobile Menu using Only HTML CSS [Source Code]

This source code can help you to create Responsive Mobile Menu using Only HTML CSS. You can use your own images for this project.

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<header class="header"><!--header-start-->
    <div class="logo">
      LOGO
    </div>
    <a href="#" class="nav_ico">
      <label for="menu_trigger">
      </label>
      <span></span>
      <span></span>
      <span></span>
    </a>
    
</header><!--header-end-->
<input type="radio" id="menu_trigger" name="menu_close">
<nav class="side_nav">
      <span class="close_icon">+
        <input type="radio" name="menu_close">
      </span>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>

<div class="banner">
  <h1>Side Navigation <br> Only <span>HTML CSS</span></h1>
</div>

</body>
</html>

CSS Code

Copy

*,*:after,*:before{
  box-sizing: border-box;
}
body {
  background: white;
  font-family:arial;
  font-size: 16px;
  margin: 0;
}

.header{
  background: #3d016a;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 20px 60px;
  color: #fff;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 30px;
  font-weight: 700;
}
.nav_ico {
  display: inline-block;
  position: relative;
}
.nav_ico label{
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
}
.nav_ico span{
  display: block;
  height: 4px;
  width: 30px;
  background: #fff;
  margin: 4px 0
}

.nav-overlay {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 998;
  background: transparent;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}
.nav-overlay.active {
  background: rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}


#menu_trigger{
  position: fixed;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}
.close_icon{
  color: #fff;
  font-size: 60px;
  position: relative;
  position: absolute;
  left: 20px;
  top: 20px;
  line-height: 0.7;
  transform: rotate(45deg);
}
.close_icon input{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.side_nav{
  position: fixed;
  right: 0;
  top: 0;
  width: 260px;
  height: 100vh;
  background: #3d016a;
  z-index: 1001;
  padding-top: 100px;
  transition: all 0.3s ease-in-out;
  transform: translateX(100%);
}
#menu_trigger:checked + .side_nav{
  transform: translateX(0%);
}
.side_nav ul{
  padding: 0;
  margin: 0;
  list-style: none;
}
.side_nav ul li{
  margin: 0;
}
.side_nav ul li a{
  display: block;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  padding: 12px 30px;
  border-bottom: 1px solid;
  transition: all 0.3s ease-in-out;
}
.side_nav ul li a:hover{
  background: #53048f;
  color: #fff;
}

.banner{
  height: 100vh;
  width: 100%;
  background: url('../images/banner.png') center center no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  padding:60px 30px 0;
  color: #fff
}
.banner h1{
  font-size: 90px;
  text-shadow: 5px 1px 1px #000;
  text-transform: uppercase;
}
.banner h1 span{
  color: #12edff
}