How to re-create Apple’s mobile menu

By Raddy in CSS JavaScript ·

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;
}
  1. Martinfdez ·
    5th May 2020 3:14 pm

    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?

    Reply
    • Raddy ·
      5th May 2020 4:45 pm

      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?

  2. Martinfdez ·
    5th May 2020 5:17 pm

    Yes, Raddy! The menu link to different sections in the same page.

    Reply
    • Raddy ·
      5th May 2020 9:02 pm

      Maybe you can add an event listener to the dropdown like this: document.getElementsByClassName("dropdown")[0].addEventListener("click", toggleMenu);

  3. Martinfdez ·
    6th May 2020 12:07 am

    It worked! document.querySelector(".dropdown").addEventListener("click", toggleMenu); //document.getElementsByClassName("dropdown")[0].addEventListener("click", toggleMenu); Thank you!

    Reply
    • Raddy ·
      6th May 2020 11:41 am

      I am glad that it worked! Thank you for visiting my blog :-)