Cómo crear un menú horizontal con YUI

Vamos a convertir los siguientes links en un menu, confeccionado con YUI:

África
,Argelia,Benin,Botswana,Burkina Faso,Cataratas Victoria,Congo Brazzaville,Djibouti,Egipto,Etiopía,Gabon,Kenya,Lesotho,Libia,Madagascar,Malawi,Mali,Marruecos,Mauritania,Mozambique,Namibia,República Centroafricana,Rwanda,Senegal,Sudáfrica,Swazilandia,Tanzania,Togo,Uganda,Zambia,Zanzíbar

Asia
,Armenia,Bhutan,Birmania,Camboya,China,India,Indonesia,Kazakstán,Kirgyzstán,Laos,Malasia,Nepal,Papúa,Sikkim,Srilanka,Tailandia,Tíbet,Uzbekistán,Vietnam

América
,Alaska,Argentina,Bolivia,Brasil,Canadá,Chile,Costa Rica,Cuba,Guatemala,Honduras,Nicaragua,Panamá,Perú,Venezuela

Oriente Próximo
,Irán,Jordania,Líbano,Omán,Siria,Turquía,Yemen

Oceanía
,Australia,Nueva Zelanda,Papúa
Europa
,España,Finlandia,Grecia,Islandia,Italia,Laponia,Portugal

Rutas Polares
,Groenlandia

Para hacerlo, crearemos un contenedor:
<div id="pointermenu"></div>

Haremos referencias a las siguientes librerías de YUI y css, ver en la siguiente página cuáles son:
http://developer.yahoo.com/yui/menu/

En un script colocamos:
YAHOO.util.Event.onDOMReady(creaMenuTop);

Y finalmente he aquí la función con la que construimos todo el menú:

function creaMenuTop()
{
var aItems = [

{
text: "África",
submenu: {

id: "africa",

itemdata: [{text:"Argelia",url:"http://argelia.pasaporte3.com"}
,{text:"Argelia",url:"http://argelia.pasaporte3.com"}
.......................................................
]
} ,
url:"/africa/africa.php"
},

...................................
];

var oMenu = new YAHOO.widget.MenuBar ("pointermenu", {
autosubmenudisplay: true,
hidedelay: 300, showdelay: 100, scrollincrement: 3, iframe: false,
lazyload: false
});


oMenu.addItems(aItems);

oMenu.render();


oMenu.show();



}

IT HAS BEEN EASY? ABSOLUTELY!!!!



No hay comentarios para este artículo.

Envía tu comentario...


Los campos con * son obligatorios.


TrackBacks

Url para TrackBacks: http://netadictos.weblog.discapnet.es/articulo.aspx?idA=1430

No hay TrackBacks para este artículo.