Foros del Web - Menú flotante

Foros del Web (http://www.forosdelweb.com/)

- Javascript (http://www.forosdelweb.com/f13/)

- - Menú flotante (http://www.forosdelweb.com/f13/menu-flotante-569667/)

Buenos días,

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

Re: Menú flotante

Hola,

espero que te sirva algúno de aquí:

http://www.dynamicdrive.com/dynamicindex1/

Salu2

Re: Menú flotante

Cita:

Iniciado por Mosiah (Mensaje 2338246)

Hola,

espero que te sirva algúno de aquí:

http://www.dynamicdrive.com/dynamicindex1/

Salu2

Para ser sincero no se si me sirve, no veo la manera de insertarlo en el nuke

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:

<!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>

<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>

El código debe engancharse delante de la primera etiqueta <?php

Saludos y gracias

PD: Solución encontrada en www.elcodigo.com

Re: Menú flotante

Bueno ya que me han invitado a contestar por que hace tiepo que no hago nada por aquí.

Pues dejo este mensajillo.
Saludos!

Respuesta: Re: Menú flotante

Disculpa, yo tambien necesitaba poner eso flotante y copie el ultimo codigo que pusiste, lo modifique en lo necesario y me quedó algo así:

Código:

<script language="javascript" type="text/javascript"><!--  

//separacion vertical   

var theTop = 0       

var menu, scrollIt          

var old = theTop  

        

//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 += 0     

        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: relative;     

    top: 0px;     

    left: 0px;     

    font: 12px verdana,arial,helvetica;     

    color: #000000;     

    background-color: transparent;     

    padding: 0px;     

    border: none;     

    z-index: 5;     

}     

    

/* :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><style TYPE="text/css" mce_bogus="1">     

    

#menu {   

    position: relative;    

    top: 0px;     

    left: 88%;     

    font: 12px verdana,arial,helvetica;     

    color: #ffffff;     

    background: #eeee00;     

    padding: 10px;     

    border: none;     

    z-index: 5;     

}     

    

 

    

    

</style>

Yo necesito hacer que baje con la página, el problema con el que me tope fue que al bajar, se sale del DIV en el que se encuentra... alguna idea de como solucionar esto???

Respuesta: Menú flotante

Hola:

Cerramos el tema por viejo... se puede referenciar.

Saludos :arriba: