Question 44827 in Html Question posted in
Some basic documentation can be found here.

javascript selector problem with tilde how to make it a vairable – Html

I would like to know if it’s possible et get this element in Javascript :

.side-menu:checked ~ nav

I’ve a burger menu using this selector to open it on mobile version, i try to close that menu when a link of it is clicked

my code :

<header class="header">
    <a href="#" class="logo"><img src="assets/img/brand.png" alt=""></a>
    <input class="side-menu" type="checkbox" id="side-menu" />
    <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
    <nav class="nav">
        <ul class="menu">
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Agenda</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

and the css file :

.side-menu {
    display: none;
}

/* Toggle menu icon */

.side-menu:checked ~ nav{
    max-height: 100%;
}

Any ideas ? I’m trying to change the max value to 0 checking the checkbox value but i have no idea how to do this. There is maybe a other solution using only css but as a beginner i haven’t find it
Thxs a lot

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finally it's work with this simple function on my links :

    function closeM() {
const someCheckbox = document.getElementById('side-menu');
someCheckbox.checked = false;
}

    Thanks you make me think on my problem


  2. 0

    You need to toggle a class on your DOM element using querySelector.

    When toggle, the CSS class gonna be active/inactive on your property and apply/remove the CSS effects.

    var side-menu = document.querySelector('.side-menu') // Using class
side-menu.classList.toggle('open-menu');

    and CSS:

    .open-menu{
    display: block;
    max-height: 100%;
    min-width: 20%;
}

    You can check the docs right here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search