Comment changer une class ?

Résolu/Fermé

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - Modifié le 21 nov. 2021 à 13:49
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - 29 nov. 2021 à 14:43

Bonjour à tous,

J'essaie d'adapter le "Side Navigation" de w3schools.com à ma webapplication...
Comme mes compétences en JavaScript sont très faibles, je n'arrive pas à faire
en sorte que mon "burger" qui me sert à ouvrir le menu latéral et pousse mon 'main'
devienne le burger qui me sert à fermer ce menu... La mécanique d'ouverture fonctionne
bien, la mécanique de fermeture aussi SI j'utilise ce lien :
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">X</a>
mais l'idée serait de changer la class de mon burger pour que je puisse me passer du lien
pour fermer ! (D'autant que j'ai beau lire la doc, je ne comprends pas javascript:void(0))

Voici les parties de mon code concernées :

    <div id="main">
        <body>
            <header>
                <div class="top-barre">
                    <div class="titre">CONSOLE DE GESTION</div>
                    <div class="sous-titre">Accueil</div>
                    <div class="burger" onclick="openNav()">
                        <div class="line1"></div>
                        <div class="line2"></div>
                        <div class="line3"></div>
                    </div>
                </div>
                <div id="mySidenav" class="sidenav">
                    <ul class="nav-links">
                        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">X</a>
                        <span>
                            <li class="active">Accueil</li>
                        </span>
                        <a href="clients.php">
                            <li>Clients</li>
                        </a>
                        <a href="contrats.php">
                            <li>Contrats</li>
                        </a>
                        <a href="tarifs.php">
                            <li>Tarifs</li>
                        </a>                        
                        <a href="deconnexion.php">
                            <li>Déconnexion</li>
                        </a>
                    </ul>
                </div>
            </header>
            <main>
                Lorem ipsum dolor sit amet. Qui magnam doloremque qui debitis magni
                nam enim numquam aut enim odit ex odio quis ut explicabo voluptas. Vel 
                voluptatum quibusdam a blanditiis voluptatem sed rerum facilis. Aut saepe
               deleniti ab voluptas reiciendis non facere beatae aut Quis debitis 33 mollitia
               porro ut enim sunt.
            </main>
        </body>
    </div>
    <!--  #############  S C R I P T S  J A V A  #######################-->
    <!--  ############# SCRIPT ANIMATION BURGER  #######################-->
    <script src="../js/burger.js"></script>
    <!--  ############# SCRIPT SIDE NAVIGATION W3SCHOOL ################-->
    <script type="text/javascript">
        /* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
        function openNav(){
            document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
        }
        /* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
        function closeNav(){
            document.getElementById("mySidenav").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
        }
    </script>

Merci d'avance pour votre aide !!!

A voir également:

Comment changer une class ?
Changer dns - Guide
Changer clavier qwerty en azerty - Guide
Changer carte graphique - Guide
Changer extension fichier - Guide
Changer wifi chromecast - Guide

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38364 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 décembre 2024 4 720
21 nov. 2021 à 14:45

bonjour
https://www.w3schools.com/howto/howto_js_toggle_class.asp

Réponse 2 / 2

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
21 nov. 2021 à 17:09

Merci Jordan, mais je me suis mal expliqué, ou plutôt je ne savais pas trop comment s'appelait ce que je cherchais... Après avoir farfouillé à droite et gauche j'ai trouvé comment régler mon
problème avec setAttribute :

<script type="text/javascript">
        /* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
        function openNav(){
            document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
            document.getElementById('burger').setAttribute('onclick', 'closeNav()');
        }
        /* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
        function closeNav(){
            document.getElementById("mySidenav").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
            document.getElementById('burger').setAttribute('onclick', 'openNav()');
        }
    </script>

D'ailleurs, à ce propos, je me demande s'il existe pas un site qui résume simplement
les différentes commandes JavaScript avec des fonctions de recherche pour trouver
ce genre de commande...

Narwaoudi
29 nov. 2021 à 06:20

Salut,
il existe plusieurs sites qui répertorient les fonctions et méthodes JavaScript à commencer par celui où vous avez été chercher le tuto (Menu => référence => JavaScript ) qui vont les classer par groupe d'objets(une notion/concept de programmation important):

https://www.w3schools.com/jsref/default.asp

Et chez un autre acteur actif du web et du JavaScript qui fait aussi office de manuel "officiel" à cet outil toujours en section "référence" :

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference

Côté programmation événementielle( exemple détecter et utiliser une fonction lors d'un clic ) il y a une section à part(c'est un gros morceau de la programmation et un autre concept à assimiler une fois la programmation objet comprise ) et la bonne façon de faire utilise .addEventListener()

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20 > Narwaoudi
29 nov. 2021 à 14:43

@Narwaoudi : Merci pour ces 2 sources d'infos très pratiques... Je me les enregistre en favoris !
J'ai l'impression que pour continuer à développer ma Web Application je ne vais pas avoir le choix que d'approfondir mes connaissances en JavaScript et que le PHP seul ne suffira plus... Je vais me pencher sur .addEventListener() donc !
;-)

Discussions similaires

Nvcontainers

Mettre Facebook Messenger en français

Changer l'orientation d'une seule diapo

Logiciel pour modifier les paroles d'une chanson