En esta oportunidad aprenderemos a crear una barra de
menú horizontal simple solo con CSS sin mucho lujo por decirlo de alguna manera pero agradable a la vista. Para crear una barra menú horizontal utilizaremos las
etiquetas UL y LI. Comenzaremos escribiendo el
código HTML:
<ul id="smenu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Categorías</a></li>
<li><a href="#">Mapa</a></li>
<li><a href="#">Contacto</a></li>
</ul>
de lo cual el código mostrado anteriormente daría como resultado la siguiente lista:
pero lo que nosotros queremos es un barra de menú horizontal y para ponerlo de esa manera debemos aplicar algunas propiedades
#smenu {
padding: 0; /* Quitamos cualquier relleno extra */
}
#smenu li {
display: inline; /* Propiedad básica para lograr el efecto horizontal */
}
/* Propiedades básicas letra, color, fondo */
#smenu li a {
color: white;
float: left;
font-family: Arial,Verdana,Times New Roman;
font-size: 10px;
padding: 9px;
text-decoration: none;
text-transform: uppercase;
background: #4f4e4e;
}
/* Propiedades al poner el mouse encima */
#smenu li a:hover {
background-color: white;
color: black;
}
y así tenemos una
barra de menú simple con CSS, claro las propiedades son totalmente modificables y adaptables al gusto de cada blog o web, y como jugando se pueden hacer varias cosas.
Les dejo los estilos de los ejemplos anteriores.
[+/-] Ver / Ocultar Codigo#smenu02 {
padding: 0;
}
#smenu02 li {
display: inline;
}
#smenu02 li a {
color: black;
float: left;
font-family: Arial,Verdana,Times New Roman;
font-size: 11px;
padding: 13px;
text-decoration: none;
text-transform: uppercase;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#smenu02 li a:hover {
background-color: #4F4E4E;
color: white;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
#smenu03 {
padding: 0;
}
#smenu03 li {
display: inline;
}
#smenu03 li a {
color: black;
float: left;
font-family: Arial,Verdana,Times New Roman;
font-size: 11px;
padding: 13px;
text-decoration: none;
text-transform: uppercase;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#smenu03 li a:hover {
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
}
#smenu04 {
background-color: #444444;
height: 39px;
padding: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#smenu04 li {
display: inline;
}
#smenu04 li a {
border-radius: 5px 5px 5px 5px;
color: white;
float: left;
font-family: Arial,Verdana,Times New Roman;
font-size: 11px;
padding: 13px;
text-decoration: none;
text-transform: uppercase;
}
#smenu04 li a:hover {
color: #BCBBBA;
background-color: #5E5E5E;
padding: 3px;
margin: 5px;
}
#smenu05 {
padding: 0;
}
#smenu05 li {
display: inline;
}
#smenu05 li a {
background-color: #444444;
color: white;
float: left;
font-family: Arial,Verdana,Times New Roman;
font-size: 11px;
padding: 13px;
text-decoration: none;
text-transform: uppercase;
}
#smenu05 li a:hover {
color: white;
background-color: #50B2E3;
margin-top:-10px;
padding-bottom:9px;
}
0 comentarios:
Publicar un comentario