Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a hamburger menu animation. To create this animation we will use HTML and CSS, No need to JavaScript. We do not make use of any images, icons or external libraries and plugins to create this animation.
As I have mentioned in my tutorials before, this kind of complicated animation hardly finds application in real-world projects. However, they are a fun way to learn and explore new CSS properties.
Clicking on the menu icon will smoothly transform the classic three-line icon into a cross (X). This is a toggle animation. It can be used for responsive navigation. This effect is usually created using CSS transition, transform and input check box.
Project Folder Structure:
Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘Hamburger Menu’. Inside this folder, we have two files. These files are – index.html and style.css. The first file is the HTML document while the second one is the stylesheet.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hamburger🍔 Menu | Codehemu</title>
<link href="https://www.codehemu.com/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-container">
<nav role="navigation">
<div id="menu-toggle-control">
<input type="checkbox" id="menu-checkbox">
<div class="hamburger-icon">
<span></span>
<span></span>
<span></span>
</div>
<ul id="slide-menu">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li>
<a href="https://www.codehemu.com/" target="_blank">Show more</a>
</li>
</ul>
</div>
</nav>
<div class="menu-title-wrap"><h2>CSS Hamburger🍔 Menu</h2></div>
</div>
</header>
<div class="content-container">
<p>Welcome to the CodeHemu(codehemu.com) - a creative learning hub
for aspiring web developers and browser extension creators.
Your number one source for HTML, CSS and Javascript Tutorials.
CodeHemu is committed to providing you quick and simple
yet efficient coding tutorials. Started in 10 March 2017 as a
youtube channel with a small community we have grown to have
more than 2k Subscribers in a year.</p>
<p>CodeHemu(codehemu.com)에 오신 것을 환영합니다. 웹 개발자 지망생과
브라우저 확장 프로그램 제작자를 위한 창의적인 학습 허브입니다.
HTML, CSS, Javascript 튜토리얼을 위한 최고의 플랫폼입니다.
CodeHemu는 빠르고 간단하면서도 효율적인 코딩 튜토리얼을 제공하기
위해 최선을 다하고 있습니다. 2017년 3월 10일,
소규모 커뮤니티를 통해 유튜브 채널로 시작하여 1년 만에 2천 명이
넘는 구독자를 확보했습니다.</p>
<p>CodeHemu(codehemu.com)へようこそ。Web開発者やブラウザ拡張機能クリ
エイターを目指す方のためのクリエイティブな学習ハブです。
HTML、CSS、Javascriptチュートリアルのナンバーワンソースです。
CodeHemuは、迅速でシンプルでありながら効果的なコーディングチュー
トリアルを提供することに尽力しています。2017年3月10日に小規模な
コミュニティから始まったYouTubeチャンネルは、
1年で2,000人以上の登録者数を獲得するまでに成長しました。</p>
<p>CodeHemu(codehemu.com) - এ আপনাকে স্বাগতম - উচ্চাকাঙ্ক্ষী
ওয়েব ডেভেলপার এবং ব্রাউজার এক্সটেনশন নির্মাতাদের জন্য একটি সৃজনশীল
শিক্ষার কেন্দ্র। HTML, CSS এবং জাভাস্ক্রিপ্ট টিউটোরিয়ালের জন্য আপনার
এক নম্বর উৎস। CodeHemu আপনাকে দ্রুত এবং সহজ কিন্তু দক্ষ কোডিং
টিউটোরিয়াল প্রদান করতে প্রতিশ্রুতিবদ্ধ। 10 মার্চ 2017 সালে একটি ছোট
সম্প্রদায়ের সাথে একটি ইউটিউব চ্যানেল হিসাবে শুরু হয়েছিল,
আমরা এক বছরে 2k এরও বেশি সাবস্ক্রাইবার পেয়েছি।</p>
<p>कोडहेमू (codehemu.com) में आपका स्वागत है - महत्वाकांक्षी वेब
डेवलपर्स और ब्राउज़र एक्सटेंशन क्रिएटर्स के लिए एक रचनात्मक शिक्षण केंद्र।
HTML, CSS और जावास्क्रिप्ट ट्यूटोरियल्स के लिए आपका नंबर एक स्रोत। कोडहेमू
आपको त्वरित, सरल और कुशल कोडिंग ट्यूटोरियल प्रदान करने के लिए प्रतिबद्ध है।
10 मार्च 2017 को एक छोटे से समुदाय के साथ एक यूट्यूब चैनल के रूप में
शुरू हुए इस चैनल के एक साल में 2 हज़ार से ज़्यादा सब्सक्राइबर हो गए हैं।</p>
</div>
</body>
</html>
StyleSheet (CSS):
Next, we style the elements created by HTML to give them shape and add animation using CSS. Now copy the code provided to you below and paste it into your stylesheet.
* {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
position: absolute;
background: #ffffff;
color: #5b5b5b;
font-family: sans-serif;
}
p {
font-size: 17px;
line-height: 28px;
}
header {
position: relative;
float: left;
width: 100%;
margin: 0;
}
.header-container {
position: relative;
float: left;
width: 100%;
height: 60px;
background-color: #7a7a7a;
box-sizing: border-box;
padding: 0;
margin: 0;
border-bottom: 1px solid #7a7a7a;
}
.menu-title-wrap {
width: 100%;
text-align: left;
z-index: 15;
margin: 12px 75px;
}
.menu-title-wrap h2 {
margin: 0;
padding: 0;
float: none;
color: white;
}
nav {
position: absolute;
top: 0;
left: 0;
height: 60px;
color: #ffffff;
font-size: 16px;
font-weight: 600;
line-height: 60px;
text-align: center;
cursor: pointer;
z-index: 20;
padding: 0 20px;
}
.hamburger-icon {
margin-top: 15px;
}
#slide-menu {
position: absolute;
max-width: 400px;
width: 100vw;
min-height: 150vh;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
box-sizing: border-box;
overflow-y: auto;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.4, 0, 1, 1);
}
#menu-toggle-control input {
display: block;
width: 60px;
height: 60px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menu-toggle-control span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.4, 0, 1, 1),
background 0.5s cubic-bezier(0.4, 0, 1, 1), opacity 0.55s ease;
}
#menu-toggle-control .hamburger-icon span:first-child
{
transform-origin: 0% 0%;
}
#menu-toggle-control .hamburger-icon span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menu-toggle-control input:checked ~ .hamburger-icon span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menu-toggle-control input:checked ~ .hamburger-icon span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu-toggle-control input:checked ~ .hamburger-icon span:nth-last-child(1)
{
margin-top: -27px;
}
#menu-toggle-control input:checked ~ .hamburger-icon span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
margin-top: 15px;
}
#menu-toggle-control input:checked ~ ul
{
transform: none;
}
#slide-menu li a
{
padding: 10px 0;
font-size: 22px;
color: #5b5b5b;
text-decoration: none;
text-transform: uppercase;
}
#slide-menu li a:hover {
color: #00c3ff;
}
.content-container {
height: 100%;
margin: 100px;
}
That’s it for this tutorial. If you have any queries, suggestions or feedback you can comment below. Happy Coding!
إرسال تعليق