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:
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
<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
/* 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;
}
*{
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í.
0 comentarios:
Publicar un comentario