Menus en HTML5 Y CSS3
MENU HORIZONTAL
En esta oportunidad haremos un menu horizontal en html5 y css3, para ello deberemos hacer uso del editor de codigo, en esta oportunidad usaremos el Editor NOTEPAD++
(Codigo en HTML)
<html>
<head>
<link type="text/css" rel="stylesheet" href="style2.css" />
<meta charset="utf-8">
<title>Menu</title>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="index.html">Noticias</a></li>
<li><a href="index.html">Contacto</a></li>
<li><a href="index.html">Quienes Somos</a></li>
</ul>
</nav>
</html>
(Codigo en css3)
list-style-type: none;
margin: 0px;
padding: 0px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC;
}
li {
display: inline;
}
a {
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
font-size: 0.9em;
display: block;
padding: 6px;
float: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
background-color: #EAEAEA;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCC;
}
a:hover {
color: #68aff0;
background-color: #666;
}
.clear {
clear: both;
}
Como resultado final obtendremos lo siguiente:
para descargar los archivos: Click abajo:
Click Aquí
MENU VERTICAL
(Codigo en HTML)
<html>
<head>
<link type="text/css" rel="stylesheet" href="style2.css" />
<meta charset="utf-8">
<title>Menu</title>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="index.html">Noticias</a></li>
<li><a href="index.html">Contacto</a></li>
<li><a href="index.html">Quienes Somos</a></li>
</ul>
</nav>
</html>
(Codigo en css3)
nav {
width : 130px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #CCC;
border-right-color: #CCC;
border-left-color: #CCC;
}
a {
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
font-size: 0.9em;
display: block;
padding: 6px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
background-color: #EAEAEA;
}
a:hover {
color:#43b6ee;
background-color: #666;
border-right-width: 5px;
border-right-style: solid;
border-right-color: #96F;
}
Aqui una vista previa de como se visualiza en un navegador
para descargar los archivos: Click abajo:
Comentarios
Publicar un comentario