[TuT] Menu HTML , CSS , CSS3

gerrer0

hola uj les enseñare haser un lindo menu con HTML , CSS , CSS3
el resultado seria asi y keda mui bueno para sus web :want:

pueden usar cualquier editor de texto lla sea Notepad++ o dreamweaver etc...

empesamos creando una div y la nombraremos "MENU"

los segundo sera crear unas etiquetas ul y etiketas li

bueno esto seria lo principal del menu ahora empesaremos a modificar con CSS

lo primero es centrar la div :

@charset "utf-8";
* {
	margin-right: auto;
	margin-left: auto;
}

lo segundo darle sus respectivas medida y agregar un fondo para ke kede todo chulo ay xD

#menu {
	height: 30px;
	width: 700px;
	background-image: url(menuimg.png);
	background-repeat: repeat;
}

le agrege una imagen de 30 x 30 y ke se repita

ahora para que no cree ese lista hasia abajo y la aga para al lado y tambien ke elimine los puntos ke krea por defecto agregamos este codigo

#menuv li{
    list-style: none;
	float: left;
}

ahora le damos un poco de estilo a la letra que seria:

#menuv {
    font-family: verdana;
	font-size: 15px;
	margin: 3px;
}

font family sera el tipo de letra que sera Verdana , font size es el tamaño de la letra y margin el margen que tendran las diviciones del menu

ahora le daremos color a las letras y decoraciones

#menuv li a{
    display: block;
	color: #999999;
	padding: 3px 30px;
	text-decoration: none;
}

yo le di un color medio gris con color: #999999 padding es para el borde entre la letra y las diviciones li ay modifican para que se valla lennando todo el menu en toda la divicion menu y text decoration : none es para quitar el subrallado de las letras

esto seria la misma etiqueta de arriba solo que con la terminacion Hover que seria lo que saldra al pasar el mouse por encima

#menuv li a:hover{
    display: block;
	color: #FFFFFF;
	padding: 3px 30px;
	text-decoration: none;
	text-shadow: 0px 0px 5px #ffffff;
	-moz-text-shadow: 0px 0px 5px #ffffff;
	-webkit-text-shadow: 0px 0px 5px #ffffff; 
}

copiamos todo lo mismo solo que le agregamos unas decoraciones por ejemplo cambiamos el color del texto a blanco
le agregamos un brillo a la letra con text shadow (CSS3)

y con eso estaria listo el menu salio largo pero si aprendes ah aserlo lo hases en unos 3 minutos xD

ttoottyy

Muy buena, mañana me pongo a hacerlo para mi pagina web