Mobile Menu Design Using HTML & CSS (no Javascript)

Hello friends, welcome to our blogspot TECH WITH ANURAG and in this blog we are going to learn how to make Mobile Menu Design Using HTML & CSS in this blogger post.

This program(Mobile Menu Design Using HTML & CSS ) is for understanding mobile menu concept that how its look and work. first, on webpage a mobile interface is shows and three dot on the top bottom. when you click on the three dot a new menu bar is opened. This program is made with only HTML & CSS without any java script.

If any case you hard to understand what i try to explain. Please check our full content video tutorial on this program(Mobile Menu Design Using HTML & CSS ).

Video tutorial of Mobile Menu Design Using HTML & CSS

I hope you like this program and video tutorial😊

If you like this program(Mobile Menu Design Using HTML & CSS) and the video tutorial of this program and now you want to get source code of this program. Don't worry you easily get the source code of this program.

To get the source code you simply need to look down.

You might like this:

Mobile Menu Design Using HTML & CSS [SOURCE CODE]

To create this program easily. First, you need to create two files one HTML File and another one is CSS File and link the CSS file to HTML file. After creating all these files simply copy the source code and paste in your HTML and CSS file.

HTML FILE:

CSS FILE:

body{
			background-color: #f9f9f9;
			margin: 0;
			padding: 0;
		}
		a{
			text-decoration: none;
			color: #1E1E23;
			opacity: 1;
			font-size: 1.5em;
		}
		a:hove{
			color: blue;
		}
		ul{
			padding: 0;
			list-style: none;
		}
		.container{
			margin-top: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.phone{
			background-color: #36383f;
			border-radius: 40px;
			width: 300px;
			height: 600px;
			display: flex;
			justify-content:center;
			align-items: center;
			box-shadow: 30px 50px 100px #85888;
		}
		.content{
			border: 1px solid #36383f;
			border-radius: 20px;
			width: 94%;
			height: 91%;
			background-color: #1E1E23;
			overflow: hidden;
		}
		#menutoggle{
			display: flex;
			flex-direction: column;
			position: relative;
			top: 25px;
			left: 25px;
			z-index: 1;
			user-select: none;
		}
		#menutoggle input{
			display: flex;
			width: 40px;
			height: 32px;
			position: absolute;
			cursor: pointer;
			opacity: 0;
			z-index: 2;
		}
		#menutoggle span{
			display: flex;
			width: 29px;
			height: 2px;
			margin-bottom: 5px;
			position: relative;
			background-color: #ffffff;
			border-radius: 3px;
			z-index: 1;
			transform-origin: 5px 0px;
			transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,.05,1.0),opacity 0.55s ease;
		}
		#menutoggle span:first-child{
			transform-origin: 0% 0%;
		}
		#menutoggle span:nth-last-child(2){
			transform-origin: 0% 100%;
		}
		#menutoggle input:checked ~ span{
			opacity: 1;
			transform: rotate(45deg)translate(-3px,-1px);
			background-color: #36383f;
		}
		#menutoggle input:checked ~ span:nth-last-child(3){
			opacity: 0;
			transform: rotate(0deg)scale(0.2,0.2);
		}
		#menutoggle input:checked ~ span:nth-last-child(2){
			transform: rotate(-45deg)translate(0,-1px);
		}
		#menu{
			position: absolute;
			width: 180px;
			height: 400px;
			box-shadow: 0 0 10px #85888C;
			margin: -50px 0 0 -50px;
			padding: 50px;
			padding-top: 125px;
			background-color: #F5F6FA;
			transform-origin: 0% 0%;
			transform: translate(-100%,0);
			transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
		}
		#menu li{
			padding: 10px 0;
			transition-delay: 2s;
		}
		#menutoggle input:checked ~ ul{
			transform: none;
		}

Header Ads Widget

Mobile Menu Design Using HTML & CSS (no Javascript)

Post a Comment

0 Comments

Search This Blog

About Me

ads

Labels

Ads

Facebook

Popular Posts