Share the post "6+ CSS Mobile Menu Examples"

Share the post "6+ CSS Mobile Menu Examples"

Share the post "6+ CSS Mobile Menu Examples"

Share the post "6+ CSS Mobile Menu Examples"

6+ CSS Mobile Menu Examples

💙 CSS / By

This post contains a total of 6+ Hand-Picked CSS Mobile Menu Examples with Source Code. All these Mobile Menus are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

10+ CSS Dropdown Menu Examples
CSS Dropdown Menus
10+ CSS Menu Examples
CSS Menus
10+ JavaScript Mobile Menu Examples
JavaScript Mobile Menus
12+ CSS Vertical Menu Examples
CSS Vertical Menus
5+ CSS Hamburger Menu Examples
CSS Hamburger Menus
6+ CSS Sidebar Menu Examples
CSS Sidebar Menus
7+ CSS Circle Menu Examples
CSS Circle Menus
7+ CSS Fullscreen Menu Examples
CSS Fullscreen Menus
7+ CSS Sliding Menu Examples
CSS Sliding Menus

CSS Mobile Menu Examples

1. By Animation Bro

Made by Animation Bro. Mobile menu with cool hover effect and animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
.phone {
  width: 320px;
  height: 260px;
  margin: auto;
  display: flex;
  align-items: flex-end;
  position: relative;
  justify-content: center;
}
.phone::before {
  content: '';
  position: absolute;
  width: 84%;
  height: 0px;
  bottom: -10px;
  box-shadow: 0 0 25px 9px rgba(255, 0, 0, 0.33), 50px 10px 25px 8px rgba(18, 255, 0, 0.33), -40px 8px 25px 9px rgba(242, 255, 0, 0.33);
  left: 0;
  right: 0;
  margin: auto;
}
.phone::after {
  content: '';
}
.phone_content {
  filter: contrast(20);
  width: 100%;
  background-color: white;
  overflow: hidden;
  position: absolute;
}
.phone_bottom {
  width: 100%;
  height: 66px;
  background: black;
  display: flex;
  justify-content: center;
  filter: blur(10px);
}

input {
  display: none;
}

label {
  cursor: pointer;
  display: flex;
  width: 33%;
  height: 66px;
  position: relative;
  z-index: 2;
  align-items: center;
  justify-content: center;
}
label > img {
  width: 25px;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  z-index: 3;
  transition: 200ms 100ms cubic-bezier(0.14, -0.08, 0.74, 1.4);
}
label::before {
  content: '';
  position: absolute;
}

.circle {
  width: 60px;
  height: 60px;
  background: black;
  position: absolute;
  top: 152px;
  z-index: 1;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: auto;
  transition: 200ms cubic-bezier(0.14, -0.08, 0.74, 1.4);
  box-shadow: 0px 82px 20px 0px rgba(128, 128, 128, 0.29);
}

.indicator {
  width: 70px;
  height: 70px;
  background-image: linear-gradient(0deg, #f7b0b0, rgba(183, 255, 154, 0)), linear-gradient(0deg, rgba(158, 255, 151, 0.75), rgba(183, 255, 154, 0)), linear-gradient(0deg, #b4fffb, rgba(183, 255, 154, 0));
  background-size: cover;
  background-position: 0 10px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: -42px;
  right: 0;
  margin: auto;
  transition: 200ms cubic-bezier(0.14, -0.08, 0.74, 1.4);
}

#s1:checked ~ [for="s1"] > img {
  top: -85px;
}
#s1:checked ~ .circle,
#s1:checked ~ div div .indicator {
  left: -66%;
}

#s2:checked ~ [for="s2"] > img {
  top: -85px;
}
#s2:checked ~ .circle,
#s2:checked ~ div div .indicator {
  left: 0;
}

#s3:checked ~ [for="s3"] > img {
  top: -85px;
}
#s3:checked ~ .circle,
#s3:checked ~ div div .indicator {
  left: 66%;
}
</style>
</head>
<body>
  <div class="phone">
  <input type="radio" name="s" id="s1">
  <input type="radio" name="s" id="s2" checked="checked">
  <input type="radio" name="s" id="s3">
  <label for="s1"><img src="https://co0kie.github.io/codepen/mobile-nav/facebook.svg" alt=""></label>
  <label for="s2"><img src="https://co0kie.github.io/codepen/mobile-nav/twitter.svg" alt=""></label>
  <label for="s3"><img src="https://co0kie.github.io/codepen/mobile-nav/instagram.svg" alt=""></label>
  <div class="circle"></div>
  <div class="phone_content">
    <div class="phone_bottom">
      <span class="indicator"></span>
    </div>
  </div>
</div>
</body>
</html>

2. By Kirsten Humphreys

Made by Kirsten Humphreys. Simple CSS Hamburger mobile menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
/* Basic Styles */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

body {
  font-family: sans-serif;
  background-color: #F6C390;
}

a {
  text-decoration: none;
}

.container {
  position: relative;
  margin: 35px auto 0;
  width: 300px;
  height: 534px;
  background-color: #533557;
  overflow: hidden;
}

/* Toggle Functionality */
#toggle {
  display: none;
}

