EJEMPLO PAGINA WEB CON MENÚ SENCILLO
Los menús en HTML son elementos de navegación básicos para desarrollar un sitio web, un espacio donde albergamos varias páginas web. Para este caso desarrollamos 3 páginas anteriormente vistas página de ejemplo de imágenes, página de link con imágenes y página de ejemplo edición de texto.
Para los menús se utiliza una etiqueta denominada <nav> y una combinación de listados no ordenados.
Para el siguiente ejemplo crearemos una hoja de estilo CSS llamada menú.css el código es el siguiente:
.menu ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.menu a {
display: block;
padding: 0.5em;
background-color: #F9B53C;
text-decoration: none;
color: #191C26;
}
.menu a:hover {
background-color: #CC673B;
}
.menu ul li ul {
display: none;
}
.menu ul li a:hover + ul, .menu ul li ul:hover {
display: block;
}
Para llamar a esta hoja de estilos se ingresa la siguiente línea de comando en el encabezado <head>
<link rel="stylesheet" href="/menu.css">
En todos los menús es necesario utilizar el URL o la ubicación de la página web o recurso a enlazar esto se coloca en el atributo href de la etiqueta <a>, en los ejemplos se ven como “#”
Ejemplos
En los siguientes códigos vamos a editar tres menús uno con solamente texto simple, otro con texto con fuente y otro con imágenes
Texto simple
El código HTML que utilizaremos será el siguiente:
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/menu.css">
<title>Ejemplo de menu 1</title></head>
<body bgcolor="#cddf89">
<font size="6" color="#df7644" face="Tahoma">
Menú en formato texto
</font><br><br>
<nav class="menu">
<ul>
<li><a href="/urldelapagina">Inicio</a></li>
<li><a href="/ urldelapagina ">Pagina 1</a></li>
<li><a href="/ urldelapagina ">Pagina 2</a></li>
<li><a href="/ urldelapagina ">Pagina 3</a></li>
</ul>
</nav>
<br><br>
</body></html>
Menú Texto con fuente
Para este menú utilizamos la etiqueta Font después de la etiqueta <a> para que aplique el hipervínculo, Font puede ser configurado también con una hoja de estilos CSS.
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/menu.css">
<title>Ejemplo de menu 2</title></head>
<body bgcolor="#cddf89">
<font size="6" color="#df7644" face="Tahoma">
Menú en formato texto con font
</font><br><br>
<nav class="menu">
<ul>
<li><a href="#">
<font size="6" color="#0f6a9d" face="Comics Sans CM">
Inicio</font></a></li>
<li><a href="#"><font size="6" color="#1f6dfd" face="Comics Sans CM">
Pagina 1</font></a></li>
<li><a href="#"><font size="6" color="#df619d" face="Comics Sans CM">
Pagina 2</font></a></li>
<li><a href="#"><font size="6" color="#49029d" face="Comics Sans CM">
Pagina 3</font></a></li>
</ul>
</nav>
</body></html>
Menú con imágenes
Para este menú es necesario tener las imágenes de los botones del menú, se coloca la etiqueta <img> luego de la etiqueta <a> para que funcione el hipervínculo.
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/menu.css">
<title>Ejemplo de menu 3</title></head>
<body bgcolor="#cddf89">
<font size="8" color="#987644" face="Tahoma">
Menú con imágenes
</font><br><br>
<nav class="menu">
<ul>
<li><a href="#"><img src="/inicio.png" width="100" height="70"></a></li>
<li><a href="#"><img src="/pag1.png" width="100" height="70"></a></li>
<li><a href="#"><img src="/pag2.png" width="100" height="70"></a>
</li>
<li><a href="#"><img src="/pag3.png" width="100" height="70">
</a></li>
</ul>
</nav>
</body></html>
