Re create Apple's mobile drop-down menu

How to re-create Apple’s mobile menu

Raddy CSS, JavaScript, Uncategorised Leave a Comment

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;
}

Leave a Reply

Your email address will not be published. Required fields are marked *