Menú desplegable CSS horizontal. Efecto dropdown. Ejemplo de código (float, display, position…) (CU01050D)

Resumen: Entrega nº50 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01050D

 

 

MENÚ DESPLEGABLE CSS

Aunque en muchas ocasiones la generación de efectos visuales relativamente complejos se hace mediante un lenguaje como javascript, vamos a comprobar como usando HTML y CSS podemos generar un menú desplegable atractivo y con un efecto visual muy interesante.

css

 

Vamos a diseñar un menú con 4 items principales. Cada item principal tiene subitems o subelementos. El esquema que define cuáles son los items principales y cuáles los subitems lo definimos a continuación.

Item principal

Subitems

Libros

Aprender a programar desde cero
Creación y administración web con Joomla       
Lenguaje de programación Java

Divulgación

Los 100 trucos de CSS

Preguntas frecuentes

 

Humor

Humor informático
Humor bases de datos
Humor programación
Humor universidad

 

 

Podemos comprobar que el primer item de menú o apartado tendrá tres subitems o subapartados. El segundo item tendrá un solo subitem. El tercer item no tendrá ningún subitem. El cuarto item tendrá cuatro subitems.

Cuando la página web cargue inicialmente mostraremos sólo los items principales del menú:

css menu desplegable

 

 

Cuando el usuario posicione el puntero del ratón sobre un elemento principal, aparecerá el menú desplegable con los subitems correspondientes. Por ejemplo al posicionarnos sobre el item “Libros” se verán los tres subitems correspondientes y se podrá elegir aquel que se desee:

css efecto dropdown

 

 

La idea general es la siguiente. En HTML se definen todos los items y subitems. Los items serán elementos li dentro de una lista ul. Los menús que se despliegan serán elementos ul que contienen elementos li y que a su vez están dentro de los elementos li del menú principal. Puede parecer un poco complicado, pero estudiando el código llegarás a entenderlo fácilmente.

Escribe este código HTML y comprueba su estructura. Hazte un esquema donde indiques qué elementos van quedando dentro de otros. Fíjate en los comentarios que hemos incluido, que te servirán de guía. Ten en cuenta que en el documento HTML no se define qué será visible al cargar la página y qué no será visible, ya que esto lo haremos a través de CSS.

<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilosCU01050D.css">
</head>

<body>
<div id="wrap"> <!--Caja contenedora-->
<h2>CSS-Menú desplegable</h2>
<p>aprenderaprogramar.com</p>
<ul id="navbar"> <!--Lista que define los elementos principales que se muestran siempre-->
<li><a href="http://aprenderaprogramar.com">Libros</a> <!--Item principal de menú-->
<ul> <!--Lista que define subitems de menú que se mostrarán sólo al posicionar el ratón sobre el item principal-->
<li><a href="http://aprenderaprogramar.com">Aprender a programar desde cero</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Creación y administración web con Joomla</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Lenguaje de programación Java</a></li> <!--SubItem de menú-->
</ul>
</li>
<li><a href="http://aprenderaprogramar.com">Divulgación</a> <!--Item principal de menú-->
<ul> <!--Lista que define subitems de menú que se mostrarán sólo al posicionar el ratón sobre el item principal-->
<li><a href="http://aprenderaprogramar.com">Los 100 trucos de CSS</a></li> <!--SubItem de menú-->
</ul>
</li>
<li><a href="http://aprenderaprogramar.com">Preguntas frecuentes</a></li><!--Item principal de menú-->
<li><a href="http://aprenderaprogramar.com">Humor</a> <!--Item principal de menú-->
<ul> <!--Lista que define subitems de menú que se mostrarán sólo al posicionar el ratón sobre el item principal-->
<li><a href="http://aprenderaprogramar.com">Humor informático</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Humor bases de datos</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Humor programación</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Humor universidad</a></li> <!--SubItem de menú-->
</ul>         
</li>
</ul>
<div class="limpiador"></div> <!--Explicado en apartados anteriores del curso-->
</div>
</body>
</html>

 

 

Escribe ahora el código CSS. Con los contenidos que hemos visto a lo largo del curso debes ser capaz de interpretar todas las instrucciones que aparecen en el mismo. Pon el nombre de archivo css adecuado. Ten en cuenta que en algunos navegadores, en especial en los más antiguos, es posible que no obtengas el resultado deseado.