#toggle:checked ~ .toggle-container .button-toggle {
  box-shadow: 0 0 0 550px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
}
#toggle:checked ~ .toggle-container .button-toggle:before {
  transform: translateY(-50%) rotate(45deg) scale(1);
}
#toggle:checked ~ .toggle-container .button-toggle:after {
  transform: translateY(-50%) rotate(-45deg) scale(1);
}
#toggle:checked ~ .nav {
  margin-bottom: 100px;
  pointer-events: auto;
  transform: translate(50px, 50px);
}
#toggle:checked ~ .nav .nav-item {
  color: #EC7263;
  letter-spacing: 0;
  height: 40px;
  line-height: 40px;
  margin-top: 0;
  opacity: 1;
  transform: scaleY(1);
  transition: 0.5s, opacity 0.1s;
}
#toggle:checked ~ .nav .nav-item:nth-child(1) {
  transition-delay: 0.15s;
}
#toggle:checked ~ .nav .nav-item:nth-child(1):before {
  transition-delay: 0.15s;
}
#toggle:checked ~ .nav .nav-item:nth-child(2) {
  transition-delay: 0.1s;
}
#toggle:checked ~ .nav .nav-item:nth-child(2):before {
  transition-delay: 0.1s;
}
#toggle:checked ~ .nav .nav-item:nth-child(3) {
  transition-delay: 0.05s;
}
#toggle:checked ~ .nav .nav-item:nth-child(3):before {
  transition-delay: 0.05s;
}
#toggle:checked ~ .nav .nav-item:nth-child(4) {
  transition-delay: 0s;
}
#toggle:checked ~ .nav .nav-item:nth-child(4):before {
  transition-delay: 0s;
}
#toggle:checked ~ .nav .nav-item:before {
  opacity: 0;
}
#toggle:checked ~ .dummy-content {
  padding-top: 30px;
}
#toggle:checked ~ .dummy-content:before {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Toggle Button */
.button-toggle {
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 25px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  border-radius: 100%;
  transition: 0.6s;
}
.button-toggle:hover {
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
}
.button-toggle:before, .button-toggle:after {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #EC7263;
  border-radius: 5px;
  transition: 0.5s;
}
.button-toggle:before {
  transform: translateY(-50%) rotate(45deg) scale(0);
}
.button-toggle:after {
  transform: translateY(50%) rotate(-45deg) scale(0);
}

/* Menu */
.nav {
  display: inline-block;
  margin: 25px 25px 20px;
  pointer-events: none;
  transition: 0.5s;
}

.nav-item {
  position: relative;
  display: inline-block;
  float: left;
  clear: both;
  color: transparent;
  font-size: 14px;
  letter-spacing: -6.2px;
  height: 7px;
  line-height: 7px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleY(0.2);
  transition: 0.5s, opacity 1s;
}
.nav-item:nth-child(1) {
  transition-delay: 0s;
}
.nav-item:nth-child(1):before {
  transition-delay: 0s;
}
.nav-item:nth-child(2) {
  transition-delay: 0.05s;
}
.nav-item:nth-child(2):before {
  transition-delay: 0.05s;
}
.nav-item:nth-child(3) {
  transition-delay: 0.1s;
}
.nav-item:nth-child(3):before {
  transition-delay: 0.1s;
}
.nav-item:nth-child(4) {
  transition-delay: 0.15s;
}
.nav-item:nth-child(4):before {
  transition-delay: 0.15s;
}
.nav-item:nth-child(1) {
  letter-spacing: -8px;
}
.nav-item:nth-child(2) {
  letter-spacing: -7px;
}
.nav-item:nth-child(n+4) {
  letter-spacing: -8px;
  margin-top: -7px;
  opacity: 0;
}
.nav-item:before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #EC7263;
  transform: translateY(-50%) scaleY(5);
  transition: 0.5s;
}

/* Dummy Content */
.dummy-content {
  position: relative;
  text-align: center;
  transition: 0.5s;
}
.dummy-content:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 2;
  transition: 0.5s;
}

.circle {
  display: inline-block;
  width: 75px;
  height: 75px;
  background-color: #EC7263;
  border-radius: 100%;
}

.text {
  margin: 15px 0 30px;
}
.text span {
  display: inline-block;
  height: 10px;
  margin: 0 5px;
  background-color: #C06162;
  border-radius: 5px;
}
.text span:first-child {
  width: 50px;
}
.text span:last-child {
  width: 80px;
}

.square-top {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 300px;
  background-color: #FEBE7E;
  z-index: 1;
}

.square-behind {
  display: inline-block;
  position: relative;
  top: -256px;
  width: 250px;
  height: 210px;
  background-color: #C28683;
}
.square-behind:before, .square-behind:after {
  position: absolute;
  content: "";
  top: 0;
  width: 40%;
  height: 100%;
}
.square-behind:before {
  left: 0;
  background-color: #9D567C;
}
.square-behind:after {
  right: 0;
  background-color: #958C6B;
}
</style>
</head>
<body>
  <div class="container">

    <input id="toggle" type="checkbox">

    
    <label class="toggle-container" for="toggle">
     
      <span class="button button-toggle"></span>
    </label>

    <!-- The Nav Menu -->
    <nav class="nav">
      <a class="nav-item" href="">Dashboard</a>
      <a class="nav-item" href="">History</a>
      <a class="nav-item" href="">Statistics</a>
      <a class="nav-item" href="">Settings</a>
    </nav>

    <!-- Dummy Content -->
    <section class="dummy-content">
      <div class="circle"></div>
      <div class="text">
        <span></span><span></span>
      </div>
      <div class="square-top"></div>
      <div class="square-behind"></div>
    </section>
  </div>
