Si estamos familiarizados con las etiquetas Html e incrementamos un poco nuestro conocimiento de Css nos podremos desenvolver con más facilidad.
Tratemos de hacer una barra de navegación superior con lo que ya vimos:
Ejemplo de barra de navegación
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi página</title>
<style>
* {
box-sizing: border-box;
}
table {
border-collapse: collapse;
}
h2 {
font-family: Helvetica;
}
.nav_tit {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
padding: 10px 0px;
width: 130px;
background-color: #eee;
cursor: pointer;
user-select: none;
}
.nav_tit:hover {
background-color: lightblue;
}
.nav_sub_tit {
background-color: #ddd;
}
.table_sub2 {
position: absolute;
}
.nav_sub_tit {
font-family: Arial;
padding: 10px 0px 10px 10px;
width: 130px;
}
.nav_sub_tit:hover {
background-color: #fafafa;
cursor: pointer;
user-select: none;
}
#div_mostrar_ev {
margin-top: 40px;
font-size: 18px;
}
</style>
<script>
function mostrar_submenu()
{
var el = document.getElementsByClassName("table_sub2")[0];
if (el.style.display == 'none')
{
el.style.display = 'block';
setTimeout(function(){document.addEventListener('click', ocultar_submenu);}, 50)
}
}
function ocultar_submenu()
{
var el = document.getElementsByClassName("table_sub2")[0];
if (el.style.display != 'none')
{
el.style.display = 'none';
}
document.removeEventListener('click', ocultar_submenu);
}
function mostrar_ev_click(el)
{
document.getElementById("div_mostrar_ev").innerHTML = "<i>Click en </i>" + el.innerText;
}
</script>
</head>
<body>
<h2 style="text-align: center;">Ejemplo de barra de navegación</h2>
<div align="center">
<table>
<tr>
<td class="nav_tit" onclick="mostrar_ev_click(this)">Título 1</td>
<td class="nav_tit" onclick="mostrar_submenu()">Título 2 ▾</td>
<td class="nav_tit" onclick="mostrar_ev_click(this)">Título 3</td>
</tr>
<tr>
<td></td>
<td>
<table class="table_sub2" style="display: none;">
<tr>
<td class="nav_sub_tit" onclick="mostrar_ev_click(this)">Subtítulo 1</td>
</tr>
<tr>
<td class="nav_sub_tit" onclick="mostrar_ev_click(this)">Subtítulo 2</td>
</tr>
<tr>
<td class="nav_sub_tit" onclick="mostrar_ev_click(this)">Subtítulo 3</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</div>
<div id="div_mostrar_ev"></div>
</body>
</html>
El submenú lo incluimos en la segunda celda de la segunda fila, para que quede alineado con la segunda celda de la primera fila. La tabla del submenú tiene definido un estilo position: absolute. Definiendo este estilo estamos sacando el elemento del flujo normal, lo cual resulta conveniente puesto que al mostrarlo u ocultarlo no afectará la renderización de la página, esto es, los demás elementos no se moverán. En el capítulo anterior mencionamos que la propiedad padding representaba la distancia en píxeles desde el borde del elemento al texto dentro del mismo. Al definir este estilo estamos aumentando el tamaño del elemento. Podemos evitar esto mediante la propiedad box-sizing: border-box, por la cual el ancho del elemento será el que definamos mediante la propiedad width. Para definir box-sizing usamos el selector universal "*", esto implica que estamos aplicando el estilo a todos los elementos de la página.
En cuanto a Javascript agregamos el atributo onclick a todas las celdas de la tabla (no así la que despliega el submenú) para que al hacer click nos muestre el texto del elemento desde el cuál clickeamos, para esto usamos la palabra reservada this, como vimos en el capítulo anterior, pasándosela como parámetro de la función mostrar_ev_click(this).
En cuanto a la función mostrar_submenu() primeramente obtenemos la referencia a la tabla del submenú. Como la misma no tiene id sino solamente tiene definido un nombre de clase, accedemos mediante el mismo. Al invocar el método getElementsByClassName("table_sub2") obtenemos una colección de todos los elementos que tienen como nombre de clase: "table_sub2", pero en la página hay un solo elemento con este nombre de clase. Entre corchetes indicamos el índice del elemento al que queremos acceder: 0 nos devuelve el primer elemento.
En el condicional verificamos si la propiedad display tiene valor igual a "none". Para verificar igualdad se usa doble signo de igual, puesto un solo signo significaría asignación. Si el valor es "none", cambiamos el valor de la propiedad display de la tabla a "block" para que se muestre como bloque. Luego usamos el método setTimeout, que es un método del objeto window y por lo tanto no es necesario acceder mediante: window.setTimeout. El mismo tiene dos parámetros: el primero es la función a ejecutar y el segundo es el lapso de tiempo que tardará en ejecutar la función (en milisegundos), en nuestro caso son 50 milisegundos.
El ejemplo anterior se ve así:
Título 1 | Título 2 ▾ | Título 3 |
← Anterior | Siguiente → |