28112 sujets

CSS et mise en forme, CSS3

Mon code Javascript ne fonctionne pas, pourquoi ?

Bonjour à vous tous,

Actuellement, j'étudie la Flexbox et j'essaye de réaliser un menu responsive sans utiliser les listes <ul> et <li> mais les propriétés Flexbox. Je voudrais mettre un événement Javascript sur le bouton "MENU", quand je suis en mode affichage smartphone, pour fermer et ouvrir le menu mais je ne connais pas bien Javascript et évidemment ça ne fonctionne pas ce que j'ai fait. Quelqu'un pourrait debugger mon code Javascript ?

Merci pour votre aide et
que le code soit avec vous !

Voici le code HTML, CSS et Javascript :
<!DOCTYPE html>
<html lang="fr">

<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>Propriétés CSS Flexbox</title>
    <style>
        .menu-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: black;
        }

        .menu-item {
            color: white;
            padding: 1rem;
        }

        .menu-item:hover {
            background-color: white;
            color: black;
        }

        .menu-container::before {
            content: "MENU";
            display: none;
            color: white;
            cursor: pointer;
        }

        @media (max-width: 600px) {
            .menu-container {
                flex-wrap: wrap;
                justify-content: center;
            }

            .menu-item {
                flex-basis: 100%;
                text-align: center;
            }

            .menu-container::before {
                display: block;
                padding: 1rem;
            }
        }
    </style>
</head>

<body>
    <nav class="menu-container">
        <a href="#" class="menu-item">Accueil</a>
        <a href="#" class="menu-item">A propos</a>
        <a href="#" class="menu-item">Services</a>
        <a href="#" class="menu-item">Contacts</a>
    </nav>

    <script>
        const menuButton = document.querySelector('.menu-container::before');
        const menuNav = document.querySelector('.menu-container');
        menuButton.addEventListener('click', () => {
            menuNav.classList.toggle('menu-open');
        });
    </script>
</body>

</html>

Voici le résultat en mode normal :
upload/1707807782-62242-capturedncran2024-02-13075016.png
Voici le résultat sur un écran smartphonne :
upload/1707807860-62242-capturedncran2024-02-13075057.png
Modifié par ObiJuanKenobi (13 Feb 2024 - 08:13)
Salut,

Considérons ceci :
document.querySelector('.menu-container::before')

Il faut savoir que JavaScript n'a pas accès aux pseudos éléments CSS. Donc il faut commencer par rectifier cela.

Tu l'aurais vu si tu avais testé le code, il faut donc absolument apprendre à déboguer le code, regarder ce qui se passe dans le terminal quand tu fais un console.log() sur une variable dont tu n'es pas sûr du contenu. Dans le cas contraire, tu pourras toujours trouver des bouts de code sur internet pour te dépanner, les faire éventuellement marcher quand ils sont exactement conformes à ce que tu veux, mais le problème c'est que cela sera toujours un petit peu "magique", tu ne comprendras pas réellement comment ça marche, même au bout de quelques années.

Donc, pour reprendre l'exemple de ta variable, juste après sa définition tu peux faire par exemple :
console.log(menuButton)

Le console.log() devrait te soulever une erreur.

La suite est donc de trouver un autre élément - réel cette fois ci - à cibler. A priori il n'y en a pas, il va donc falloir en créer un.
Modifié par Olivier C (13 Feb 2024 - 09:51)
Cela ne fonctionne toujours pas après des modifications, je nage vraiment dans la choucroute avec le Javascript ! Voilà mes modifications :
<body>
    <nav class="menu-container">
        <a href="#" class="menu-item">Accueil</a>
        <a href="#" class="menu-item">A propos</a>
        <a href="#" class="menu-item">Services</a>
        <a href="#" class="menu-item">Contacts</a>
        <div class="menu-toggle">MENU</div>
    </nav>

    <script>
        const menuToggle = document.querySelector('.menu-toggle');
        const menuNav = document.querySelector('.menu-container');
        menuToggle.addEventListener('click', () => {
            menuNav.classList.toggle('menu-open');
        });
    </script>
    
</body>

Modifié par ObiJuanKenobi (13 Feb 2024 - 10:20)
Modérateur
Bonjour,

Ton dernier code javascript marche très bien. Tu as bien pris en compte les remarques d'Olivier C. C'est dans le css qu'il faut faire des modifications maintenant (on n'a pas la dernière version, j'ai repris la seule qu'on a et je l'ai légèrement modifiée).

Par exemple:
.menu-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: black;
}
.menu-item {
	color: white;
	padding: 1rem;
}
.menu-item:hover {
	background-color: white;
	color: black;
}
.menu-toggle {
	content: "MENU";
	display: none;
	color: white;
	cursor: pointer;
}
@media (max-width: 600px) {
	.menu-container {
		flex-wrap: wrap;
		justify-content: center;
	}
	.menu-item {
		flex-basis: 100%;
		text-align: center;
		display:none;
	}
	.menu-open .menu-item
	{
		display:initial;
	}
	.menu-toggle {
		display:initial;
		padding: 1rem;
	}
}


Amicalement,
Prévenir un modérateur
Répondre au sujet
Aller à