Inicio  Contacto  Privacidad   Enlaces  Mapa del sitio  Videos

Menu colorido solo con CSS

Un menu colorido y solo con CSS.




Comenzamos con los estilos (style CSS)
Width Donde podemos modificar el ancho de la barra
Margin Donde podemos alinear la barra, left (derecha) Auto (centrar) ,,,
y luego continuamos con los botones de cada link (Enlace)
menu div.barraMenu (primer botón) tal como lo vemos de derecha a izquierda
menu div.barraMenu1 (segundo botón)
menu div.barraMenu2 (tercer botón)
menu div.barraMenu3 en cada botón vemos backgroun-color SERA EL COLOR DEL BOTÓN SIN PULSAR
pandding el ancho, alto, centrado del botón
margin la alineación del botón y su separacion del siguiente
Despues tenemos la segunda parte de igual manera de todos los botones
menu div.barraMenu a.botonMenu:hover 
menu div.barraMenu a.botonMenu1:hover 
menu div.barraMenu a.botonMenu2:hover (hover) aquí definiremos el color del botón al poner el cursor sobre el mismo .... veremos en la siguiente linea esto
background-color: black; (black) negro podemos poner el color que queramos también en hexadecimal y en la siguiente linea especificamos el color de la linea (borde) que también se activa al pasar el cursor border-bottom: 3px solid #ff00ff

Los estilos (style CSS)





<style type="text/css"> #menu div.barraMenu { width: 500; margin: left; } #menu div.barraMenu { text-align: center; } #menu div.barraMenu a.botonMenu { background-color: #3357CF; padding: 12px 15px 10px 15px; margin: 0 3px 0 0; } #menu div.barraMenu a.botonMenu1 { background-color: #67BBE7; padding: 12px 15px 10px 15px; margin: 0 3px 0 0; } #menu div.barraMenu a.botonMenu2 { background-color: #3EC310; padding: 12px 15px 10px 15px; margin: 0 3px 0 0; } #menu div.barraMenu a.botonMenu3 { background-color: #C8F341; padding: 12px 15px 10px 15px; margin: 0 3px 0 0; } #menu div.barraMenu a.botonMenu4 { background-color: #F69E16; padding: 12px 15px 10px 15px; margin: 0 3px 0 0; } #menu div.barraMenu a.botonMenu5 { background-color: #F01112; padding: 12px 15px 10px 15px; margin: 0 3px 0 0; } #menu div.barraMenu a.botonMenu6 { background-color: #9E436F; padding: 12px 15px 10px 15px; margin: 0 3px 0 0; } #menu div.barraMenu a.botonMenu7 { background-color: #9110E6; padding: 12px 15px 10px 15px; margin: 0 3px 0 0; } #menu div.barraMenu a.botonMenu:hover { background-color: black; border-bottom: 3px solid #ff00ff; } #menu div.barraMenu a.botonMenu1:hover { background-color: black; border-bottom: 3px solid #ff00ff; } #menu div.barraMenu a.botonMenu2:hover { background-color: black; border-bottom: 3px solid #ff00ff; } #menu div.barraMenu a.botonMenu3:hover { background-color: black; border-bottom: 3px solid #ff00ff; } #menu div.barraMenu a.botonMenu4:hover { background-color: black; border-bottom: 3px solid #ff00ff; } #menu div.barraMenu a.botonMenu5:hover { background-color: black; border-bottom: 3px solid #ff00ff; } #menu div.barraMenu a.botonMenu6:hover { background-color: black; border-bottom: 3px solid #ff00ff; } #menu div.barraMenu a.botonMenu7:hover { background-color: black; border-bottom: 3px solid #ff00ff; } #menu div.barraMenu a.botonMenu:active { background-color: fuchsia; } #menu div.barraMenu a.botonMenu1:active { background-color: fuchsia; } #menu div.barraMenu a.botonMenu2:active { background-color: fuchsia; } #menu div.barraMenu a.botonMenu3:active { background-color: fuchsia; } #menu div.barraMenu a.botonMenu4:active { background-color: fuchsia; } #menu div.barraMenu a.botonMenu5:active { background-color: fuchsia; } #menu div.barraMenu a.botonMenu6:active { background-color: fuchsia; } #menu div.barraMenu a.botonMenu7:active { background-color: fuchsia; } </style>
EL HTML
<div id="menu"> <div class="barraMenu"> <a class="botonMenu" href="http://ENLACE1">link1</a> <a class="botonMenu1" href="http://ENLACE2">link2</a> <a class="botonMenu2" href="http://ENLACE3">link3</a> <a class="botonMenu3" href="http://ENLACE4">link4</a> <a class="botonMenu4" href="http://ENLACE5">link5</a> <a class="botonMenu5" href="http://ENLACE6">link6</a> <a class="botonMenu6" href="http://ENLACE7">link7</a> <a class="botonMenu7" href="http://ENLACE8">link8</a><br /> <br /> <br /></div>
Solo tenéis que sustituir ENLACE1, ENLACE2,,, Por vuestros enlaces, direcciones URL. El texto Link1, link2,,, por vuestro texto, que queráis salga en el botón. Que lo disfrutéis.

Ejemplo funcionando en www.startecnia.com

0 comentarios:

Comentarios

Entradas recientes Entradas antiguas Inicio
Licencia Creative Commons
Optical Photo por Josep Carmona se encuentra bajo una Licencia Creative Commons Reconocimiento-CompartirIgual 3.0 Unported.
Permisos que vayan más allá de lo cubierto por esta licencia pueden solicitarlos en nuestro apartado de Contacto