</body>
</html>

3. By Ramnek Singh

Made by Ramnek Singh. Mobile menu with background color change effect. Source

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>
*{
    margin:0;
    padding:0;
}
body{overflow: hidden;
padding:0;}

#body{
    transition: background ease .5s;
    position: absolute;
    width:300vw;
    height: 300vh;
    top:0;
    left:0;
    background-color:rgb(97, 218, 157);
}
input{
    display:none;
}
label.icons{
transition: transform ease .5s,color  ease .5s;
    font-size:25px;
    position: absolute;
    z-index: 3;
color:rgb(155, 143, 143);
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
label.home{
    transform: translate(-135px,-20px);
}
label.search{
    transform: translate(-50px,-20px);
}
label.heart{
    transform: translate(30px,-20px);
}
label.bell{
    transform: translate(120px,-20px);
}
div#box{
    z-index: 1;
    width:350px;
    height:100px;
    background-color: white;
    box-shadow:0px 1px 2px black;
    position: absolute;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border:1px solid white;
}

span.title{
    transition: color.5s,transform .5s,opacity .5s;
    font-size:13px;
    position: absolute;
    z-index: 2;
color:rgb(155, 143, 143);
left:50%;
top:50%;
transform: translate(-50%,-50%);
opacity: 0;
}
span.home{
    transform: translate(-135px,28px);
}
span.search{
    transform:translate(-50px,28px);
}
span.heart{
    transform:translate(33px,28px);
}
span.bell{
    transform:translate(98px,28px);
}
#one:checked~label.home{
    transform: translate(-135px,-68px);
    color:rgb(97, 218, 157);
}
#two:checked~label.search{
    transform: translate(-48px,-64px);
    color:rgb(236, 202, 47);
}
#three:checked~label.heart{
    transform: translate(30px,-68px);
    color:rgb(240, 78, 105);
}
#four:checked~label.bell{
    transform: translate(120px,-68px);
    color:rgb(58, 83, 224);
}
#one:checked~div#body{
    background-color:rgb(97, 218, 157);
}
#two:checked~div#body{
    background-color:rgb(236, 202, 47);
}
#three:checked~div#body{
    background-color:rgb(240, 78, 105);
}
#four:checked~div#body{
    background-color: rgb(58, 83, 224);
}
#one:checked~span.home{
color:rgb(97, 218, 157);
opacity:1;
transform: translate(-135px,0px);
}
#two:checked~span.search{
color:rgb(236, 202, 47);
opacity:1;
transform:translate(-50px,0px);
}
#three:checked~span.heart{
    color:rgb(240, 78, 105);
    opacity:1;
    transform:translate(33px,0px);
}
#four:checked~span.bell{
color: rgb(58, 83, 224);
transform:translate(98px,0px);
    opacity:1;
}
div.border{
    position: absolute;
   
    z-index: 2;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    border:6px solid rgb(97, 218, 157);
    width:45px;
    height: 45px;
    background-color: white;
    transition: border .5s,transform .5s,border-radius .3s;
}
div.fst{
    transform:translate(-144px,-75px);
}
#one:checked~div.border{
    border:6px solid rgb(97, 218, 157);
    transform:translate(-144px,-75px);
    border-radius: 0%;
}
#two:checked~div.border{
    border:6px solid rgb(236, 202, 47);
    transform:translate(-60px,-75px);
    border-radius: 50%;
    width:50px;
    height: 50px;
}
#three:checked~div.border{
    border:6px solid rgb(240, 78, 105);
    transform:translate(22px,-75px) ;
    transform-origin: center center;
    outline-color: rgb(240, 78, 105);
    border-radius: 0px 0px 50px 50px;
}

#four:checked~div.border{
    border:6px solid rgb(58, 83, 224);
    transform:translate(110px,-75px) ;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
   
}
div.effect{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);

}


span{
  cursor:pointer
}
</style>
</head>
<body>
  <body>
   <input type="radio" id="one" name="buttons" checked>
   <label for="one" class="icons home"><span class="glyphicon glyphicon-home"></span></label>
   <input type="radio" id="two" name="buttons">
   <label for="two" class="icons search"><span class="glyphicon glyphicon-search"></span></label>
   <input type="radio" id="three" name="buttons">
   <label for="three" class="icons heart"><span class="glyphicon glyphicon-heart"></span></label>
   <input type="radio" id="four" name="buttons">
   <label for="four" class="icons bell"><span class="glyphicon glyphicon-bell"></span></label>
<div id="box">
</div>
<div id="body"></div>
<span  class="title home">Home</span>
<span class="title search">Search</span>
<span class="title heart">Likes</span>
<span class="title bell">Notifications</span>
<div class="border"></div>
<div class="effect"></div>
</body>
</html>

4. By Ricardo Oliva Alonso

