Home > other >  Slide menu item down and up on click
Slide menu item down and up on click

Time：10-14

So I've created this burger menu:

function menuToggle() {
    var x = document.getElementById("burgerMenu");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
: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;
    /* (Default) Light Theme */
    --clr-bg-light: #E1E1E1;
    --clr-nav-activ-color-light: #3A3B41;
    --clr-nav-hover-color-light: #3A3B41;
    /* (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: 0% 12%;
}


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


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

.topnav-menu {
    /* Burger Menu Content*/
    width: 100%;
    overflow: hidden;
    padding: 0.09rem 0.30rem;
    background-color: darkblue;
}

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

.topnav-menu a {
    color: var(--clr-nav-color);
    text-align: center;
    padding: 0.09rem 0.30rem;
    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);
}
<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>
        <button type="button" class="dark-mode-toggle disp_mode nav-icon" id="dark-mode-toggle"></button>
        <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="display: none;">
    <ul>
        <li><a href="#item1">item1</a></li>
        <li><a href="#item2">item2</a></li>
        <li><a href="#item3">item3</a></li>
    </ul>
</div>

What I'm trying to de is to make this burger menu <ul> items, slideDown like this code, and it should also slide up on second click.

document.getElementById("button").addEventListener("click", function () {
    document.getElementById("wrapper").style.height = "240px";
});
#wrapper {
    transition:height 1s ease-out;
    height:0;
    overflow:hidden;
}
.slideMeDown {
    font-size:24px;
    background: #4679bd;
    color:white;
    width:50%;
    height:200px;
    padding:20px;
}
<button id="button">Click to slideDown!</button>
<div id="wrapper">
    <div class="slideMeDown">cool!</div>
</div>

How can this be achieved? I can't seem to make it work, when I try to merge these two codes together? And I dont know how to make it slide up, or it that just ease-in?

CodePudding user response：

You need to toggle the height of the element rather than the display css property. If you toggle from display: block; to display: none; you cannot use the transition property, because it's just siwtching from visible to invisible.

The logic behind your second snippet is that the div element is never hidden, rather they play with the height of the element. When the element height equals 0 it gives the illusion that it has disappeared but it has not.

When you toggle the height then you can add a transition to the change made by JS.

Note: overflow: hidden; is necessary to hide the content inside the element. If you don't use it, then the text inside will overflow the div element.

Try and review the following suggested fix

function menuToggle() {
    var list = document.getElementById("list");
    var listElements =  list.childElementCount; 
    var height = 30 * listElements;
    var x = document.getElementById("burgerMenu");
    if (x.style.height === "0px") {
        x.style.height = height   "px";
    } else {
        x.style.height = "0px";
    }
}
: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;
    /* (Default) Light Theme */
    --clr-bg-light: #E1E1E1;
    --clr-nav-activ-color-light: #3A3B41;
    --clr-nav-hover-color-light: #3A3B41;
    /* (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: 0% 12%;
}


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


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

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

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

.topnav-menu a {
    color: var(--clr-nav-color);
    text-align: center;
    padding: 0.09rem 0.30rem;
    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);
}
<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>
        <button type="button" class="dark-mode-toggle disp_mode nav-icon" id="dark-mode-toggle"></button>
        <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:0px;">
  <div style="padding-right:5px">
    <ul id="list">
        <li><a href="#item1">item1</a></li>
        <li><a href="#item2">item2</a></li>
        <li><a href="#item3">item3</a></li>
    </ul>
  </div>
</div>

CodePudding user response：

Try it

HTML Code:

<div class="topnav-menu">
    <ul>
        <li><a href="#item1">item1</a>
            <ul class="doropdownmenu">
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
                <li><a href="#">Submenu Item 3</a></li>
            </ul>
        </li>
        <li><a href="#item2">item2</a></li>
        <li><a href="#item3">item3</a></li>
    </ul>
</div>

CSS Code:

<style>
    .doropdownmenu{
        display: none;
    }
    .dropdownmenushow{
        display: block;
    }
</style>

jQuery Code:

jQuery(document).ready(function(){
  jQuery("#item1").click(function(){
    jQuery(".doropdownmenu").toggleClass("dropdownmenushow");
  });

});

Page link：https//www.codepudding.com/other/152403.html

Prev:How can I add class on main div if I checked the checkbox
Next:how to position my BS-CS and stars to the bottom
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding