Orientación para menú...

Galor · #1 (**permalink**) 16/01/2008, 02:27

Saludos
Gracias a un forero he encontrado una web que tiene multitud de menus, y me gustaría indagar en uno en concreto:
http://www.phatfusion.net/imagemenu/index.htm

Según entiendo es necesario tener algo que se llama mootools v1.11
Accedo a la web, selecciono las casillas, le doy a download y me baja un fichero mootools.js.txt
Alguien podría orientarme sobre como practicar con este menú? porque si inserto el código del menú en Dreamweaver (dentro de body), y pongo el .js en la carpeta correspondiente, solo consigo que me salga código en pantalla (y es que por mas que miro, no veo en el código donde cambiar las imágenes ni nada).... maldita ignorancia...

Gracias

Raulmmmm · #2 (**permalink**) 16/01/2008, 11:41

Bájate esto:
-http://www.phatfusion.net/_common/js/mootools.js
-http://www.phatfusion.net/imagemenu/imageMenu.js
-http://www.phatfusion.net/imagemenu/imageMenu.css
Guárdalo todo en la misma carpeta.

Pon este código (en modo vista de código) entre <head> y </head>
<link href="imageMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="imageMenu.js"></script>

Y este entre <body> y </body>:
<div id="example">
<div id="imageMenu">
<ul>
<li class="landscapes"><a href="http://www.aaronbirchphotography.com">Landscapes</a></li>

<li class="people"><a href="http://www.aaronbirchphotography.com">People</a></li>
<li class="nature"><a href="http://www.aaronbirchphotography.com">Nature</a></li>
<li class="urban"><a href="http://www.aaronbirchphotography.com">Urban</a></li>
<li class="abstract"><a href="http://www.aaronbirchphotography.com">Abstract</a></li>
</ul>
</div>

<script type="text/javascript">

window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
});
</script>

</div>

Un saludo

Galor · #3 (**permalink**) 16/01/2008, 16:40

Puesss....te cuento porque no me funciona.
De los enlaces que me has dejado, saco un montón de código, el cual copio-pego, en un documento de texto, el cual luego renombro como mootools.js, imageMenu.js e imageMenu.css ...¿correcto hasta aquí?

Si es así, luego abro Dreamweaver, creo una página html, inserto el código como y donde me dices, guardo el documento como menu.html en la misma carpeta donde tengo esos 3 ficheros...pulso F12 y me sale una ventana en blanco.

¿Dónde estoy metiendo la pata?

Raulmmmm · #4 (**permalink**) 17/01/2008, 11:46

Lo siento... ¿Cómo va a funcionar un menú de imágenes, sin imágenes

?
Bájate también estas imágenes y guárdalas en una carpeta llamada "images":
-http://www.phatfusion.net/imagemenu/images/landscapes.jpg
-http://www.phatfusion.net/imagemenu/images/people.jpg
-http://www.phatfusion.net/imagemenu/images/nature.jpg
-http://www.phatfusion.net/imagemenu/images/urban.jpg
-http://www.phatfusion.net/imagemenu/images/abstract.jpg

Galor · #5 (**permalink**) 18/01/2008, 05:43

Ya decía yo que algo faltaba....muchas gracias campeón, ya funciona :)