/* Curso CSS estilos aprenderaprogramar.com*/
body {font: 62.5%/1.2 Arial, Helvetica, sans-serif; background-color: #eee; }
h2 {margin:0;}

/*Caja contenedora*/   
#wrap { font-size: 1.8em; width: 520px; padding: 20px;
        margin: 0 auto; /*Da lugar al centrado de la caja en el elemento superior body*/
        background-color: #fff;}

/* Estilos que crean el menú desplegable */
/*Eliminamos padding y margin que introducen navegadores por defecto en listas*/
#navbar { padding:0; margin:0; }

/*Elementos items principales de menú que se muestran siempre*/
#navbar li { list-style: none; float: left; margin:10px;}
   
#navbar li a {
   display: block; /* Usamos display block para poder aplicar propiedades de caja a links */
   padding: 3px 8px; background-color: #5e8ce9; color: #fff;
   text-decoration: none; }

/*Listas de subitems de menú*/   
#navbar li ul {
   display: none; /*La lista inicialmente no se muestra debido a display:none; */
   background-color: #69f;}
   
#navbar li:hover ul {
   font-size: 12px;
   display: block; /*Al situar el cursor sobre el item la lista de subitems pasa de display none a display block y se muestra*/
   position: absolute; /*Al desplegarse el submenú no ocupa espacio y no desplaza a otros elementos gracias a que establecemos position absolute*/
   margin: 0; padding: 0; /*Anulamos margin y padding que por defecto introducen navegadores*/
   }
#navbar li:hover li { float: none; } /*Anulamos el float left que define el elemento padre para que los subitems se muestren en vertical */
   
/*Creamos la apariencia de los subitems de menú, color de fondo, borde inferior, color de texto*/
#navbar li:hover li a { background-color: #69f; border-bottom: 1px solid #fff; color: #000; }

/*Creamos el efecto de cambio de color y aspecto cuando ponemos el puntero del ratón sobre un subitem de menú*/   
#navbar li li a:hover { background-color: #8db3ff; }
   
.limpiador{padding:0; border-style:none; clear:both; } /*Forzamos a la caja a mostrarse aún conteniendo elementos flotantes*/

 

 

Es importante que comprendas todo el código HTML y todo el código CSS que hemos utilizado.

Señalaremos algunos aspectos principales que se usan para generar el efecto de menú desplegable:

a) Las listas de subitems no se muestran inicialmente porque tienen establecida la propiedad display como “none”. Hacemos que se muestren cuando el usuario pone el ratón encima de un item principal indicando que la lista hija de ese elemento pase a tener su propiedad display como “block”.

b) Las listas de subitems no desplazan a otros elementos porque establecemos su propiedad position como “absolute”. El valor absolute permite que un elemento se desplace respecto al origen de coordenadas del primer elemento contenedor posicionado ó respecto a la esquina superior izquierda de la ventana de visualización; el resto de elementos actúan como si el elemento con position absolute no existiera, por lo que su espacio es ocupado por otros elementos. Nosotros no usamos absolute para crear un desplazamiento, pero sí nos aprovechamos de que da lugar a que no se ocupe espacio.

 

Además en este ejemplo utilizamos otras propiedades como float que ya hemos estudiado anteriormente en el curso y que aquí nos sirven para repasar y reafirmar conocimientos. Si estás siguiendo el curso y tienes dudas, consulta en los foros en http://aprenderaprogramar.com/foros.

Un aspecto que merece la pena comentar es cómo CSS introduce elementos que le permiten realizar tareas asemejables a las de un lenguaje de programación. En concreto, fíjate cómo la lógica del menú desplegable es de tipo condicional, una capacidad propia de los lenguajes de programación. En concreto, se trataría de ejecutar “Si el usuario tiene el ratón apuntando a un item de menú { Mostrar lista desplegable de subitems} sino { Mostrar sólo el item principal }”. No lo hemos expresado así, pero la lógica se aproxima a esto. Comentamos en su momento que CSS no es un lenguaje de programación, no obstante se entremezcla con éstos al escribirse embebidos unos lenguajes con otros, o tiene algunas analogías como la que estamos comentando que se asemeja a una operación lógica.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

SEPTIEMBRE - OCTUBRE 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. .NET, C#
5. JavaScript, jQuery
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación