Sencillo y atractivo menú desplegable creado con CSS y jQuery

Código completo para crear un sencillo y atractivo menú desplegable utilizando únicamente CSS y jQuery en un documento de HTML.

En esta oportunidad les voy a mostrar el código que utilicé para crear de manera sencilla un menú desplegable que (para mi gusto) luce presentable, atractivo y al mismo tiempo es bastante funcional.

Esta artículo va dirigido principalmente a todos aquellos programadores del team "frontend" con una base en el uso de HTML, CSS y jQuery, y al mismo tiempo, que están constantemente buscando diferentes maneras de hacer las cosas dentro de un mundo con abundantes códigos colgados en la red.

En este objetivo no voy a extender la explicación de lo que hace cada línea de código sino por el contrario, la intención principal es que puedan tomar el código de este menú desplegable y probarlo en sus proyectos personales para ampliar sus conocimientos sin perder mucho tiempo. Sin embargo, ofreceré de manera general lo que el código hace al interactuar el CSS y el jQuery con el HTML.

Puede echar un vistazo a la demostración antes de seguir con el artículo.

Creando un atractivo menú desplegable con CSS y jQuery

Lo primero que vamos hacer es solicitar una versión reciente de la biblioteca de jQuery.

Copie y pegue el siguiente código entre las etiquetas «HEAD».

Ahora vamos a llamar nuestro recurso "effectsjQ.js" que contiene la función "__effectsjQ__" y nos permitirá manejar diferentes efectos como: "show", "fade" y "slide".

Copie y pegue el siguiente código entre las etiquetas «HEAD».

El código jQuery ("__menu__v1.0.0_attractive_drop_down_menu_jQuery_CSS_.js") que permite toda la interacción del usuario con nuestra lista de elementos creada en el documento HTML.

Copie y pegue el siguiente código entre las etiquetas «HEAD».

Tome en cuenta que nuestro código requiere de un objeto literal para una configuración mínima mediante la variable cfg. El mismo se muestra de la siguiente manera:

const cfg = {
animation: {
effect: "slide",
delay: 100
}
,
errors: {
show: true
}
};

Donde "animation" tiene dos propiedades:

La propiedad "effect" define el tipo de animación entre las opciones "show", "fade" y "slide".
La propiedad "delay" especifica la velocidad de la animación en milisegundos.

Al mismo tiempo "errors" especifica si en la "consola" del navegador se imprimen ciertos errores como consecuencia de alguna mala implementación del código HTML, por ejemplo: si en un elemento del menú no se define dentro la etiqueta hiperenlace ("<a>") el atributo "href".

Cargando una fuente...

Si lo desea, puede hacer una llamada a su fuente preferida de Google Fonts. En nuestro caso utilizamos la siguiente:

Para nuestro estilo CSS usamos el siguiente código:

Copie y pegue el siguiente código entre las etiquetas «STYLE».

ol#menu {display:block;padding:0;width:100%;height:auto;background-color:#fff/*#ccc*/;color:#555;list-style:none;}
@media(min-width:651px) {
ol#menu li.parent {width:auto;text-align:center;}
ol#menu ul.submenu {display:none;position:absolute;top:65px;width:250px;z-index:9999;}
ol#menu ul.submenu li a {width:100%;}
}
@media(max-width:650px) {
ol#menu li.parent {width:100%;}
ol#menu ul.submenu {display:none;position:relative;width:100%;}
ol#menu ul.submenu li a {width:90%;}
}
ol#menu li.parent {display:inline-block;position:relative;margin:0;padding:10px;height:auto;vertical-align:top;box-sizing:border-box;}
ol#menu li.parent a {display:block;padding:10px 20px;background-color:#fff/*#ccc*/;box-sizing:border-box;border-bottom:2px solid /*#ccc*/#fff;color:#333;font-size:1.3em;text-decoration:none;cursor:pointer;}
ol#menu li.parent a:hover {border-bottom:2px solid #fd0a92;color:#000;}
ol#menu ul.submenu {margin:0;padding:20px 0;background-color:#eee;list-style:none;}
ol#menu ul.submenu li {margin:0;padding:0;}
ol#menu ul.submenu li a {margin:0;padding:10px 20px;background-color:#eee;border-bottom:2px solid #eee;box-sizing:border-box;color:#555;text-align:left;font-size:1em;text-decoration:none;cursor:pointer;}
ol#menu ul.submenu li a:hover {background-color:#ccc;border-left:2px solid #fd0a92 /*#0cedf0*/;border-bottom:2px solid #ccc;color:#000;}
ol#menu ul.submenu li ul {display:none;padding:0;list-style:none;}
ol#menu ul.submenu li ul a {padding:5px 30px;}
.corner-tr {-moz-border-radius-topright:40px;-webkit-border-top-right-radius:40px;-khtml-border-top-right-radius:40px;border-top-right-radius:40px;}
.corner-br {-moz-border-radius-bottomright:40px;-webkit-border-bottom-right-radius:40px;-khtml-border-bottom-right-radius:40px;border-bottom-right-radius:40px;}
.corner-all{-moz-border-radius-topleft:15px;-webkit-border-top-left-radius:15px;-khtml-border-top-left-radius:15px;border-top-left-radius:15px;-moz-border-radius-topright:15px;-webkit-border-top-right-radius:15px;-khtml-border-top-right-radius:15px;border-top-right-radius:15px;-moz-border-radius-bottomleft:15px;-webkit-border-bottom-left-radius:15px;-khtml-border-bottom-left-radius:15px;border-bottom-left-radius:15px;-moz-border-radius-bottomright:15px;-webkit-border-bottom-right-radius:15px;-khtml-border-bottom-right-radius:15px;border-bottom-right-radius:15px;}
.open{position:absolute;top:21%;left:4px;display:block;background-image:url('/demos/images/icon.svg');background-repeat:no-repeat;background-size:24px 24px;background-position:-12px 0;width:12px;height:auto;}
.close{position:absolute;top:21%;left:4px;display:block;background-image:url('/demos/images/icon.svg');background-repeat:no-repeat;background-size:24px 24px;background-position:0 0;width:12px;height:auto;}

