Lenguaje de marcas. Menús desplegables

Antes un menú desplegable sólo podía realizarse con JavaScript, JQuery o similar. Ahora, con la nueva implantación de CSS (CSS3), es posible hacerlo sin necesidad de recurrir a ese lenguaje. Que bueno, también lo era antes, con CSS2, pero queda más guay decirlo así y pensar que CSS2 no daba la oportunidad. He dicho.

A lo que iba. La premisa básica para realizar éstas acciones es trabajar ocultando elementos. ¿Cómo?

Comenzaremos creando una lista de elementos. Un botón por ejemplo, o la simulación de un botón. A ese elemento le aplicaremos un atributo :hover para mostrar sus subelementos

Vamos a crear una lista

El archivo HTML es muy sencillito, trabajando con listas y dentro de los elementos de lista otras listas. ¿Habéis visto cuántas veces he repetido la palabra lista? Quizá sea falta de léxico...

<head>

<body>

El CSS lo aplicaremos por capas. Cada línea la he comentado para mayor comprensión del lenguaje:

El resultado que podemos ver es este:

Este código se ha ido haciendo en clase, con todos los compañeros juntos. No es la mejor elección de color, pero como ejemplo sirve.

Y pensaréis "ostias, y ¿todo eso tengo que escribirlo a mano para poder probar el código?". Tranquilos, si está to' pensao. A continuación os dejo tanto el código HTML como el CSS. Que lo disfrutéis.

Código HTML

<!DOCTYPE html>
<html>
<head>
<title>Menús desplegables html y css</title>
<meta charset="UTF-8">
<link href="estilo.css" type="text/css" rel="stylesheet" media="screen">
</head>

<body>
<nav>
<ul>
<li>Item1
<ul>
<li>Item1.1</li>
<li>Item1.2</li>
</ul>
</li>
<li>Item2
<ul>
<li>Item2.1</li>
<li>Item2.2
<ul>
<li>Item2.2.1</li>
<li>Item2.2.2</li>
</ul>
</li>
</ul>
</li>
<li>Item3
<ul>
<li>Item3.1
<ul>
<li>Item3.1.1</li>
<li>Item3.1.2</li>
</ul>
</li>
<li>Item3.2</li>
</ul>
</li>
<li>Item4</li>
<li>Item5</li>
</ul>
</nav>
</body>
</html>

Código CSS



Menús desplegables html y css






 
Item1
   
Item1.1
Item1.2


Item2
   
Item2.1
Item2.2
     
Item2.2.1
Item2.2.2




Item3
   
Item3.1
     
Item3.1.1
Item3.1.2


Item3.2


Item4
Item5

/* Aplicamos margin y padding a todos los elementos */
*{
margin: 0;
padding: 0;
}

/*Estilo a todos los li dentro del nav */
nav li{
list-style-type: none;
background-color: yellow;
border-style: solid;
border-width: 1px;
border-color: black;
color: black;
}
/* Los li hijos de los ul hijos del nav se presentarán a la izquierda */
nav > ul > li{
float: left;
}

/* Cuándo pasemos por los li dentro del nav se pondrán de color naranja */
nav li:hover{
color: orange;
}

/* Ordenamos los hijos li de los hijos ul de nav para ponerlos en una misma línea */
nav > ul > li{
margin: 5px;
display: inline;
}

/* Tamaño de los li que están dentro de los ul hijos */
nav > ul li{
min-width: 70px;
}

/* Posición fija y eliminar los símbolos de lista de los ul dentro de li dentro de un ul hijo de nav */
nav > ul li ul{
display: none;
position: absolute;
}

/* Mostrar el submenú cuando pasemos sobre el li correspondiente */
nav > ul li:hover > ul{
display: block;
}

/* Dar posición no fija a los ul dentro de li dentro de ul hijo de nav */
nav > ul li ul {
position: relative;
}

/* Alinear a la derecha del li seleccionado el submenú desplegable*/
nav > ul li ul li ul {
right: -70px;
position: absolute;
top: 0;
}

/* Aplicamos margin y padding a todos los elementos */
*{
 margin: 0;
 padding: 0;
}

/*Estilo a todos los li dentro del nav */
nav li{
   list-style-type: none;
   background-color: yellow;
   border-style: solid;
   border-width: 1px;
   border-color: black;
   color: black;
}
/* Los li hijos de los ul hijos del nav se presentarán a la izquierda */
nav > ul > li{
 float: left;
}

/* Cuándo pasemos por los li dentro del nav se pondrán de color naranja */
nav li:hover{
 color: orange;
}

/* Ordenamos los hijos li de los hijos ul de nav para ponerlos en una misma línea */
nav > ul > li{
   margin: 5px;
   display: inline;
}

/* Tamaño de los li que están dentro de los ul hijos */
nav > ul li{
 min-width: 70px;
}

/* Posición fija y eliminar los símbolos de lista de los ul dentro de li dentro de un ul hijo de nav */
nav > ul li ul{
 display: none;
 position: absolute;
}

/* Mostrar el submenú cuando pasemos sobre el li correspondiente */
nav > ul li:hover > ul{
 display: block;
}

/* Dar posición no fija a los ul dentro de li dentro de ul hijo de nav */
nav > ul li ul {
 position: relative;
}

/* Alinear a la derecha del li seleccionado el submenú desplegable*/
nav > ul li ul li ul {
 right: -70px;
 position: absolute;
 top: 0;
}

Si queréis visitar el tutorial que nos ha "inspirado" está aquí.

Programando a pasitos

No es un bug, es una característica no documentada

10/11/14

Lenguaje de marcas. Menús desplegables

0 comments:

Publicar un comentario