Clase 1-I2

Clase
1
Tópico
HTML y CSS
Metas de comprensión
✓ Comprender la importancia en la elección de un menú para el diseño del sitio
✓ Los alumnos comprenderán las características de navegabilidad y usabilidad de un sitio web
a través de su menú.
✓ Los alumnos desarrollaran ejercicios para profundizar en los temas de la clase
Desempeño de Exploración
Los alumnos presentan sus dudas e inquietudes, profundizan los temas de la clase y proponen
ejercicios que implica una navegabilidad atractiva a partir de los menús vistos.
1
Un sitio web sin un buen sistema de navegación no puede considerarse, normalmente, como
un sitio completo. Lo bueno es que hoy día no necesitas recurrir a complejos sistemas para
conseguir menús vistosos, sino que unos simples trucos con CSS te permiten crear menús muy
buenos visualmente y, además, repletos de efectos como slides, verticales, horizontales, con
colores, iconos, etc.
¿Todo apunta a que tu página web se vea increíble? Uno de los elementos claves de que esto
suceda es cómo creaste tu menú.
Igual que las luces en una carretera, el menú ayuda a tus usuarios a saber por dónde navegar
y dónde encontrar lo que buscan. No importa en qué dirección se encuentre, si el menú es
horizontal o vertical, si es de desplazamiento o con íconos, lo que de verdad cuenta es que lleve
a tus visitantes a donde quieran llegar.
¡¡Por eso te aconsejo que no te pierdas los ejercicios de esta clase!!
2
Menues
Menú Horizontal
Los menús horizontales son una elección por defecto de casi todos los diseñadores ¡Y con
justa razón! Si estás buscando informar a tus usuarios sin necesidad de presentar un menú enredado
y complejo, esta es tu opción. Este menú es amigable y se encuentra en páginas web que van desde
blogs hasta navegadores. Este menú también será tu mejor opción si cuentas con muchos submenús
adentro de él, o demasiadas categorías.
Menú Vertical
Los menús verticales son cada vez más populares. Generalmente los encontrarás en el lado
izquierdo de la pantalla, y aportarán a tu página web un diseño más novedoso.
Son una elección muy popular entre los blogs, ya que dejan mucho espacio en el medio.
Si estás pensando en optar por el menú vertical, tienes que asegurarte de mantener los
nombres cortos.
Menú Fijo en el Encabezado
Si tienes una página larga de desplazamiento, con mucha información para tus usuarios,
entonces el menú fijo te vendrá como anillo al dedo. Este estilo fija el encabezado, permitiendo que
tus lectores puedan desplazarse tranquilamente por tu página web, sin perder de vista el menú.
Este estilo de menú ayuda a tus usuarios a encontrar lo que buscan de manera fácil y sin la
necesidad de hacer clic en demasiadas páginas. Ubica tu logo y datos de contacto en el menú.
Menú de Ancla
3
Los menús de ancla son la última moda. Estos menús flotantes son la combinación perfecta
para tu página de desplazamiento largo y para tu versión móvil, ya que les permitirán a tus usuarios
saltar de un lado a otro con un solo clic. Y como flotan, estarán siempre donde están tus usuarios.
Menú de Íconos
Mejor que escribir “Contáctanos” o “Página de Inicio” demuéstralo con imágenes. ¿Quieres
que tus usuarios pasen a visitar tu tienda online? Entonces puedes usar un ícono de un carrito de
compras para que sea más que obvio a dónde tienen que ir. Los menús de íconos son geniales para
hacer tu página web más memorable y demostrar cómo te diferencias del resto.
Menú en el Pie de la Página
Este estilo es genial para aquellos que buscan una página web más limpia y que haga foco en
la imagen de tu página principal. Si no quieres que tus usuarios lo pierdan de vista, te recomendamos
añadir un color particular para que pueda ser distinguido fácilmente.
Para comenzar con este tema vamos a ver un ejemplo de un menú desplegable básico. Para
ello declararemos listas y sub listas a las que aplicaremos el estilo utilizando contenedor flex.
<!doctype html>
<style>
.menuCSS3 ul { display: flex; padding: 0;margin: 0; list-style: none; }
4
.menuCSS3 a { display: block; padding: 2em; background-color: #F9B53C;
text-decoration: none; color: #191C26;}
.menuCSS3 a:hover { background-color: #CC673B; }

.menuCSS3 ul li ul {display: none;}
.menuCSS3 ul li a:hover + ul, .menuCSS3 ul li ul:hover {display: block;}
</style>
<body>
<nav class="menuCSS3">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Empleados</a>
<ul>
<li><a href="#">Juan</a></li>
<li><a href="#">Maria</a></li>
<li><a href="#">Ramón</a></li>
<li><a href="#">Luciana</a></li>
</ul>
</li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contacto</a>
<ul>
<li><a href="#">Email</a></li>
<li><a href="#">Mapa</a></li>
</ul>
</li>
</ul>
</nav>
<body>
</html>
5
Menú con iconos
Como todo menú comenzaremos con una lista y cada elemento de esta lista será formateado
con un estilo donde se incluirá la imagen del icono.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Botones</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet'
type='text/css' />
</head>
<body>
<div class="contenido">
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon">A</span>
<div class="ca-content">
<h2 class="ca-main">Adjuntar</h2>
<h3 class="ca-sub">Archivos al Correo</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">I</span>
<h2 class="ca-main">Visualizar Imagenes</h2>
<h3 class="ca-sub">Galeria de fotos</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">C</span>
<h2 class="ca-main">Descargas</h2>
<h3 class="ca-sub">Desde el Servidor</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">S</span>
6
<h2 class="ca-main">Configuracion</h2>
<h3 class="ca-sub">Personalizar opciones</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">d</span>
<h2 class="ca-main">Comunicacion</h2>
<h3 class="ca-sub">Chat online</h3>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
@Font-face: permite definir una tipografía e importarla para su uso en una página web.
Antes de su existencia se podía definir una lista de familias en orden decreciente de
prioridad con la regla font-family y se utilizaría la primera que el usuario tuviera
instalada en su sistema, con font-face la fuente elegida se puede descargar y utilizar sin
necesidad que el usuario disponga de ella con anterioridad.
La sintaxis de Font-face es la siguiente:
@font-face {
font-family: <un-nombre-de-fuente-remota>;
src: <origen> [,<origen>]*;
[font-weight: <peso>];
[font-style: <estilo>];
}
Dónde:
✓ nombre-de-fuente-remota: Especifica el nombre de una fuente que será utilizada

como valor de font face por las propiedades de fuente.
✓ origen: Dirección URL para la ubicación remota del archivo de fuente, o el nombre
de una fuente en la computadora del usuario en la forma local ("Nombre de Fuente").
✓ altura: Un valor de peso/grosor de fuente.
✓ estilo: Un valor de estilo de fuente.
Vamos a centrarnos en la hoja de estilo. Como veras se cargan la lista de fuentes. Recuerda
que en la url del font-face debes cargar una ruta donde se encuentren las fuentes con las que vas a
trabajar.
@font-face { font-family: 'WebSymbolsRegular';
7
src: url('websymbols/websymbols-regular-webfont.eot');
src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbols/websymbols-regular-webfont.woff') format('woff'),
url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal; font-style: normal;}
body{ background:#e6eecc url(../images/beige_paper.png) repeat top left;

color: #333; font-family: 'Terminal Dosis', Arial, sans-serif; font-size: 13px;}
.contenido{position:relative;}
a{color: #fff; text-decoration: none;}
h1{margin:0px; padding:20px; font-size:32px; color:#000;
text-shadow:1px 1px 1px rgba(255,255,255,0.9); text-align:center; font-weight:400;}
Lo más importante es el formato que se le da a cada elemento del menú, el icono se saca de
la fuente WebSymbolsRegular cada una de las opciones cambia al acercar el mouse ya que se activa
el comportamiento hover.
.ca-menu{ padding: 0; margin: 20px auto; width: 500px;}
.ca-menu li{ width: 500px; height: 100px; overflow: hidden;

display: block; background: #fff; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-bottom: 4px; border-left: 10px solid #000; -webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
.ca-menu li:last-child{ margin-bottom: 0px;}
.ca-menu li a{ text-align: left; display: block; width: 100%; height: 100%; color: #333;
position:relative;}
.ca-icon{ font-family: 'WebSymbolsRegular', cursive; font-size: 20px;

text-shadow: 0px 0px 1px #333; line-height: 90px; position: absolute;
width: 90px; left: 20px; text-align: center;
-webkit-transition: all 300ms linear; -moz-transition: all 300ms linear;
-o-transition: all 300ms linear; -ms-transition: all 300ms linear;
transition: all 300ms linear;}
.ca-content{ position: absolute; left: 120px; width: 370px; height: 60px; top: 20px;}
.ca-main{ font-size: 30px; -webkit-transition: all 300ms linear;

-moz-transition: all 300ms linear; -o-transition: all 300ms linear;
-ms-transition: all 300ms linear; transition: all 300ms linear;}
.ca-sub{ font-size: 14px; color: #666; -webkit-transition: all 300ms linear;

-moz-transition: all 300ms linear; -o-transition: all 300ms linear;
-ms-transition: all 300ms linear; transition: all 300ms linear; }
.ca-menu li:hover{ border-color: #fff004; background: #000;}
8
.ca-menu li:hover .ca-icon{ color: #fff004;
text-shadow: 0px 0px 1px #fff004; font-size: 40px;}
.ca-menu li:hover .ca-main{ color: #fff004; font-size: 14px;}
.ca-menu li:hover .ca-sub{ color: #fff; margin-bottom:3px;

font-size: 30px; margin-top:3px;}
Menú con imágenes
La idea de este ejercicio es seleccionar una opción del menú y que cambie la foto. Lo ideal
es buscar una foto que represente un retrato lo bastante fiel a la persona para que quede más llamativo
el menú.
Lo primero que haremos es definir las opciones del menú con sus correspondientes clases
para ser definidas en la hoja de estilo que definiremos a continuación:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Alegreya+SC:700,400italic' rel='stylesheet'
type='text/css' />
</head>
<body>
<div class="contenedor">
9
<ul class="menu">
<li><a href="#"><span>Director</span>
<span>Carlos Castro</span></a><img src="images/1.jpg"></li>
<li><a href="#"><span>Coordinator</span>
<span>Laura Oliva</span></a><img src="images/2.jpg" ></li>
<li><a href="#"><span>Docente</span>
<span>Mariano Rodriguez</span></a><img src="images/3.jpg" ></li>
<li><a href="#"><span>Secretario Academico</span>
<span>Benjamin Zabala</span></a><img src="images/4.jpg" ></li>
</ul>
</div>
</body>
</html>
Definiremos las propiedades básicas como lo son el cuerpo, elementos de la lista, la imagen,
los vínculos y el contenedor central.
body,div,ul,ol,li,h1,h2 { margin:0; padding:0;}
html,body {margin:0; padding:0;height: 100%;}

ol,ul { list-style:none;}
.contenedor{width: 100%;height: 100%;position: relative; text-align: center;}
img { border:0;}
a{color: #333;text-decoration: none;}
El contenedor menú será el que controla el cambio de imágenes a medida que se tocan las
opciones, por lo tanto están deben definirse como hipervínculos. Luego con .menu li:nth-
child(1):hover a se cambia el color de las opciones ejecutando un efecto de transición del color y su
opacidad.
Rgba(): es una propiedad que permite obtener cualquier color a partir de la combinación
de esos tres colores (RGB), pero al agregar A=Alpha, nos permitirá especificar la
opacidad del color. El valor de A es un número entre 1 y 0, siendo 1 totalmente opaco y
0 totalmente transparente.
.menu{ height: 385px; width: 600px; margin: 20px auto; position: relative;}
.menu li{width: 300px;}
.menu li a{display: block; width: 280px; padding: 0px 10px; text-align: right;
position: relative; z-index: 10; background: #fff; height: 97px; border-right: 1px solid #ddd;
background-color: rgba(255,255,255, 0.8);}
.menu li:nth-child(1):hover a{ background-color: rgba(174,54,55,0.9);}

.menu li:nth-child(2):hover a{ background-color: rgba(195, 210, 67, 0.9)}
.menu li:nth-child(3):hover a{ background-color: rgba(211, 132, 57, 0.9);}
.menu li:nth-child(4):hover a{ background-color: rgba(142, 116, 99, 0.9);}
10
.menu li a span{display:block;}
.menu li a span:first-child{font-weight: 700; font-size: 16px;

color: #ddd; padding-top: 10px;
font-family: 'Alegreya SC', Georgia, serif;}
.menu li a span:nth-child(2){ font-weight: 400;

font-style: italic; font-size: 28px;
font-family: 'Alegreya SC', Georgia, serif;
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
-ms-transition: color 0.2s linear;
transition: color 0.2s linear;}
.menu li:hover span:nth-child(2){color: #fff;}
.menu li img{ position: absolute; z-index: 1; left: 0px; top: 0px; opacity: 0;
-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;}
.menu li:hover img{left: 300px; opacity: 1;}
Menú Blur
Para este ejercicio definiremos la lista con las opciones que deseamos que aparezca en nuestro
menú.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Menu </title>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet'
type='text/css' />
</head>
<body style="background-image: url(pattern.png), url(f2.jpg);">
<ul class="menu">
<li><a href="#">Nosotros</a></li>
<li><a href="#">Capacitacion</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Novedades</a></li>
11
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<body>
</html>
Comenzaremos con la definición básica de la hoja de estilo.
body,div,ul,ol,li { margin:0;padding:0;}
html,body {margin:0; padding:0;}
ol,ul { list-style:none;}
body{background-color: transparent; background-repeat: repeat, no-repeat;

background-position: center center; background-attachment: fixed;
-webkit-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; background-size: auto, cover;
color: #fff; font-family: 'Josefin Slab', Arial, sans-serif; font-size: 13px;}
.contenido{position:relative; width:580px; margin: 0 auto;}
La parte más importante de este ejercicio es la definición del menú y sus ítems. En este caso
utilizamos el efecto de la opción transform que es skew.
.menu{ padding: 0px; margin: 0 0 10px 0; position: relative;}

.menu li{ font-size: 50px; display: block;}
.menu li a{display: block; text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(89,22,20,0.3);
color: #581514; padding: 5px 20px;
margin: 2px; background: rgba(255,255,255,0.2);
letter-spacing: 1px; -webkit-transform: skew(-12deg);
-moz-transform: skew(-12deg); -o-transform: skew(-12deg);
-ms-transform: skew(-12deg); transform: skew(-12deg);
-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;}
skew (sesgar): skewX inclina sólo los lados verticales, mientras que skewY inclina sólo
los lados horizontales. Se puede colocar un solo parámetro en grados que inclinan los
lados.
.menu:hover li a{color: transparent; text-shadow: 0px 0px 10px #fff;

background: rgba(88,22,22,0.2); -webkit-transform: skew(0deg);
-moz-transform: skew(0deg); -o-transform: skew(0deg);
-ms-transform: skew(0deg); transform: skew(0deg);}
12
.menu li a:hover{background: transparent; text-shadow: 1px 1px 10px rgba(89,22,20,0.6);
color: #581514;}
Menú en Transparencias
El siguiente ejercicio es muy similar al anterior usando las trasparencias y el blur. Como
estructura definimos la lista de opciones en html para luego aplicarle el estilo.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu Blur</title>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
</head>
<body style="background-image: url(images/pattern.png), url(images/7.jpg);">
<ul class="menu">
<li><a href="#">Nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Eventos</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</body>
</html>
Se aplica el estilo al menú comenzando por las definiciones básicas.
13
body{ background-color: transparent; background-repeat: repeat, no-repeat;
background-position: center center; background-attachment: fixed;
-webkit-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; background-size: auto, cover;
color: #fff; font-family: 'Josefin Slab', Arial, sans-serif; font-size: 13px;}
.contenido{position:relative; width:580px; margin: 0 auto;}
.menu{ padding: 50px 0px; margin: 0 auto; position: relative;

background: rgba(0,0,0,0.7); width: 500px; height: 400px;
-webkit-border-radius: 250px; -moz-border-radius: 250px; border-radius: 250px;
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;}

.menu:hover{background: rgba(0,0,0,0.2);}
.menu li{font-size: 40px;display: block; line-height: 66px;}
.menu li a{white-space: nowrap; color: transparent; display: block;

text-align: center; text-transform: uppercase;
text-shadow: 0px 0px 3px #fff; letter-spacing: 1px;
-moz-transform: scale(0.8); -ms-transform: scale(0.8);
-o-transform: scale(0.8); -webkit-transform: scale(0.8);
transform: scale(0.8); -webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear; -o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear; transition: all 0.4s linear;}
.menu:hover li a{text-shadow: 0px 0px 10px #fff;}
.menu li a:hover{text-shadow: none; color: #fff; background: rgba(129,6,29,0.8);

-moz-transform: scale(1); -ms-transform: scale(1);
-o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
Conclusión
En esta clase vimos la importancia de implementar en nuestro sitio un buen menú y las ventajas que
este nos brinda visualmente. Continuamos con los ejercicios paso a paso aplicando todos los tópicos
vistos hasta el momento en la materia. Ya nos queda poco para terminar la materia como siempre te
digo no dejes de realizar los ejercicios como las practicas que te ayudaran con la interpretación de los
tópicos. Nos vemos en la próxima clase!!.
14
Ejercitación
Ejercitación
1. Como ejercicio te propongo un sitio que cuente con el menú que se muestra a continuación en
la imagen. Cuando se toca una de las opciones esta se desplaza hacia abajo.
2. Realiza un sitio con el menú vertical como lo muestra la siguiente imagen.
15
Autoevaluación
En base a los conocimientos adquiridos, con sus propias palabras responde las siguientes
preguntas:
1. Desarrolla un cuadro comparativo definiendo las ventajas de cada uno de los menús
utilizados en un sitio web.
2. ¿En qué consiste el menú hamburgués y en que oportunidades se puede
implementar?
3. ¿Cuál es la finalidad de Font face?
4. ¿Como se define la estructura básica de un menú con html?
5. ¿Como se trabaja la opacidad de un color desde css? Ejemplifica
6. ¿En que consiste el efecto blur?
16

Clase 1-I2

Cargado por

Copyright:

Formatos disponibles

Clase 1-I2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Clase 1-I2

Cargado por

Copyright:

Formatos disponibles

Clase

¡¡Por eso te aconsejo que no te pierdas los ejercicios de esta clase!!

Menú Fijo en el Encabezado

Menú en el Pie de la Página

.menuCSS3 ul { display: flex; padding: 0;margin: 0; list-style: none; }

.menuCSS3 a:hover { background-color: #CC673B; }

La sintaxis de Font-face es la siguiente:

✓ nombre-de-fuente-remota: Especifica el nombre de una fuente que será utilizada

@font-face { font-family: 'WebSymbolsRegular';

body{ background:#e6eecc url(../images/beige_paper.png) repeat top left;

.ca-menu{ padding: 0; margin: 20px auto; width: 500px;}

.ca-menu li{ width: 500px; height: 100px; overflow: hidden;

.ca-menu li:last-child{ margin-bottom: 0px;}

.ca-icon{ font-family: 'WebSymbolsRegular', cursive; font-size: 20px;

.ca-main{ font-size: 30px; -webkit-transition: all 300ms linear;

.ca-sub{ font-size: 14px; color: #666; -webkit-transition: all 300ms linear;

.ca-menu li:hover{ border-color: #fff004; background: #000;}

.ca-menu li:hover .ca-main{ color: #fff004; font-size: 14px;}

.ca-menu li:hover .ca-sub{ color: #fff; margin-bottom:3px;

Menú con imágenes

body,div,ul,ol,li,h1,h2 { margin:0; padding:0;}

html,body {margin:0; padding:0;height: 100%;}

.menu li{width: 300px;}

.menu li:nth-child(1):hover a{ background-color: rgba(174,54,55,0.9);}

.menu li a span:first-child{font-weight: 700; font-size: 16px;

.menu li a span:nth-child(2){ font-weight: 400;

.menu li:hover span:nth-child(2){color: #fff;}

.menu li:hover img{left: 300px; opacity: 1;}

Comenzaremos con la definición básica de la hoja de estilo.

body{background-color: transparent; background-repeat: repeat, no-repeat;

a{color: #fff; text-decoration: none;}

.contenido{position:relative; width:580px; margin: 0 auto;}

.menu{ padding: 0px; margin: 0 0 10px 0; position: relative;}

.menu:hover li a{color: transparent; text-shadow: 0px 0px 10px #fff;

Se aplica el estilo al menú comenzando por las definiciones básicas.

.contenido{position:relative; width:580px; margin: 0 auto;}

.menu{ padding: 50px 0px; margin: 0 auto; position: relative;

a{color: #fff; text-decoration: none;}

.menu li{font-size: 40px;display: block; line-height: 66px;}

.menu li a{white-space: nowrap; color: transparent; display: block;

.menu:hover li a{text-shadow: 0px 0px 10px #fff;}

.menu li a:hover{text-shadow: none; color: #fff; background: rgba(129,6,29,0.8);

2. Realiza un sitio con el menú vertical como lo muestra la siguiente imagen.

También podría gustarte