| Sección
"Java Scripts" |
|
Lección
39 |
Menú
2 desplegable
Como
verás, se
trata de
un efecto muy hermoso, y la base de este Java
Script es una de las 60
rutinas que vienen listas para cortar y pegar en
el programa Depósito, el cual puedes bajar de aquí:
webtutorial.com.ar
Para
instalar este efecto, viene adjuntado en el
programa "Depósito" un archivo que se
llama "navcond.js", y contiene el script
necesario para generar el maravilloso menú que se
ha abierto en la parte superior de esta página,
el cual permite deslizarse por sobre él, y cuando
se pasa el ratón, va abriendo ventanas
desplegables con opciones de seleccionar alguna de
ellas (sube hasta el menú en la parte superior de
esta página y comprenderás de que hablo).
De
todos modos, si bajaste el programa Depósito, y
ya tienes el "navcond.js", falta un detalle
importante, el cual es: saber como se utiliza ese
archivo.
Y
si tienes inconvenientes para bajar el citado
programa, o el archivo en la lección
40 doy todos los elementos listos, para
que el citado archivo no haga falta, porque lo
incluyo en forma de Java Script
común.
Bien,
instalemos nuestro efecto si es que ya bajaste el
programa Depósito y tienes el archivo
"navcond.js"
en tu computadora.
Para
ello, colocas el archivo "navcond.js" en
la misma carpeta donde guardarás esta página, y escribes debajo
de
la etiqueta
<Head> en el código HTML de tu
página, el siguiente código:
<script language="JavaScript" src="navcond.js">
</script>
<script language="JavaScript">
/*
Top Navigational Bar II (By Mike Hall @ Brainjar.com)
*/
var myNavBar1 = new NavBar(0);
var dhtmlMenu;
//define menu items (first parameter of NavBarMenu specifies main category width, second specifies sub category width in pixels)
//add more menus simply by adding more "blocks" of same code below
dhtmlMenu = new NavBarMenu(100, 0);
dhtmlMenu.addItem(new NavBarMenuItem("Inicio",
"index.htm"));
myNavBar1.addMenu(dhtmlMenu);
dhtmlMenu = new NavBarMenu(100, 120);
dhtmlMenu.addItem(new NavBarMenuItem("Depósito", ""));
dhtmlMenu.addItem(new NavBarMenuItem("Caducar página",
"caducar.htm"));
dhtmlMenu.addItem(new NavBarMenuItem("Pantalla completa",
"ventanafull.htm"));
dhtmlMenu.addItem(new NavBarMenuItem("Anular botones",
"mouse.htm"));
myNavBar1.addMenu(dhtmlMenu);
dhtmlMenu = new NavBarMenu(110, 120);
dhtmlMenu.addItem(new NavBarMenuItem("Tutoriales", ""));
dhtmlMenu.addItem(new NavBarMenuItem("La Variable", "http://www.lavariable.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Programación", "http://www.programacion.net"));
dhtmlMenu.addItem(new NavBarMenuItem("ABC Datos", "http://www.abcdatos.com/"));
dhtmlMenu.addItem(new NavBarMenuItem("Cybercursos", "http://www.cybercursos.net/"));
myNavBar1.addMenu(dhtmlMenu);
dhtmlMenu = new NavBarMenu(100, 150);
dhtmlMenu.addItem(new NavBarMenuItem("Buscadores", ""));
dhtmlMenu.addItem(new NavBarMenuItem("Yahoo", "http://www.yahoo.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Alta Vista", "http://www.altavista.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Infoseek", "http://www.infoseek.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Excite", "http://www.excite.com"));
dhtmlMenu.addItem(new NavBarMenuItem("HotBot", "http://www.hotbot.com"));
myNavBar1.addMenu(dhtmlMenu);
dhtmlMenu = new NavBarMenu(100, 150);
dhtmlMenu.addItem(new NavBarMenuItem("Webmasters", ""));
dhtmlMenu.addItem(new NavBarMenuItem("Foros del Web", "http://www.forosdelweb.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Desarrollo Web", "http://www.desarrolloweb.com"));
dhtmlMenu.addItem(new NavBarMenuItem("JavaScript", "http://javascript.internet.com"));
dhtmlMenu.addItem(new NavBarMenuItem("BrainJar", "http://brainjar.com"));
myNavBar1.addMenu(dhtmlMenu);
//set menu colors
myNavBar1.setColors("#ffffff","#ffffff","#000000","#ffffff","#6B6B6B",
"#000000","#C0C0C0","#ffffff","#8A0000")
myNavBar1.setFonts("Arial","plain","bold","11px","Arial","plain","bold","11px");
//uncomment below line to center the menu (valid values are "left", "center", and "right"
//myNavBar1.setAlign("center")
var fullWidth;
function init() {
// Get width of window, need to account for scrollbar width in Netscape.
fullWidth = getWindowWidth()
- (isMinNS4 && getWindowHeight() < getPageHeight() ? 16 : 0);
myNavBar1.resize(fullWidth);
myNavBar1.create();
myNavBar1.setzIndex(2);
}
</script>
|
|
Lo
que pinté con azul, son los diferentes submenús
que se abren en la barra del menú principal, y es
precisamente eso lo que debes cambiar,
reemplazando los títulos y enlaces por los tuyos
propios.
Puedes
agregar o disminuir menús a gusto. Yo copiaré
nuevamente una de ellos para explicar cuales son
los cambios arealizar.
dhtmlMenu = new NavBarMenu(100, 120);
dhtmlMenu.addItem(new NavBarMenuItem("Depósito", ""));
dhtmlMenu.addItem(new NavBarMenuItem("Caducar página",
"caducar.htm"));
dhtmlMenu.addItem(new NavBarMenuItem("Pantalla completa",
"ventanafull.htm"));
dhtmlMenu.addItem(new NavBarMenuItem("Anular botones",
"mouse.htm"));
myNavBar1.addMenu(dhtmlMenu);
|
Lo
que pinté con rojo, lo debes agregar para cada
submenú que incorpores, e igual que aquí, deben
estar al principio y final del bloque.
Lo
que hay en el medio, corresponde a las casillas
que se abrirán en este submenú. O sea, que por
cada vez que agregues este código
dhtmlMenu.addItem(new NavBarMenuItem("Depósito", ""));
en el
medio de lo pintado en rojo, se abrirá una nueva
casilla desplegable en el submenú.
De
la línea mencionada para declarar nuevas casillas
con enlaces, es decir
dhtmlMenu.addItem(new NavBarMenuItem("Depósito",
"")); debes
saber que entre los paréntesis y entre comillas,
se escribe el título de la casilla del submenú,
y a continuación, también entre comillas, se
coloca la dirección a la que debe comunicar el
enlace.
Por
ejemplo, si deseas que la casilla que va a llevar
por nombre "Depósito", comunique con
"webtutorial.com.ar"
escribes
dhtmlMenu.addItem(new NavBarMenuItem("Depósito",
"webtutorial.com.ar"));.
Y
si no le declaras la dirección a la que debe
direccionar ese enlace, como en nuestro caso,
donde deseamos que "Depósito" sea solo
el título del submenú, en ese caso, esta casilla
no comunicará con ningún sitio.
Ahora,
buscas la etiqueta
<Body>
en el código HTML de tu
página, y la reemplazas por el siguiente código:
Aquí
copio nuevamente el código con opción para
seleccionarlo, cortar y pegar en tu sitio.
Para
ello haces click en cualquier palabra que se halla
dentro de la caja, Te diriges a "Edición"
en el menú superior de la barra de herramientas, e
indicas "Seleccinar todo", luego tomas lo
seleccionado dirigiéndote nuevamente a "Edición",
pero esta vez indicas "Cortar", y
posteriormente te posicionas en tu página, donde
quieres colocar este código, entonces te diriges a
Edición, y le indicas "Pegar".
Si
deseas hacer las cosas más rápido, puedes verificar
en "Edición" (está escrito al lado de las
palabras que indican cada orden) que pulsando
"Control" + una letra determinada, puedes
"seleccionar todo", "cortar" o
"pegar" en forma instantánea y con eso
evitas tener que ingresar constantemente al menú de
"Edición".
Esto
es lo que debes pegar debajo de donde dice <Head>
en el HTML de tu página:
Esto
es lo que debes pegar en el Body
Si
de todos modos, no funciona este efecto, corta
el código HTML que debes colocar en tu página,
pero antes de hacerlo, pégalo en tu Block de
notas, y luego si córtalo de allí y pégalo en
tu sitio. Ahora si no creo que haya ningún
inconveniente que te impida disfrutar de este
bonito efecto.
Buena
suerte.
|
