Recommand · October 14, 2021 0

Make a card burger menu dropdown

Okay so this is a bit of a longer code I’ve posted but I will try to explain what I’m trying to do here.

I have this burger menu icon to the right (three lines), and when these are clicked I want by items to slide down and be viewed like in this image

enter image description here

In my example you can see how I created the first part of it, but I don’t know how to make this part, since position: absolute; and so on makes it look wired, and it starts to float in the right corner. I know I still need to round the corners and make some shadows, but that not the hard part. I’ve seen people using <nav> tags with <divs> inside instead of the way I do it with div outside and <ul> lists inside, but is that better or can this still be done, and how?

Example

function menuToggle() {
    var list = document.getElementById("list");
    var listElements = list.childElementCount;
    var height = 1.5 * listElements;
    var x = document.getElementById("burgerMenu");
    if (x.style.height === "0rem") {
        x.style.height = height + "rem";
    } else {
        x.style.height = "0rem";
    }
}
:root {
    /* Static Colors*/
    --clr-heading-footer: #4C5BA0;
    --clr-button: #4C5BA0;
    --clr-nav-color: #8D90A1;
    /* Dark Theme */
    --clr-bg-dark: #2F2F35;
    --clr-card-bg-dark: #3A3B41;
    --clr-card-body-text-dark: #8D90A1;
    --clr-card-title-text-dark: #D3D3D9;
    --clr-nav-activ-color-dark: #D3D3D9;
    --clr-nav-hover-color-dark: #D3D3D9;
    --dark-moon: url("../images/svg/dark_moon.svg") center no-repeat;
    --dark-hover-moon: url("../images/svg/dark_moon_hover.svg") center no-repeat;
    /* (Default) Light Theme */
    --clr-bg-light: #E1E1E1;
    --clr-card-bg-light: #F3F3F3;
    --clr-nav-activ-color-light: #3A3B41;
    --clr-nav-hover-color-light: #3A3B41;
    --light-sun: url("../images/svg/light_sun.svg") center no-repeat;
    --light-hover-sun: url("../images/svg/light_sun_hover.svg") center no-repeat;
    /* (Default) Set Colors */
    --foreground: var(--clr-bg-dark);
    --background: var(--clr-bg-light);
    --activ-mode-icon: var(--light-sun);
    --activ-hover-mode-icon: var(--light-hover-sun);
    --selected-nav-page: var(--clr-nav-activ-color-light);
    --hover-nav: var(--clr-nav-hover-color-light);
    /* (Default) Page Settings */
    height: 100%;
    font-family: 'Montserrat';
    padding: 2% 12%;
    --speed: .3s;
}

.darkmodescss {
    /* Used as classList.add('darkmodescss') by js/toggletheme.js
    Replaces the (Default) Light Theme parameters with Dark Theme */
    --foreground: var(--clr-bg-light);
    --background: var(--clr-bg-dark);
    --activ-mode-icon: var(--dark-moon);
    --activ-hover-mode-icon: var(--dark-hover-moon);
    --selected-nav-page: var(--clr-nav-activ-color-dark);
    --hover-nav: var(--clr-nav-hover-color-dark);
    --clr-icon-width: var(--clr-icon-width);
    --clr-icon-height: var(--clr-icon-height);
}

body {
    background: var(--background);
    color: var(--foreground);
}

.logo-style {
    /* Logo Style */
    font-style: normal;
    font-weight: bold;
    font-size: 2rem;
    line-height: 2.438rem;
    letter-spacing: 0.05em;
    color: #4C5BA0;
    margin: 0;
}


/*
    Navigation
*/

.topnav {
    overflow: hidden;
    background: none !important;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.topnav button {
    border: none;
    cursor: pointer;
}

.topnav a {
    color: var(--clr-nav-color);
    text-align: center;
    padding: 0.09rem 0.30rem;
    text-decoration: none;
    font-size: 1.063rem;
}

.topnav a:hover {
    color: var(--hover-nav);
}

.topnav a.active {
    color: var(--selected-nav-page);
}

.right-nav {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    align-items: center;
}

.nav-icon {
    /* Navigation Icon Sizing - SVG Only */
    width: 2em;
    height: 2em;
    padding: 0.09rem 0.15rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.disp_mode {
    /* (Default) Dark / Light Mode - Icon Handling */
    background: var(--activ-mode-icon) no-repeat;
}

.disp_mode:hover {
    /* (Hover) Dark / Light Mode - Icon Handling */
    background: var(--activ-hover-mode-icon) no-repeat;
}

.topnav-menu {
    /* Burger Menu Content*/
    width: 100%;
    overflow: hidden;
    transition: 1000ms;
    background-color: none;
    padding: 0;
}

.topnav-menu ul {
    /* Burger Menu Content*/
    float: right;
    margin: 0;
    list-style-type: none;
}

.topnav-menu a {
    color: var(--clr-nav-color);
    text-align: center;
    padding: 0.313rem 0.313rem;
    text-decoration: none;
    font-size: 1.063rem;
}

.topnav-menu a:hover {
    color: var(--hover-nav);
}

.topnav-menu a.active {
    color: var(--selected-nav-page);
}


/*
    Navigation Burger Menu
*/

.line-one {
    width: 1.875rem;
}

.line-two {
    width: 1.875rem;
}

.line-three {
    width: 1.875rem;
}

.burger-menu div {
    width: 1.875rem;
    height: 0.25rem;
    background-color: var(--clr-nav-color);
    margin: 0.313rem 0;
    border-radius: 1.563rem;
}

.burger-menu {
    width: 1.875rem;
}

.burger-menu:hover div {
    width: 1.875rem;
    background-color: var(--hover-nav);
}
<?php
    declare(strict_types=1);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Metrics</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
</head>
<body>
    <header>
        <div class="topnav">
            <div class="left-nav">
                <a href="#home"><p class="logo-style">Metrics</p></a>
            </div>
            <div class="right-nav">
                <a href="#home" class="active">Home</a>
                <a href="#archives">Archives</a>
                <a href="#coverage">Coverage</a>
                <a href="#burger-menu" class="burger-menu" onclick="menuToggle()">
                    <div class="line-one"></div>
                    <div class="line-two"></div>
                    <div class="line-three"></div>
                </a>
            </div>
        </div>
        <!-- Burger Menu Hidden By Default Untill menuToggle() is activated -->
        <div class="topnav-menu" id="burgerMenu" style="height:0rem;">
            <div>
                <ul id="list">
                    <li><a href="#item1">Overall sprint progress </a></li>
                    <li><a href="#item2">item2</a></li>
                    <li><a href="#login">Logout</a></li>
                </ul>
            </div>
        </div>
    </header>
</body>
</html>

I found another example where they made it in css, and it could probably also be done like that even though I can’t make it work?

Link to a CSS only dropdown