Bonjour, je crée un site et j'ai actuellement un menu déroulant vertical simple. Il n'est disponible uniquement lorsqu'on visite la version mobile du site. J'aimerais que lorsque je clique sur l'image du menu déroulant (trois petites barres empilées verticalement), elle change pour laisser place à une crois. Et inversement lorsqu'on reclique sur La Croix pour fermer le menu.

Merci d'avance.

Si tu es à l'aise avec le css: 

Tu peux trouver beaucoup d'exemple sur le net, meme en css pure mais le CSS va énormément se compliquer.

L'icone changera lorsqu'il aura la classe open.

#responsive-menu{
  position: relative;
  width: 24px;
  height: 16px;
  cursor: pointer;
}

#responsive-menu span {
  background: black;
  display: block;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 0;
  transition: .5s;
}

#responsive-menu span:nth-child(1) {top: 0;}
#responsive-menu span:nth-child(2) {top: 50%;}
#responsive-menu span:nth-child(3) {top: 100%;}

#responsive-menu.open span:nth-child(1) {transform: rotate(45deg); top: 50%;}
#responsive-menu.open span:nth-child(2) {opacity: 0;}
#responsive-menu.open span:nth-child(3) {transform: rotate(-45deg); top: 50%}

 et le html  

<div id="responsive-menu">
      <span></span>
      <span></span>
      <span></span>
    </div>

et le js: 

//Par menu j'entend l'icone du menu
const menu = document.querySelector('#responsive-menu');
menu.addEventListener('click', () => {
     menu.classList.toggle('open');
})

Lien vers codepen pour voir l'animation (c'est pas la plus sexy mais c'est simple) : https://codepen.io/KeiZ/pen/YomKQY

-
Edité par KeiZed 16 juillet 2019 à 8:34:12

J'ai essayé de suivre tes conseils et ton code, et l'adapter au mien, mais sans grande réussite. Je te donne mon code pour savoir s'il y a d'éventuelles erreurs.

HTML

<div id="main-nav">
	<span></span>
	<span></span>
	<span></span>
			<ul>
				<li><a href="index.php">Home</a></li>
				<li><a href="education.php">Education</a></li>
				<li><a href="work_experience.php">Work Experience</a></li>
				<li><a href="research_interests.php">Research Interests</a></li>
				<li><a href="personal.php">Personal</a></li>
				<li><a href="contact.php">Contact</a>
			</ul>
</div>

CSS

#main-nav
  {
    width: 45%;
    height:auto;
    font-size:15px;
    font-family: lmsans10;
    display: block;
    margin-left: 0;
    padding-left: 0;
    color: transparent;
    float: right;
    padding-top: 5px;
    padding-right: 20px;
    cursor: pointer;
    position: relative;
    border: 1px solid white;
  }

  #main-nav a
  {
    font-weight:bold;
    text-decoration:none;
    border-bottom: none;
    padding-left: 0;
  }

  #main-nav li, #main-nav ul
  {
    line-height:26px;
    width: 100%;
    padding-left: 0;
    padding-right: 20px;
    text-align: right;
  }

  #main-nav ul
  {
    padding-top: 10px;
    border: 1px solid white;
  }

  #main-nav li a
  {
    color: white;
  }

  #main-nav span {
  background: white;
  display: block;
  height: 2.7px;
  width: 17%;
  right: 0;
  transition: .5s;
  margin-top: 6px;
  position: right;
  margin-left: 83%;
  }

  #main-nav span:nth-child(1) {top: 0;}
  #main-nav span:nth-child(2) {top: 50%;}
  #main-nav span:nth-child(3) {top: 100%;}

  #main-nav.open span:nth-child(1) {transform: rotate(45deg); top: 50%;}
  #main-nav.open span:nth-child(2) {opacity: 0;}
  #main-nav.open span:nth-child(3) {transform: rotate(-45deg); top: 50%}

JS

const menu = document.querySelector('#main-nav');
menu.addEventListener('click', () => {
     menu.classList.toggle('open');
})

J'aimerais aussi que lorsque l'on cloque sur les 3 petites barres, non seulement elle se transforme en croix, mais qu'elles laissent afficher le menu (qui sera donc caché avant).

Merci

Ton icone doit resté indépendant du menu en lui meme: c'est un élément a part, le lien entre les éléments est géré par le js

j'ai mis a jour mon exemple: https://codepen.io/KeiZ/pen/GbVPRJ

on est d'accord que le js on l'intègre dans la meme page que le html? parce que je viens de mettre exactement ton code, mais ça ne marche pas..

tu peux le placer dans ton html mais a la fin, le mieux pour plus de lisibilité est de le faire dans un fichier externe que tu importe juste avantla fermeture de la balise body.

Verifie bien que le nom des classes correspondent en html et js et css

J'ai copié exactement ce que tu m'as dit d'écrire, mais ça ne fonctionne pas.. j'ai vérifié les classes, le js, le css le html, inclus le code en bas de page, mais toujours rien.