Menú sencillo usando HTML5 Y CSS3
Este es un pequeño ejemplo sobre el diseño de un menú usando etiquetas HTML5 como es el nav, así como también css3, dándole de esa manera una idea o perspectiva de lo que se puede hacer con esas tecnologías.--Archivo index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Menú Sencillo con HTML5 Y CSS3</title>
<link rel="stylesheet" href="estilos-menu.css"/>
</head>
<body>
<header class="Menu">
<!--Menu del documento-->
<nav class="MainMenu">
<ul class="MainMenu-list">
<li class="MainMenu-item">
<a href="inicio.html" class="MainMenu-link">Inicio</a>
</li>
<li class="MainMenu-item">
<a href="nosotros.html" class="MainMenu-link">Nosotros</a>
</li>
<li class="MainMenu-item">
<a href="productos.html" class="MainMenu-link">Productos</a>
</li>
<li class="MainMenu-item">
<a href="contactenos.html" class="MainMenu-link">Contáctenos</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
--Archivo estilos-menu.css
body{
background:#f0f0f0;
font-size:16px;
}
.MainMenu{
font-weight:bold;
margin-top:2em;
text-align:center;
}
.MainMenu-item{
display:inline-block;
list-style-type:none;
margin-left:.5em;
}
.MainMenu-link{
background:#BAEBDC;
color:black;
text-decoration:none;
padding:.5em;
-webkit-transition:.3s;
}
.MainMenu-link:hover{
background:#3FD7A9;
color:white;
text-shadow:rgba(0,0,0,0.5) 2px 2px 5px;
}
--Resultado
0 comentarios:
Publicar un comentario