Soy nuevo en la codificación y estoy experimentando con un menú estilo hamburguesa.
Lo que he logrado: cuando el usuario hace clic en el ícono del menú de hamburguesas, cambia al ícono de cerrar.
Agregué una etiqueta de texto delante del ícono del menú de hamburguesas, pero el problema es que no sé cómo hacer que este texto cambie el ícono cuando se hace clic en él.
Si puede por favor asesorar sobre este asunto.
Muchas gracias
Saludos, Veaceslav
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css"> <!-- Font Awesome --> <link href="Fontawesome/css/all.css" type="text/css" rel="stylesheet"> <!-- Styles --> <link href="CSS/stylesheet.css" rel="stylesheet"> </head> <body> <!-- Header --> <header id="header" class="header d-flex align-items-center fixed-top"> <div class="container-fluid container-xl d-flex align-items-center justify-content-between"> <a href="index.html" class="logo d-flex align-items-center"><h1>Logo</h1></a> <div class="topnav" id="myTopnav"> <ul class="nav-links"> <input type="checkbox" id="checkbox_toggle"/> <label for="checkbox_toggle" class="hamburger"><span class="menu_text" onclick="changeIcon(fa-bars)">Menu</span> <i class="fa-solid fa-bars" onclick="changeIcon(this)"></i></label> <div class="menu"> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> </div> </ul> </div> </div> </header> <footer></footer> </body> <script src="Bootstrap/js/bootstrap.js"></script> <script src="JS/menu_icon_toggle.js"></script> </html>JS
let changeIcon = function(icon) { icon.classList.toggle('fa-xmark') }Puede modificar su función changeIcon como
let changeIcon = function () { document.getElementById("text_icon").classList.toggle("fa-xmark"); };Y etiquetar la etiqueta como
<label for="checkbox_toggle" class="hamburger"> <span id="menu_text_item" class="menu_text" onclick="changeIcon()" > Menu </span> <i class="fa-solid fa-bars" id="text_icon" onclick="changeIcon()"> </i> </label>al hacer clic en el texto/icono del menú no pasa nada, dentro de la función changeIcon puede acceder al nodo del icono usando document.getElementById y luego alternar la lista css