Menú
desplegable
Hola hoy aprenderemos hacer un
menú con opciones desplegables en dreamweaver
y colocaremos un par de opciones. A continuación les mostrare como
hacerlo.
Lo primero una vez en el
dreamweaver podemos irnos la opción de insertar una vez ahí buscamos la opción Spry donde
encontraremos una serie de ítem nosotros utilizaremos la opción que dice Barra de menús de Spry.
Otra manera de insertar en menú
desplegable en dreamweaver es ir a la opción que aparece en la parte superior
de la venta y escoger el modo clásico. Entramos a la pestaña de Spry y
escogemos el menú.
Una vez ahí damos clic en la
opción de Barra de menús desplegables nos aparecerá una ventana donde nos
pregunta cómo queremos el menú horizontal o vertical nosotros trabajaremos con
el menú horizontal, escoges este y le damos clic en aceptar.
Nos creara un menú en la parte de
diseño y añadirá una seria de línea de código y nos dirá que necesita unos
archivos auxiliares le damos aceptar. En en sitio nos creara una capeta llamada
SpryAssets donde podemos encontrar
los archivos javascript, css y las imágenes que crea automáticamente al agragar
el menú.
Podemos ver el menú creado en el
explorador presionando F12 y podemos notar que las opciones que nos muestra son
las que pone por defecto lo siguiente será modificar estas opciones desde el
código HTML. Cada elemento del menú posee sub-elemento podemos crear cualquier
tipo de opciones y darles un link de referencia o una acción eso depende para
el uso que le queramos dar.
Cada ítem del menú está
conformado por las etiquetas <li></li> y las otra es
<ul></ul> que son las q contienen nuestra opciones, una vez
sabiendo esto podemos modificar nuestro menú desde el código HTML de la
siguiente manera.
Como se puede apreciar en la
imagen anterior hemos modificado el código del menú y colocado nuestras propias
opciones, ahora podemos ver cómo funciona mirándolo en el explorador y podemos
ver que todas las opciones que hemos creado aparecen tal y cual lo hemos hecho
desde el dreamweaver.
Si bien es cierto talvez no sea
muy agradable a la vista pero si funciona pero podemos modificar su diseño
gracias al archivo que se crea al momento de crear el menú, desde este css
podemos modificar tanto el tamaño de la letra, el color, la fuente, los botones
del menú y todo lo que quieran. Haremos unas pequeñas modificaciones al menú
atreves del css que se encuentra por default en la carpeta SpryAssets.
Aquí ya estamos editando el css
del menú y lo primero que haremos es lo ir esta parte del código y modificar lo
siguiente:
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align:center;
cursor: pointer;
width:8em;
float:left;
border: groove;
/*le colocamos borde a los botones */
color:#999; /*le colocamos color al borde de los botones */
}
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align:center;
/*centramos el texto del menú en los botones */
cursor: pointer;
width: 8em;
float: left;
}
ul.MenuBarHorizontal a
{
display:block;
cursor: pointer;
background-color:#0CF;
padding: 0.5em 0.75em;
color:#9C9; /*cambiamos el color de los botones */
text-decoration: none;
}
ul.MenuBarHorizontal a
{
display:block;
cursor: pointer;
background-color:#0CF;
padding: 0.5em 0.75em;
color:#FFF; /*cambiamos el color de las letras
cuando no están seleccionadas */
text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color:#666; /*cambiamos el color de los
botones cuando tienen el foco*/
color:#693;
ul.MenuBarHorizontal
a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal
a.MenuBarSubmenuVisible
{
background-color:#666; /*cambiamos el color de los botones
cuando tienen el foco*/
color:#693;
}
Una vez terminado de modificar el código del css obtendremos un
menú parecido a esto:
Esto solo es un ejemplo de lo q pueden hacer Uds. pueden hacer sus
propias imágenes para los botones, personalizar el menú a su gusto.
Gracias.
No hay comentarios:
Publicar un comentario