Inicio
Comentar
Imágenes
Webgae
Menú desplegable en la barra de navegación
HTML
Home
News
Desplegable ⇓
Link 1
Link 2
Link 3
Menú desplegable dentro de una barra de navegación
Haga clic en el enlace "Desplegable" para ver el menú desplegable.
CSS
.navbar { overflow: hidden; background-color: #333; font-family: Arial, Helvetica, sans-serif; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { cursor: pointer; font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus { background-color: red; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .show { display: block; }
JavaScript
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { var myDropdown = document.getElementById("myDropdown"); if (myDropdown.classList.contains('show')) { myDropdown.classList.remove('show'); } } }
Puede cambiar código para ver el resultado
Resultado ↓
No hay comentarios:
Publicar un comentario
Entrada más reciente
Entrada antigua
Inicio
Suscribirse a:
Enviar comentarios (Atom)
No hay comentarios:
Publicar un comentario