Ajouter des elements

Ekim Kael
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

je voudrais construire et rajouter un menu en particulier en fonction d'une dimension avec JS avec window.matchMedia("(max-width: 551px)").matches probleme je ne sais pas comment rajouter tout un une grosse quantité de d'éléments.

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Menu Deroulant</title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <nav id="menu">
                </nav>

            <script>
                window.addEventListener('resize', function(){
                    var nav = document.querySelector('#menu');
                    if(window.matchMedia("(max-width: 551px)").matches){
                        var constructor = "<li><a href='#'>Item</a></li>"
                        /*
                        *C'est ici que je bloque
                        */
                    }else{
                        nav.classList.remove('mobile');
                        nav.classList.add('desktop');
                    }
                })
            </script>
            </body>
        </html>

Voici le menu que je voudrais rajouter :

<ul class="desktop">
                <li><a href="#">Brand</a></li>
                <li><a href="#un">Item</a>
                    <ul class="subitems" id="un">
                        <li><a href="#">SubItem</a></li>
                        <li><a href="#">SubItem</a></li>
                        <li><a href="#">Configuration</a</li>
                            </ul>
                        </li>
                        <li><a href="#deux">Item</a>
                            <ul class="subitems" id="deux">
                                <li><a href="#">SubItem</a></li>
                                <li><a href="#">SubItem</a></li>
                                <li><a href="#">Configuration</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>

un avec la classe mobile et avec la classe desktop
Comment puis-je faire.Merci d'avance

3 réponses

betaWeb

Salut,

Regarde du côté de la méthode createElement() : https://developer.mozilla.org/fr/docs/Web/API/Document/createElement

Lartak

Bonsoir.
Personnellement, je ne trouve pas logique la manipulation que tu veux faire, car l'orsque tu auras une modification à faire pour les éléments de ton menu, tu devras faire les modifications du côté javascript.
Soit tu utilises uniquement le CSS avec les medias queries pour changer l'affichage des éléments de ton menu, ou alors au niveau javascript tu ne fais que modifier la classe du ul pour la passer de desktop à mobile par exemple.

Ekim Kael
Auteur

@betaWeb j'y ai pensé mais je ne sais pas si tout les éléments que je veux mettre ça va aller

<ul class="desktop">
            <li><a href="#">Brand</a></li>
            <li><a href="#un">Item</a>
                <ul class="subitems" id="un">
                    <li><a href="#">SubItem</a></li>
                    <li><a href="#">SubItem</a></li>
                    <li><a href="#">Configuration</a</li>
                </ul>
            </li>
            <li><a href="#deux">Item</a>
                <ul class="subitems" id="deux">
                    <li><a href="#">SubItem</a></li>
                    <li><a href="#">SubItem</a></li>
                    <li><a href="#">Configuration</a></li>
                </ul>
            </li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>