Bueno antes que nada los comentarios fuera de lugar van a ser eliminados dependiendo su gravedad van a ser bloqueados dichos user. otra cosa que les queria comentar ustedes se preguntaran que les voy a enseñar a hacer ahora bueno lo que le voy a enseñar a hacer es un menu muy bueno en css y html bueno dejemos tanta introduccion y manos a la obra
Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol> y cada elemento de la lista estará encabezado por la tag <li> que puede o no llevar la tag de cierre </li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones.
Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la tag <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento.
Listas de menú y de directorio: Están en desuso puesto que su resultado suele ser, prácticamente, idéntico al de las listas con viñetas.
Menú: Englobadas por las tags <menu>.....</menu> y cada elemento encabezado por la tag <li>.
Directorio: Englobadas por las tags <dir>.....</dir> y cada elemento encabezado por la tag <li>.
Listas de glosario: Cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su propia tag. Estas listas se engloban con las tags <dl>.....</dl>. Para el término se usa la tag <dt> y para la definición la tag <dd>. Generalmente el navegador colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la tag de apertura el atributo compact: <dl compact>.
Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarán todo el conjunto de las listas y las tags de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML.
en nuestro caso vamos a usar las listas SIN ORDEN que seria [ <ul>.....</ul> ]
Para empezar a crear el menu en HTML vamos a poner un div que ''contenga'' el menu y le vamos a poner class="menu_gen"
Ok cuando hagan el div vamos a añadir las listas desordenadas y le ponemos un class="nav"
dijo: Si quieren poner otra cosa en vez de menu_gen o nav lo pueden hacer eso es a gusto obviamente despues ponen el mismo nombre en el css [/quote]
Ahora vamos a añadir la etiqueta <li>..........</li> y adentro ponemos la etiqueta <a>.........</a>
Bueno el menu en html esta listo y la visualizacion en el navegador seria la siguiente
Como ven no es gran cosa pero la pregunta es...
¿Porque se ve asi?
Bueno eso es muy facil de responder y muy obvio se ve asi porque no pusismos TODAVIA el css que es lo que le da ''forma'' al menu y la la pagina en general porque no...
Para empezar con css vamos al <head>.......</head> que es la cabeza de la pagina y vamos a poner
<link type="text/css" rel="stylesheet" href="css/estilo.css"/>
En href="" Entre las comillas vamos a poner la direccion de nuestro css si... EJ:
En la misma carpeta: estilo.css
En una carpeta anterior: ../estilo.css
En la siguiente carpeta: css/estilo.css
Bueno Una vez puesto el enlace vamos a crear el css porque todavia no existe
dijo: en css class="menu_gen" se prodria asi .menu_gen{ } [/quote]
bueno añadimos el menu_gen al css asi...
adentro de los {....} ponemos esto...
Ahora vamos a añadir el class de nav que no es .nav seria ul.nav porque involucra a las listas
y vamos a añadir lo siguiente
Todo eso en el Navegador seria esto
Lo siguiente que vamos a hacer es añadir ul.nav li a {.....} al css seria asi...
adentro añaden esto
en el navegador se veria asi
Va tomando forma
dijo: Si quieren cambiar el color del resplandor y el del menu modifican esto...
PD: el resplandor esta marcado con rojo y el color del menu en verde[/quote]
Ok ahora vamos a poner lo mismo pero vamos a añadirle el hover que es cuando pasamos el puntero por arriba quedaria asi...
y ponemos lo siguiente
Bueno con eso terminariamos el menu... pero ahora...
¿Como manejo la animacion a gusto?
Eso es facil solo modifican el padding seria asi
dijo:
abajo= rojo
derecha= verde
"ancho"=azul
[/quote]
Y con eso terminariamos el menu espero que les haya gustado el post