Popular channels

[Aporte]Crea Un Menú en Html con Css Parte 2


Hola Amigos de mi hermosa estadía Taringa!, hoy les traigo nuevos diseños de Menus en Html y Css para el diseño de tu pagina web como parte del desarrollo, no olviden agradecer, es muy importante


Copia y pega el código de abajo en algún lugar entre los <head> </ head> etiquetas.De la Siguiente Sintaxis

<html>
<head> Tu Código Aqui </head>
<body>
Tu Código Aqui
</body>
</html>


<link rel='stylesheet' type='text/css' href='styles.css' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>


Copia y pega el código HTML siguiente donde quiera que usted quiere que su menú aparezca.


<div id='cssmenu'>
<ul>
<li><a href='http://4shareding.eu5.es' target='_blank'><span>Inicio</span></a></li>
<li><a href='http://foro-4shareding.blogspot.com/'><span>AnimeHD</span></a></li>
<li><a href='http://4shareding.eu5.es/'><span>4Shareding</span></a></li>
<li><a href='http://wipstter.com/'><span>Wipstter</span></a></li>
<li class='last'><a href='http://www.superstremo.96.lt/contacto.html'><span>Contacto</span></a></li>
</ul>
</div>


Ahora el Css

Si no sabes tienes que copiar este codigo y lo pegas en Blog de notas luego vas y lo guardas como .css

@import url(http://fonts.googleapis.com/css?family=Capriola);
/* Let's import the lovely google font, please keep this line at the top of your stylesheet */
/* Menu CSS */#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
padding: 0;
margin: 0;
line-height: 1;
font-family: 'Capriola', sans-serif;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom: 1;
height: 69px;
background: url(images/bottom-bg.png) repeat-x center bottom;
border-radius: 2px;
width: auto;
}
#cssmenu ul {
background: url(images/nav-bg.png) repeat-x 0px 4px;
height: 69px;
}
#cssmenu ul li {
float: left;
list-style: none;
}
#cssmenu ul li a {
display: block;
height: 37px;
padding: 22px 30px 0;
margin: 4px 2px 0;
border-radius: 2px 2px 0 0;
text-decoration: none;
font-size: 13px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
font-weight: 400;
opacity: .9;
}
#cssmenu ul li:first-child a {
margin: 4px 2px 0 0;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active a {
background: url(images/color.png) center bottom;
display: block;
height: 37px;
margin-top: 0px;
padding-top: 26px;
color: #004f7c;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
opacity: 1;
}


Las Imagenes Echas para El Css






Entra A la pagina para mas diseños de menus en html :´D
0
0
0
0No comments yet