Menú Curso Tecnologías en Cliente : Funciones navmenu y navmenu2 para generar Menús Horizontales y Verticales.

(Anterior) Menús con JavaScript
// barranav.js

var navURLs  = new Array('menu1.htm', 'menu2.htm', 'menu3.htm','menu4.htm', 'menu5.htm');
var Text = new Array('Página Uno','Página Dos','Página Tres','Página Cuatro','Página Cinco');


var navURLs2  = new Array('menu1.htm', 'menu2.htm', 'menu3.htm','menu4.htm', 'menu5.htm');
var Text2 = new Array('Página Uno','Página Dos','Página Tres','Página Cuatro','Página Cinco');

function navmenu() {
	var navStr= '<table cellpadding=10 align=center bgcolor=#EEEEEE><tr>';
	for (var i = 0; i < navURLs.length; i++) {
		if (location.href.indexOf(navURLs[i]) == -1) {
			navStr += '<td align=center><a href="' + navURLs[i] + '">'+ Text[i] + '</a></td>';  }
			 else {
                        navStr += '<td align=center bgcolor=#CCCEEE>'+ Text[i] + '</td>'; }
		}
        navStr += '</tr></table>';
	document.writeln(navStr);
	}

function navmenu2() {
	var navStr= '<table cellpadding=10 align=center bgcolor=eeeeee>';
	for (var i = 0; i < navURLs2.length; i++) {
		if (location.href.indexOf(navURLs2[i]) == -1) {
			navStr += '<tr><td align=center><a href="' + navURLs2[i] + '">'+ Text2[i] + '</a></td></tr>';  }
			 else {
                        navStr += '<tr><td align=center bgcolor=ccceee>'+ Text2[i] + '</td></tr>'; }
	
}

       navStr += '</table>';
     
       document.writeln(navStr);
	}


  • La primera y segunda sección declaran las listas de páginas que serán utilizadas en los respectivos menús mediante un arreglo JavaScript.

  • La función navmenu() genera una tabla HTML / XHTML con un solo renglón (<tr>) y diversas celdas (<td>) , en efecto generando un menú horizontal.

  • La función navmenu2() genera una tabla HTML / XHTML con diversos renglones (<tr>) cada uno con una celda (<td>), en efecto generando un menú vertical .

Terminos Legales de Contenido ©2000-2011 Osmosis Latina

Diseñado bajo estándares : XHTML   CSS  

webmaster@osmosislatina.com