Made by Ricardo Oliva Alonso. Gradient mobile menu. You get gradient effect on hover. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
*,
*::before,
*::after{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(45deg, #A973BC, #FFD1D1 , #FFE3D9);
}
.menu{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width: 200px;
	height: 60px;
	border-radius: 20px;
	background-color: white;
	box-shadow: 0 0 30px rgba(176, 113, 140, 0.35);
}
.menu__bg{
	position: relative;
	width: 35px;
	height: 35px;
	overflow: hidden;
	background-color: #ddd6d9;
	cursor: pointer;
}
.menu__bg:hover::before{
	content: '';
	position:absolute;
	width: 200%;
	height: 400%;
	left: 0;
	top: 0;
	background-image: linear-gradient(45deg, #5B2A86, #DC6BAD , #FFE3D9);
	animation: bg-1 1s infinite alternate;
}
.menu__bg:hover::after{
	content: '';
	position:absolute;
	left: 0;
	top: 0;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	filter: blur(2px);
	background-color: rgba(221, 214, 217, .7);
	animation: bg-2 4s infinite ;
}
.menu__icon{
	width: 100%;
	height: 100%;
	position: relative;
	object-fit: contain;
	z-index: 1000;
}
.big{
	width: 50px;
	height: 50px;
}
@keyframes bg-1 {
	0%{ top: -300%; }
	100%{ top: 0%; }
}
@keyframes bg-2 {
	0%{ top: 20%; left: 20%}
	25%{ top: 80%; left: 80%;}
	50%{ top: 80%; left: 20%;}
	75%{ top: 30%; left: 80%;}
}
@keyframes an {
	0%{ width: 100%; height: 100%;}
	100%{ width: 100%; height: 100%; }
}
</style>
</head>
<body>
  <nav class="menu">
	<div class="menu__bg">
		<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBB%0D%0AZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9u%0D%0AOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBT%0D%0AVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzEx%0D%0ALmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAv%0D%0Ac3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5%0D%0APSIwcHgiIHdpZHRoPSIzMHB4Ig0KCSBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9IjAgMCAzMCAzMCIg%0D%0AZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzAgMzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0K%0D%0APGcgaWQ9IkNhcGFfMSIgZGlzcGxheT0ibm9uZSI+DQoJPGcgZGlzcGxheT0iaW5saW5lIj4NCgkJ%0D%0APGNpcmNsZSBmaWxsPSIjRkZGRkZGIiBjeD0iMTUiIGN5PSIxNSIgcj0iMi45MTciLz4NCgkJPHBh%0D%0AdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTAsMHYzMGgzMFYwSDB6IE0yMS4yNSwxNWMwLDAuMjc1LTAu%0D%0AMDI1LDAuNTQ2LTAuMDU5LDAuODEzbDEuNzU5LDEuMzc5YzAuMTU4LDAuMTMsMC4yMDQsMC4zNTQs%0D%0AMC4xLDAuNTMzDQoJCQlsLTEuNjY2LDIuODg5Yy0wLjEwNCwwLjE3OS0wLjMyMSwwLjI0OS0wLjUw%0D%0AOSwwLjE3OUwxOC44LDE5Ljk1NGMtMC40MjksMC4zMzMtMC44OTksMC42MDgtMS40MDgsMC44Mmwt%0D%0AMC4zMTMsMi4yMDkNCgkJCWMtMC4wMzMsMC4xOTUtMC4yMDQsMC4zNS0wLjQxMywwLjM1aC0zLjMz%0D%0AM2MtMC4yMDgsMC0wLjM3OS0wLjE1NC0wLjQxMy0wLjM1bC0wLjMxMy0yLjIwOWMtMC41MDgtMC4y%0D%0AMTItMC45NzktMC40OTEtMS40MDgtMC44Mg0KCQkJbC0yLjA3NSwwLjgzOGMtMC4xODgsMC4wNzUt%0D%0AMC40MDQsMC0wLjUwOC0wLjE3OUw2Ljk1LDE3LjcyNWMtMC4xMDQtMC4xODQtMC4wNTktMC40MDgs%0D%0AMC4xLTAuNTMzbDEuNzU5LTEuMzc5DQoJCQlDOC43NzUsMTUuNTQ2LDguNzUsMTUuMjc1LDguNzUs%0D%0AMTVjMC0wLjI3NSwwLjAyNS0wLjU0NiwwLjA1OS0wLjgxM0w3LjA1LDEyLjgwOGMtMC4xNTgtMC4x%0D%0AMjktMC4yMDQtMC4zNTQtMC4xLTAuNTMzbDEuNjY3LTIuODg4DQoJCQljMC4xMDQtMC4xNzksMC4z%0D%0AMjEtMC4yNSwwLjUwOC0wLjE3OWwyLjA3NSwwLjgzN2MwLjQyOS0wLjMzMywwLjktMC42MDgsMS40%0D%0AMDgtMC44MjFsMC4zMTMtMi4yMDgNCgkJCWMwLjAzMy0wLjE5NiwwLjIwNC0wLjM1LDAuNDEzLTAu%0D%0AMzVoMy4zMzNjMC4yMDksMCwwLjM4LDAuMTU0LDAuNDE3LDAuMzVsMC4zMTMsMi4yMDhjMC41MDks%0D%0AMC4yMTIsMC45NzksMC40OTIsMS40MDgsMC44MjENCgkJCWwyLjA3NS0wLjgzN2MwLjE4OC0wLjA3%0D%0ANSwwLjQwNCwwLDAuNTA5LDAuMTc5bDEuNjY3LDIuODg4YzAuMTA0LDAuMTg0LDAuMDU5LDAuNDA4%0D%0ALTAuMTAxLDAuNTMzbC0xLjc2MywxLjM3OQ0KCQkJQzIxLjIyNSwxNC40NTQsMjEuMjUsMTQuNzI1%0D%0ALDIxLjI1LDE1eiIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJDYXBhXzIiPg0KCTxwYXRoIGZpbGw9%0D%0AIiNGRkZGRkYiIGQ9Ik0wLDB2MzBoMzBWMEgweiBNMjAuODMzLDE1LjQxN3Y2LjY2NmgtNC4xNjZ2%0D%0ALTVoLTMuMzMzdjVIOS4xNjd2LTYuNjY2aC0yLjVMMTUsNy45MTdsOC4zMzMsNy41SDIwLjgzM3oi%0D%0ALz4NCjwvZz4NCjxnIGlkPSJDYXBhXzMiIGRpc3BsYXk9Im5vbmUiPg0KCTxnIGRpc3BsYXk9Imlu%0D%0AbGluZSI+DQoJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNSw3Yy00LjQxLDAtOCwzLjU5MS04%0D%0ALDhjMCw0LjQxMSwzLjU5LDgsOCw4YzQuNDEsMCw4LTMuNTg5LDgtOEMyMywxMC41OTEsMTkuNDEs%0D%0ANywxNSw3eiBNMjAsMTZoLTR2NGgtMg0KCQkJdi00aC00di0yaDR2LTRoMnY0aDRWMTZ6Ii8+DQoJ%0D%0ACTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDB2MzBoMzBWMEgweiBNMTUsMjVDOS40NzUsMjUs%0D%0ANSwyMC41MjUsNSwxNUM1LDkuNDc1LDkuNDc1LDUsMTUsNWM1LjUyNSwwLDEwLDQuNDc1LDEwLDEw%0D%0ADQoJCQlDMjUsMjAuNTI1LDIwLjUyNSwyNSwxNSwyNXoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4N%0D%0ACg==" alt="Icon" class="menu__icon">
	</div>

	<div class="menu__bg big">
		<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBB%0D%0AZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9u%0D%0AOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBT%0D%0AVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzEx%0D%0ALmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAv%0D%0Ac3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5%0D%0APSIwcHgiIHdpZHRoPSIzMHB4Ig0KCSBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9IjAgMCAzMCAzMCIg%0D%0AZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzAgMzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0K%0D%0APGcgaWQ9IkNhcGFfMSIgZGlzcGxheT0ibm9uZSI+DQoJPGcgZGlzcGxheT0iaW5saW5lIj4NCgkJ%0D%0APGNpcmNsZSBmaWxsPSIjRkZGRkZGIiBjeD0iMTUiIGN5PSIxNSIgcj0iMi45MTciLz4NCgkJPHBh%0D%0AdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTAsMHYzMGgzMFYwSDB6IE0yMS4yNSwxNWMwLDAuMjc1LTAu%0D%0AMDI1LDAuNTQ2LTAuMDU5LDAuODEzbDEuNzU5LDEuMzc5YzAuMTU4LDAuMTMsMC4yMDQsMC4zNTQs%0D%0AMC4xLDAuNTMzDQoJCQlsLTEuNjY2LDIuODg5Yy0wLjEwNCwwLjE3OS0wLjMyMSwwLjI0OS0wLjUw%0D%0AOSwwLjE3OUwxOC44LDE5Ljk1NGMtMC40MjksMC4zMzMtMC44OTksMC42MDgtMS40MDgsMC44Mmwt%0D%0AMC4zMTMsMi4yMDkNCgkJCWMtMC4wMzMsMC4xOTUtMC4yMDQsMC4zNS0wLjQxMywwLjM1aC0zLjMz%0D%0AM2MtMC4yMDgsMC0wLjM3OS0wLjE1NC0wLjQxMy0wLjM1bC0wLjMxMy0yLjIwOWMtMC41MDgtMC4y%0D%0AMTItMC45NzktMC40OTEtMS40MDgtMC44Mg0KCQkJbC0yLjA3NSwwLjgzOGMtMC4xODgsMC4wNzUt%0D%0AMC40MDQsMC0wLjUwOC0wLjE3OUw2Ljk1LDE3LjcyNWMtMC4xMDQtMC4xODQtMC4wNTktMC40MDgs%0D%0AMC4xLTAuNTMzbDEuNzU5LTEuMzc5DQoJCQlDOC43NzUsMTUuNTQ2LDguNzUsMTUuMjc1LDguNzUs%0D%0AMTVjMC0wLjI3NSwwLjAyNS0wLjU0NiwwLjA1OS0wLjgxM0w3LjA1LDEyLjgwOGMtMC4xNTgtMC4x%0D%0AMjktMC4yMDQtMC4zNTQtMC4xLTAuNTMzbDEuNjY3LTIuODg4DQoJCQljMC4xMDQtMC4xNzksMC4z%0D%0AMjEtMC4yNSwwLjUwOC0wLjE3OWwyLjA3NSwwLjgzN2MwLjQyOS0wLjMzMywwLjktMC42MDgsMS40%0D%0AMDgtMC44MjFsMC4zMTMtMi4yMDgNCgkJCWMwLjAzMy0wLjE5NiwwLjIwNC0wLjM1LDAuNDEzLTAu%0D%0AMzVoMy4zMzNjMC4yMDksMCwwLjM4LDAuMTU0LDAuNDE3LDAuMzVsMC4zMTMsMi4yMDhjMC41MDks%0D%0AMC4yMTIsMC45NzksMC40OTIsMS40MDgsMC44MjENCgkJCWwyLjA3NS0wLjgzN2MwLjE4OC0wLjA3%0D%0ANSwwLjQwNCwwLDAuNTA5LDAuMTc5bDEuNjY3LDIuODg4YzAuMTA0LDAuMTg0LDAuMDU5LDAuNDA4%0D%0ALTAuMTAxLDAuNTMzbC0xLjc2MywxLjM3OQ0KCQkJQzIxLjIyNSwxNC40NTQsMjEuMjUsMTQuNzI1%0D%0ALDIxLjI1LDE1eiIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJDYXBhXzIiIGRpc3BsYXk9Im5vbmUi%0D%0APg0KCTxwYXRoIGRpc3BsYXk9ImlubGluZSIgZmlsbD0iI0ZGRkZGRiIgZD0iTTAsMHYzMGgzMFYw%0D%0ASDB6IE0yMC44MzMsMTUuNDE3djYuNjY2aC00LjE2NnYtNWgtMy4zMzN2NUg5LjE2N3YtNi42NjZo%0D%0ALTIuNUwxNSw3LjkxNw0KCQlsOC4zMzMsNy41SDIwLjgzM3oiLz4NCjwvZz4NCjxnIGlkPSJDYXBh%0D%0AXzMiPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTUuMDgzLDcuMDAxQzEwLjY3%0D%0AMiw2Ljk1Niw3LjA0NSwxMC41MSw3LDE0LjkxOXMzLjUxLDguMDM2LDcuOTE4LDguMDgxDQoJCQlj%0D%0ANC40MSwwLjA0NSw4LjAzNS0zLjUwOSw4LjA4LTcuOTE5QzIzLjA0MywxMC42NzMsMTkuNDkyLDcu%0D%0AMDQ2LDE1LjA4Myw3LjAwMXogTTE4LjUsMTUuN2gtMi44djIuOEgxNC4zdi0yLjhoLTIuOFYxNC4z%0D%0AaDIuOHYtMi44DQoJCQlIMTUuN3YyLjhoMi44VjE1Ljd6Ii8+DQoJCTxwYXRoIGZpbGw9IiNGRkZG%0D%0ARkYiIGQ9Ik0wLDB2MzBoMzBWMEgweiBNMTUsMjVDOS40NzUsMjUsNSwyMC41MjUsNSwxNUM1LDku%0D%0ANDc2LDkuNDc1LDUsMTUsNWM1LjUyNSwwLDEwLDQuNDc2LDEwLDEwDQoJCQlDMjUsMjAuNTI1LDIw%0D%0ALjUyNSwyNSwxNSwyNXoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==" alt="Icon" class="menu__icon big">
	</div>

	<div class="menu__bg">
		<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBB%0D%0AZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9u%0D%0AOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBT%0D%0AVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzEx%0D%0ALmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAv%0D%0Ac3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5%0D%0APSIwcHgiIHdpZHRoPSIzMHB4Ig0KCSBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9IjAgMCAzMCAzMCIg%0D%0AZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzAgMzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0K%0D%0APGcgaWQ9IkNhcGFfMSI+DQoJPGc+DQoJCTxjaXJjbGUgZmlsbD0iI0ZGRkZGRiIgY3g9IjE1IiBj%0D%0AeT0iMTUiIHI9IjIuOTE3Ii8+DQoJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDB2MzBoMzBW%0D%0AMEgweiBNMjEuMjUsMTVjMCwwLjI3NS0wLjAyNSwwLjU0Ni0wLjA1OSwwLjgxM2wxLjc1OSwxLjM3%0D%0AOWMwLjE1OCwwLjEzLDAuMjA0LDAuMzU0LDAuMSwwLjUzMw0KCQkJbC0xLjY2NiwyLjg4OWMtMC4x%0D%0AMDQsMC4xNzktMC4zMjEsMC4yNDktMC41MDksMC4xNzlMMTguOCwxOS45NTRjLTAuNDI5LDAuMzMz%0D%0ALTAuODk5LDAuNjA4LTEuNDA4LDAuODJsLTAuMzEzLDIuMjA5DQoJCQljLTAuMDMzLDAuMTk1LTAu%0D%0AMjA0LDAuMzUtMC40MTMsMC4zNWgtMy4zMzNjLTAuMjA4LDAtMC4zNzktMC4xNTQtMC40MTMtMC4z%0D%0ANWwtMC4zMTMtMi4yMDljLTAuNTA4LTAuMjEyLTAuOTc5LTAuNDkxLTEuNDA4LTAuODINCgkJCWwt%0D%0AMi4wNzUsMC44MzhjLTAuMTg4LDAuMDc1LTAuNDA0LDAtMC41MDgtMC4xNzlMNi45NSwxNy43MjVj%0D%0ALTAuMTA0LTAuMTg0LTAuMDU5LTAuNDA4LDAuMS0wLjUzM2wxLjc1OS0xLjM3OQ0KCQkJQzguNzc1%0D%0ALDE1LjU0Niw4Ljc1LDE1LjI3NSw4Ljc1LDE1YzAtMC4yNzUsMC4wMjUtMC41NDYsMC4wNTktMC44%0D%0AMTNMNy4wNSwxMi44MDhjLTAuMTU4LTAuMTI5LTAuMjA0LTAuMzU0LTAuMS0wLjUzM2wxLjY2Ny0y%0D%0ALjg4OA0KCQkJYzAuMTA0LTAuMTc5LDAuMzIxLTAuMjUsMC41MDgtMC4xNzlsMi4wNzUsMC44Mzdj%0D%0AMC40MjktMC4zMzMsMC45LTAuNjA4LDEuNDA4LTAuODIxbDAuMzEzLTIuMjA4DQoJCQljMC4wMzMt%0D%0AMC4xOTYsMC4yMDQtMC4zNSwwLjQxMy0wLjM1aDMuMzMzYzAuMjA5LDAsMC4zOCwwLjE1NCwwLjQx%0D%0ANywwLjM1bDAuMzEzLDIuMjA4YzAuNTA5LDAuMjEyLDAuOTc5LDAuNDkyLDEuNDA4LDAuODIxDQoJ%0D%0ACQlsMi4wNzUtMC44MzdjMC4xODgtMC4wNzUsMC40MDQsMCwwLjUwOSwwLjE3OWwxLjY2NywyLjg4%0D%0AOGMwLjEwNCwwLjE4NCwwLjA1OSwwLjQwOC0wLjEwMSwwLjUzM2wtMS43NjMsMS4zNzkNCgkJCUMy%0D%0AMS4yMjUsMTQuNDU0LDIxLjI1LDE0LjcyNSwyMS4yNSwxNXoiLz4NCgk8L2c+DQo8L2c+DQo8ZyBp%0D%0AZD0iQ2FwYV8yIiBkaXNwbGF5PSJub25lIj4NCgk8cGF0aCBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9%0D%0AIiNGRkZGRkYiIGQ9Ik0wLDB2MzBoMzBWMEgweiBNMjAuODMzLDE1LjQxN3Y2LjY2NmgtNC4xNjZ2%0D%0ALTVoLTMuMzMzdjVIOS4xNjd2LTYuNjY2aC0yLjVMMTUsNy45MTcNCgkJbDguMzMzLDcuNUgyMC44%0D%0AMzN6Ii8+DQo8L2c+DQo8ZyBpZD0iQ2FwYV8zIiBkaXNwbGF5PSJub25lIj4NCgk8ZyBkaXNwbGF5%0D%0APSJpbmxpbmUiPg0KCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTUsN2MtNC40MSwwLTgsMy41%0D%0AOTEtOCw4YzAsNC40MTEsMy41OSw4LDgsOGM0LjQxLDAsOC0zLjU4OSw4LThDMjMsMTAuNTkxLDE5%0D%0ALjQxLDcsMTUsN3ogTTIwLDE2aC00djRoLTINCgkJCXYtNGgtNHYtMmg0di00aDJ2NGg0VjE2eiIv%0D%0APg0KCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMCwwdjMwaDMwVjBIMHogTTE1LDI1QzkuNDc1%0D%0ALDI1LDUsMjAuNTI1LDUsMTVDNSw5LjQ3NSw5LjQ3NSw1LDE1LDVjNS41MjUsMCwxMCw0LjQ3NSwx%0D%0AMCwxMA0KCQkJQzI1LDIwLjUyNSwyMC41MjUsMjUsMTUsMjV6Ii8+DQoJPC9nPg0KPC9nPg0KPC9z%0D%0Admc+DQo=" alt="Icon" class="menu__icon">
	</div>
</nav>
</body>
</html>

5. By Simone Pizzamiglio

Made by Simone Pizzamiglio. Burger Mobile Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
.mobile-menu {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  top: 0;
  background-color: #27ae60;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 9999999;
}
.mobile-menu__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 30px;
  cursor: pointer;
  transition: 0.4s;
}
.mobile-menu__icon {
  display: block;
  position: relative;
  background: white;
  width: 90%;
  height: 4px;
  transition: 0.4s;
}
.mobile-menu__icon::after, .mobile-menu__icon::before {
  content: "";
  display: block;
  position: absolute;
  background: white;
  width: 100%;
  height: 4px;
  transition: 0.4s;
}
.mobile-menu__icon::after {
  top: 8px;
}
.mobile-menu__icon::before {
  top: -8px;
}
.mobile-menu__container {
  position: fixed;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 999;
  height: 0;
  opacity: 1;
  transition: 0.5s;
  transition-delay: 0.2s;
  overflow: hidden;
  background-color: #27ae60;
}
.mobile-menu__list {
  transition: 0.5s;
  transition-delay: 0.5s;
  list-style: none;
  padding-left: 0;
  margin-top: -50px;
}
.mobile-menu__item {
  font-size: 26px;
  padding-bottom: 15px;
}
.mobile-menu__link {
  text-decoration: none;
  color: #fff;
}
.mobile-menu__checkbox {
  display: none;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__nav {
  opacity: 1;
  transition-delay: 0s;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__container {
  height: 100%;
  transition-delay: 0s;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon {
  background: transparent;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before, .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  top: 0;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
</style>
</head>
<body>
  <nav class="mobile-menu">
    <input type="checkbox" id="checkbox" class="mobile-menu__checkbox">
    <label for="checkbox" class="mobile-menu__btn"><div class="mobile-menu__icon"></div></label>
    <div class="mobile-menu__container">
    <ul class="mobile-menu__list">
        <li class="mobile-menu__item"><a href="#" class="mobile-menu__link">Home</a></li>
        <li class="mobile-menu__item"><a href="#" class="mobile-menu__link">About us</a></li>
        <li class="mobile-menu__item"><a href="#" class="mobile-menu__link">Work</a></li>
        <li class="mobile-menu__item"><a href="#" class="mobile-menu__link">Contacts</a></li>
    </ul>
    </div>
</nav>
</body>
</html>

6. By Daniel Hearn

Made by Daniel Hearn. Basic Mobile Menu Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
body {
  background: #87cc77;
  margin: 0;
  font-family: arial;
  width: 100vw;
  height: 100vh;
  animation: bugfix infinite 1s;
  -webkit-animation: bugfix infinite 1s;
}

@keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
#overlay-button {
  position: absolute;
  right: 2em;
  top: 3em;
  padding: 26px 11px;
  z-index: 5;
  cursor: pointer;
  user-select: none;
}
#overlay-button span {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: white;
  position: relative;
  display: block;
  transition: all 0.2s ease-in-out;
}
#overlay-button span:before {
  top: -10px;
  visibility: visible;
}
#overlay-button span:after {
  top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  content: "";
  transition: all 0.2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
  background: #333332;
}

input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked ~ #overlay {
  visibility: visible;
}
input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
  background: transparent;
}
input[type=checkbox]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(7px, 7px);
  opacity: 1;
}
input[type=checkbox]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);
}

