Otro menú desplegable con CSS

Menú desplegable con CSS

Buenas, ahora en este tutorial vengo con un menú desplegable muy simple que usa algunas técnicas de CSS3 que lo hacen llamativo en algunos navegadores pero al que podemos modificar un poco para que funcione bien en cualquier navegador.

+Seleccione una opción del menú

• Suscripción Feeds RSS
• 998pow en Twitter
• Suscripción por E-Mail

El HTML no tiene muchos misterios; en un DIV con una clase a la que llamamos drop-menu, colocamos un SPAN que es lo que nos servirá para desplegar y contraer el menú que está en una lista ordenada:

<div class="drop-menu"> <span class="plus">+</span>Seleccione una opción del menú <ul class="sub-menu"> <li><a href="URL1"><img src="URL_imagen1"/>Texto enlace 1</a></li> <li><a href="URL2"><img src="URL_imagen2"/>Texto enlace 2</a></li> <li><a href="URL3"><img src="URL_imagen2"/>Texto enlace 3</a></li> </ul> </div>

Como siempre, la clave está en el CSS y allí hay muchas variantes. Este sería el necesario para realizar el ejemplo:

<style> .drop-menu { background-color: #242F3A; border: 1px solid #343F4A; cursor: pointer; display: block; font-family: Tahoma; font-size: 20px; height: 25px; letter-spacing: -1px; margin: 0 auto; max-height: 25px; padding: 10px; position: relative; text-align: left; width: 300px; z-index: 1000; } .plus { display: inline-block; font-family: Georgia; font-size: 22px; font-weight: bold; margin-right: 10px; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; } .drop-menu:hover {} .drop-menu:hover .sub-menu { display: inline-block; } .drop-menu:hover .plus { -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); } .sub-menu { background-color: #242F3A; background:image: -moz-linear-gradient(100% 100% 90deg, #000000, #242F3A); background-image: -webkit-gradient(linear, left bottom, left top, from(#000000), to(#242F3A)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF242F3A', EndColorStr='#FF000000'); border: 1px solid #343F4A; display: none; border-top: none; margin-left: -11px !important; margin-top: 5px; padding: 10px; width: 300px; } .sub-menu li { display: block; font-size: 20px; height: 22px; list-style-type: none; padding: 8px 0; } .sub-menu li img { margin-right: 10px; vertical-align: top; } .sub-menu li:hover {} .sub-menu a { color: #DDD; font-size: 20px; font-family: Tahoma } .sub-menu a:hover { color: #ABC; } </style>

1. ¿Te Gustó? → Síguenos en nuestra redes sociales. 
2. Comentar es Agradecer.

Dale me gusta :d a este gran post  

¡Compártelo!

Tweet