Open Menu dzosoft
Close Menu dzosoft

   TODO SOBRE INFORMÁTICA Y TECNOLOGÍA


                             




Hiding your face is not a solution!

Publish perfectly-optimized content in 1-click



 
 
 

Cómo crear un menú con css y javascript

 

 

Step 1

 

Cascading Style Sheets (CSS)

 
Usamos el archivo w3.css de w3school


<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


 

Step 2

 

Javascript

 
La primera función HideAll nos permite ocultar todo el menú (Menú1, Menú 2 y Menú3)
simplemente establezca className en vacío. Si queremos mostrar el menú, simplemente configure className en " w3-show ".


function HideAll() { var x; for(i=1;i<4;i++) { x = document.getElementById("Menu"+i); x.className = x.className.replace(" w3-show", ""); }
}

La función showMenu1 (igual que showMenu2 y showMenu3) muestra el menú (el div con id "Menu1")


function showMenu1() { HideAll(); var x = document.getElementById("Menu1"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } function showMenu2() { HideAll(); var x = document.getElementById("Menu2"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } function showMenu3() { HideAll(); var x = document.getElementById("Menu3"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } }


 

Step 3

 

HTML

 

<div class="w3-dropdown-click">
   <button onclick="showMenu1()" class="w3-button">Menu 1</button>
   <div id="Menu1" class="w3-dropdown-content w3-bar-block w3-animate-zoom">
       <a href="#" class="w3-bar-item w3-button">Link 1</a>
       <a href="#" class="w3-bar-item w3-button">Link 2</a>
       <a href="#" class="w3-bar-item w3-button">Link 3</a>
   </div>
   </div>
<div class="w3-dropdown-click">   
   <button onclick="showMenu2()" class="w3-button">Menu 2>/button>
   <div id="Menu2" class="w3-dropdown-content w3-bar-block w3-animate-zoom">
       <a href="#" class="w3-bar-item w3-button">Link 1>/a>
       <a href="#" class="w3-bar-item w3-button">Link 2>/a>
       <a href="#" class="w3-bar-item w3-button">Link 3>/a>
   </div>
</div>
<div class="w3-dropdown-click">   
   <button onclick="showMenu3()" class="w3-button">Menu 3>/button>
   <div id="Menu3" class="w3-dropdown-content w3-bar-block w3-animate-zoom">
       <a href="#" class="w3-bar-item w3-button">Link 1>/a>
       <a href="#" class="w3-bar-item w3-button">Link 2>/a>
       <a href="#" class="w3-bar-item w3-button">Link 3>/a>
   </div>
</div>



Descarga el ejemplo


¡Feliz codificación! 😇

También te puede interesar


Cómo podemos hacer animaciones solo con CSS

Cómo crear un menú horizontal en CSS

Cómo se redondea el radio del borde en CSS?

Cómo crear un formulario de registro con HTML y CSS

Cómo hacer un sitio web responsivo

Cómo crear efecto GLITCH con CSS

Como cambiar el estilo de las barras de desplazamiento

Cómo crear un efecto de enfoque al pasar el mouse usando CSS

Cómo crear un pie de página usando Bootstrap: tutorial y ejemplo


Leave comment
          

Guardar apodo y correo electrónico en este navegador para la próxima vez.



Cargando...     

Nord VPN