Código HTML que presenta la lista del menú:

Por favor preste especial atención al ID "menu" ("#menu" o 'id="menu"'), así como a las clases "parent" (".parent" o 'class="parent"') y "submenu" (".submenu" o 'class="submenu"').

Copie y pegue el siguiente código entre las etiquetas «BODY».

<ol id="menu" class="corner-all">
<li class="parent"><a>Hosting Web</a>
<ul class="submenu corner-all">
<li><a class="corner-tr corner-br">Servidor Compartido</a>
<ul class="corner-bottom">
<li><a class="corner-tr corner-br" href="#OpcionSC1">Opcion SC 1</a></li>
<li><a class="corner-tr corner-br" href="#OpcionSC2">Opcion SC 2</a></li>
</ul>
</li>
<li><a class="corner-tr corner-br">Servidor VPS</a>
<ul class="corner-bottom">
<li><a class="corner-tr corner-br" href="#OpcionSVPS1">Opcion SVPS 1</a></li>
<li><a class="corner-tr corner-br" href="#OpcionSVPS2">Opcion SVPS 2</a></li>
<li><a class="corner-tr corner-br" href="#OpcionSVPS3">Opcion SVPS 3</a></li>
</ul>
</li>
<li><a class="corner-tr corner-br" href="#HostingDedicated">Servidor Dedicado</a></li>
</ul>
</li>
<li class="parent"><a>WordPress</a>
<ul class="submenu corner-all">
<li><a class="corner-tr corner-br" href="#Servidor WP">Servidor WP</a>
<ul class="corner-bottom">
<li><a class="corner-tr corner-br" href="#OcionSWP1">Opcion SWP 1</a></li>
</ul>
</li>
<li><a class="corner-tr corner-br" href="#WPDesign">Diseño WP</a></li>
<li><a class="corner-tr corner-br" href="#eCommerce">eCommerce</a>
<ul class="corner-bottom">
<li><a class="corner-tr corner-br" href="#OpcioneC1">Opcion eC 1</a></li>
<li><a class="corner-tr corner-br" href="#OpcioneC2">Opcion eC 2</a></li>
<li><a class="corner-tr corner-br" href="#OpcioneC3">Opcion eC 3</a></li>
</ul>
</li>
</ul>
</li>
<li class="parent"><a href="#Domains">Domains</a></li>
<li class="parent"><a href="#Affiliates">Affiliates</a></li>
<li class="parent"><a href="#Advices">Advices</a>
<ul class="submenu corner-all">
<li><a class="corner-tr corner-br" href="#Technology">Technology</a>
</ul>
</li>
</ol>

Si ya ha llegado hasta este punto del artículo es muy posible que quiera probar una vez más el código, y es por ello que te dejamos nuevamente la demo que resume toda la explicación en un solo archivo HTML, el cual puede detallar verificando el código fuente.

Consulta Lo+ Top de Lenguajes De Programación