| Sección
"Java Scripts" |
|
Lección
40 |
Menú
desplegable 2 bis.
Si
tuviste algún inconveniente con el archivo "navcond.js",
y no lo puedes instalar, o directamente no lo
pudiste bajar, presentamos aquí una solución al
problema.
Solo
deberás cortar y pegar tres Scripts que te daré
enseguida.
El
primero que hallarás en la caja de abajo, es el
Script "navcond.js" abierto, así que lo
puedes cortar y pegar debajo de la etiqueta <Head>
en tu página.
Luego,
debajo de este Script, pegas el segundo que
hallarás en la segunda caja (Siendo ese al cual
le debes cambiar los datos como explico
enseguida).
Y
luego cortas y pegas el tercer Script que debes
pegar donde se encuentra la etiqueta <Body>
en tu página (O sea, eliminas <Body>, y en
reemplazo pegas el código que te doy en la
tercera caja de abajo).
Entonces,
pegarás el primer Script que hallarás en la
primera caja de abajo. Luego deberás pegar este,
al cual le debes indicar los datos de tus propios
enlaces como explicaré abajo.
<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 "Head" a
continuación del Script de arriba.
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.
|
