27-mar-2008, 01:41
|
#1 (permalink) |
 
Fecha de Ingreso: noviembre-2007
Mensajes: 51
|
Menú flotante
Estoy buscando la manera de hacer una menú flotante para el php nuke. Posteo aquí y no en prefabricadas por que me han dirigido a este foro. Alguien sabe como puedo hacer un menú flotante? Lo que necesito es que cuando el visitante suba y baje la página el menú siempre esté a la vista. Por lo que me han ido diciendo tengo que hacerlo con javascript, pero yo de java... vamos que no lo llebo demasiado bien. Alguna idea? Gracias |
|
|
|
27-mar-2008, 08:15
|
#4 (permalink) |
|
Fecha de Ingreso: noviembre-2007
Mensajes: 51
|
Re: Menú flotante
Por fin, unas semanas despues he encontrado la solución!!!
Copiad este código y pegarlo al inicio de las páginas que quereis que salga el menú, en mi caso index.php y modules.php.
Cita:
El código debe engancharse delante de la primera etiqueta <?php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script language="javascript" type="text/javascript"> // Menu flotante by Peter-Paul Koch // Pagina personal del autor: http://www.xs4all.nl/~ppk/js/?version5.html // // Este script y otros muchos pueden // descarse on-line de forma gratuita // en El Código: www.elcodigo.com // numero de pixels de separacion con la parte superior de la ventana var theTop = 30 var menu, scrollIt // posicion actual var old = theTop // a true, la posición del menu se mantiene a "theTop" pixels, aunque se desplace la pagina verticalmente // a false, el menu es fijo var scrollIt = true // INICIALIZACION function init() { // obtiene referencia al objeto con el menu menu = new getObj('menu') // obtiene si hay que mantenerlo fijo o moverlo, a partir del checkbox del propio menu scrollIt = (document.layers) ? document.menu.document.forms[0].elements[0].checked : document.forms["capamenu"].elements[0].checked // inicia el proceso que mantiene la posicion a "theTop" pixels movemenu() } //MOVIMIENTO function movemenu() { if (scrollIt) { if (window.innerHeight) { pos = window.pageYOffset } else if (document.documentElement && document.documentElement.scrollTop) { pos = document.documentElement.scrollTop } else if (document.body) { pos = document.body.scrollTop } if (pos < theTop) pos = theTop else pos += 30 if (pos == old) menu.style.top = pos + 'px' old = pos } moveID = setTimeout('movemenu()',200) } //OBTENCION DE REFERENCIA AL OBJETO function getObj(name) { // si soporta DOM Lelvel 2 if (document.getElementById) { this.obj = document.getElementById(name) this.style = document.getElementById(name).style // si soporta el DOM del IE4.x } else if (document.all) { this.obj = document.all[name] this.style = document.all[name].style // si soporta el DOM del N4.x } else if (document.layers) { this.obj = document.layers[name] this.style = document.layers[name] } } window.onload = init if (document.captureEvents) { //N4 requiere invocar la funcion captureEvents document.captureEvents(Event.LOAD) } </script> <style TYPE="text/css"> #menu { position: absolute; top: 13px; left: 9px; font: 12px verdana,arial,helvetica; color: #0000cc; background: #eeee00; padding: 10px; border: none; z-index: 5; background-color: #CCCCCC; } /* :visited es necesario porque el menu contiene enlaces internos (#) y el IE los ve como ya visitados */ div#menu a, div#menu a:visited { color: #0000cc; } </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Documento sin título</title> </head> <body> <p> </p> <p> </p> <p> </p> <!-- Definicion del menu --> <div id="menu"> <p><a href="index.php">Home</a><br> <a href="http://localhost/html/modules.php?name=Stories_Archive">Noticias<br /> </a><a href="http://localhost/html/modules.php?name=Search">Buscar<br /> </a><a href="http://localhost/html/modules.php?name=Content">Contenido</a><br /> <a href="http://localhost/html/modules.php?name=Web_Links">Eventos</a><br /> <a href="http://localhost/html/modules.php?name=Feedback">Sugerencias</a></p> <form name="capamenu"> <input type="checkbox" onClick="scrollIt = !scrollIt" checked>Flotante </form> </div> Saludos y gracias PD: Solución encontrada en www.elcodigo.com |
|
|
|
Mode Lineal
