How to re-create Apple’s mobile menu
In this tutorial, you will learn how to re-creat Apple’s drop-down menu using HTML5, JS & CSS3. The menu is not identical, but super close to the original.
To centre the logo properly you might want to create three columns and centre align the logo in the middle.
If you have any questions please don’t hesitate to ask.
See the Pen Re-create Apple’s Mobile Menu by Radoslav Angelov (@Raddy) on CodePen.
Html + JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" media="all" href="/css/style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
</head>
<body>
<header>
<div class="row container">
<div class="col-6">
<div class="menu">
<a href="#">
<span>Menu</span>
</a>
</div>
</div>
<div class="col-6 logo">
<a href="#"><img src="images/logo.svg" alt="Logo"></a>
</div>
<ul class="dropdown">
<li><a href="#">Mac</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
</header>
<main>
<img src="/images/undraw_noted_pc9f.svg" alt="Undraw">
</main>
<script>
document.querySelector(".menu").addEventListener("click", toggleMenu);
let menuLink = document.querySelector(".menu a");
let dropDown = document.querySelector('ul.dropdown');
let header = document.querySelector("header");
let isOpen = 0;
function toggleMenu() {
if(isOpen == 0) {
menuLink.classList.toggle("active");
header.classList.add("black");
isOpen++;
}
else {
menuLink.classList.toggle("active");
header.classList.remove("black");
isOpen--;
}
}
</script>
</body>
</html>SCSS
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #fff;
color:#fff;
font-size: 17px;
font-family: 'Source Sans Pro', sans-serif;
}
.col-6 {
float: left;
text-align: left;
width: 50%;
}
.row::after {
content: "";
clear: both;
display: table;
}
img {
width: 100%;
height: auto;
max-width: 600px;
}
header{
max-width: 1920px;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1;
background: #313131;
height: 44px;
overflow: hidden;
transition: all 350ms ease-in;
&.black {
background-color: #000;
height: 400px;
}
.logo {
padding: 6px;
img {
max-width: 15.67px;
}
}
.container {
position: relative;
margin: 0 auto;
width: auto;
max-width: 1190px;
}
.menu {
position: relative;
padding: 18px 15px 0;
float: left;
a{
width: 20px;
height: 20px;
display: block;
position: relative;
span {
width: 100%;
position: absolute;
text-indent: -9999em;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
&:before, &:after {
content: '';
height: 1px;
background: #fff;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
&:after {
top: 6px;
}
}
&.active span {
background-color: transparent;
&:before {
transform: translateY(4px) translateX(1px) rotate(45deg);
}
&:after {
transform: translateY(-2px) translateX(1px) rotate(-45deg);
}
}
}
}
ul.dropdown {
width: 100%;
margin: 0;
list-style: none;
height: 0;
clear: both;
padding: 30px;
li {
width: 100%;
height: 44px;
a {
font-size: 1em;
color:#fff;
text-decoration: none;
}
}
li:not(:last-child) {
border-bottom: 1px solid #232323;
}
}
}
main {
text-align: center;
padding: 4em;
background-color: #FAFAFA;
}Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
Congrats! Loved it. Is it possible to add a line in the JS code in order to close the menu when a link is clicked?
The way I was looking at it is if you click on one of the links it will open another page and then the menu will be closed anyway. I guess you are doing a single page application?
Yes, Raddy! The menu link to different sections in the same page.
Maybe you can add an event listener to the dropdown like this:
document.getElementsByClassName(“dropdown”)[0].addEventListener(“click”, toggleMenu);
It worked!
document.querySelector(“.dropdown”).addEventListener(“click”, toggleMenu);
//document.getElementsByClassName(“dropdown”)[0].addEventListener(“click”, toggleMenu);
Thank you!
I am glad that it worked! Thank you for visiting my blog 🙂