Foros del Web » Programando para Internet » Javascript »

Menú flotante

Estas en el tema de Menú flotante en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/03/2008, 01:41
Avatar de casf79  
Fecha de Ingreso: noviembre-2007
Mensajes: 184
Antigüedad: 16 años, 4 meses
Puntos: 0
Exclamación Menú flotante

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
__________________
Coches Míticos
  #2 (permalink)  
Antiguo 27/03/2008, 03:55
Avatar de Mosiah  
Fecha de Ingreso: mayo-2002
Ubicación: Vitoria - Madrid
Mensajes: 229
Antigüedad: 21 años, 10 meses
Puntos: 0
Re: Menú flotante

Hola,

espero que te sirva algúno de aquí:

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

Salu2
  #3 (permalink)  
Antiguo 27/03/2008, 05:41
Avatar de casf79  
Fecha de Ingreso: noviembre-2007
Mensajes: 184
Antigüedad: 16 años, 4 meses
Puntos: 0
Re: Menú flotante

Cita:
Iniciado por Mosiah Ver Mensaje
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
__________________
Coches Míticos
  #4 (permalink)  
Antiguo 27/03/2008, 08:15
Avatar de casf79  
Fecha de Ingreso: noviembre-2007
Mensajes: 184
Antigüedad: 16 años, 4 meses
Puntos: 0
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&iacute;tulo</title>
</head>

<body>
<p>&nbsp;</p>
<p>&nbsp;</p>

<p>&nbsp;</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>
El código debe engancharse delante de la primera etiqueta <?php

Saludos y gracias

PD: Solución encontrada en www.elcodigo.com
__________________
Coches Míticos
  #5 (permalink)  
Antiguo 09/05/2008, 05:25
Avatar de casf79  
Fecha de Ingreso: noviembre-2007
Mensajes: 184
Antigüedad: 16 años, 4 meses
Puntos: 0
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!
__________________
Coches Míticos
  #6 (permalink)  
Antiguo 30/09/2010, 18:36
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1
Antigüedad: 13 años, 5 meses
Puntos: 0
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???
  #7 (permalink)  
Antiguo 30/09/2010, 18:53
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: Menú flotante

Hola:

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

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 07:02.