#overlay {
  height: 100vh;
  width: 100vw;
  background: #ec6451;
  z-index: 2;
  visibility: hidden;
  position: fixed;
}
#overlay.active {
  visibility: visible;
}
#overlay ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 100vh;
  padding-left: 0;
  list-style-type: none;
}
#overlay ul li {
  padding: 1em;
}
#overlay ul li a {
  color: white;
  text-decoration: none;
  font-size: 1.5em;
}
#overlay ul li a:hover {
  color: #333332;
}
</style>
</head>
  <body>
<input type="checkbox" id="overlay-input" />
<label for="overlay-input" id="overlay-button"><span></span></label>
  <div id="overlay">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</body>
</html>

7. By Mark E. Carter

Made by Mark E. Carter. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
<style>
@font-face {
  font-family: 'News Cycle';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/newscycle/v22/CSR64z1Qlv-GDxkbKVQ_fOAKSA.ttf) format('truetype');
}
@font-face {
  font-family: 'News Cycle';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/newscycle/v22/CSR54z1Qlv-GDxkbKVQ_dFsvWNRevA.ttf) format('truetype');
}
html,
body {
  height: 100%;
}
body {
  background: #d4e8f8;
  color: #444;
  font-family: 'News Cycle';
  overflow-x: hidden;
}
#nav-toggle {
  position: absolute;
  left: -9999px;
}
nav {
  position: fixed;
  top: 0;
  left: -80%;
  width: 80%;
  height: 100%;
  background: #222;
  transition: transform 0.5s;
}
nav #toggle {
  display: block;
  position: absolute;
  top: 0;
  right: -40px;
  width: 40px;
  height: 40px;
  background: #333;
  color: #fff;
  text-align: center;
  line-height: 36px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.5s, right 0.5s;
}
nav #toggle:before {
  content: '\2630';
}
nav #toggle:hover {
  background: #169;
}
nav ul {
  height: 100%;
  border-right: 40px solid #333;
}
nav ul li {
  font-size: 28px;
  text-transform: uppercase;
  background: #444;
  border-top: 1px solid #555;
  border-bottom: 1px solid #333;
}
nav ul li a {
  display: block;
  padding: 20px 30px;
  color: #fff;
  text-decoration: none;
}
nav ul li:hover {
  background: #555;
  border-top: 1px solid #666;
}
#nav-toggle:checked ~ nav {
  transform: translate3d(100%, 0, 0);
}
#nav-toggle:checked ~ nav #toggle {
  right: 0;
  font-size: 28px;
}
#nav-toggle:checked ~ nav #toggle:before {
  content: '\00D7';
}
#nav-toggle:checked ~ nav ~ #main {
  transform: translate3d(90%, 0, 0);
}
#main {
  width: 75%;
  margin: 0 auto;
  padding: 40px 5%;
  transition: transform 0.5s;
}
h1 {
  font-weight: bold;
  font-size: 48px;
  margin-bottom: 8px;
  color: #333;
  text-shadow: 1px 1px 0 #fff;
}
p {
  margin-bottom: 20px;
}
</style>
</head>
<body>
  <input type="checkbox" id="nav-toggle">
<nav>
  <label for="nav-toggle" id="toggle"></label>
  <ul>
    <li><a href="#">Search</a></li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Feed</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<div id="main">
  <h1>Pure CSS Mobile Menu</h1>
  <p>Using only CSS, we have mobile menu</p>
</div>
</body>
</html>