Menu vertical siempre visible arriba cuando llegue al borde superior

fmorales · #1 (**permalink**) 07/10/2009, 06:05

Hola.

Necesito hacer un menu vertical situado a la izquierda para una pagina, el cual, cuando se scrolle hacia abajo, no desaparezca, pero no pueod usar position:fixed ya que necesito que el menú se mueva hacia arriba .... HASTA LLEGAR AL BORDE SUPERIOR DE LA PAGINA, y esto es lo que me está volviendo loco ...

Alguien tiene algún ejemplo por ahí?

C A B E C E R A
---------------
M
e
n Contenido
u

Osea, que cuando desaparezca la cabecera cuando se va scrolando hacia abajo...
el Menu vertical al llegar al borde superior no siga subiendo

Muchas Gracias.

RubenGuerrero · #2 (**permalink**) 07/10/2009, 08:03

La idea sería la siguiente:

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menú a la Izq</title>
<style type="text/css">
<!--
#uno {
	height: 400px;
	width: 300px;
	left: 0px;
	top: 0px;
	position: fixed;
	background-color: #0F6;
	float: left; /*Esto lo que haces es flotar el div #uno a la izquierda*/
}
#dos {
	height: 500px;
	width: 500px;
	margin-left: 350px; /*Deja de margen la suma del menu más el margen que quieras dejar entre en menú y el contenido*/
	}
-->
</style>
</head>

<body>
<div id="uno"></div>
<div id="dos">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus  tristique justo eu ipsum tincidunt sit amet porta augue ultricies.  Morbi lobortis mollis lectus eget vulputate. Vestibulum blandit diam  molestie dolor cursus vitae tincidunt tellus fermentum. Vestibulum id  lectus erat. Vestibulum vehicula malesuada dictum. Ut non metus eget  orci feugiat imperdiet ut nec sem. Nulla et nisl erat, non rutrum  tortor. Donec in enim ac tellus pharetra malesuada quis ac dui.  Maecenas volutpat purus non nisl porttitor tincidunt. Nulla  pellentesque libero non felis ultrices luctus. </p>
    <p>Suspendisse potenti. Sed dapibus justo in lacus cursus ornare.  Mauris tristique fringilla libero a auctor. Fusce euismod lorem ac nibh  imperdiet id interdum nibh condimentum. Integer sagittis nibh a neque  condimentum commodo. Proin bibendum purus in nunc consectetur interdum.  Pellentesque volutpat lobortis faucibus. Fusce at ipsum erat, eu  lacinia neque. Cras mauris libero, aliquet vel iaculis nec, faucibus  quis quam. Nulla scelerisque, erat quis auctor sagittis, mauris enim  volutpat libero, sit amet dapibus mauris leo ut massa. Nullam urna  sapien, pulvinar ac viverra ac, placerat a libero. Integer blandit arcu  id urna molestie pellentesque. Pellentesque ultrices ligula et urna  egestas gravida. </p>
    <p>Integer egestas fermentum rhoncus. Aliquam est orci, vehicula eu  sagittis vel, egestas nec massa. Etiam ligula nisi, malesuada ut tempor  nec, tincidunt in elit. Ut massa orci, vehicula vitae lobortis a,  rutrum vitae augue. In sodales placerat felis, in lacinia ligula tempor  sodales. Aliquam a arcu a sem cursus ornare ac et quam. Integer blandit  urna ac sem malesuada interdum. In libero magna, adipiscing in  imperdiet vel, elementum fermentum ante. Integer pulvinar magna quis  nibh ullamcorper sed hendrerit sapien convallis. Proin scelerisque nunc  sit amet sapien vulputate ac malesuada ipsum convallis. Maecenas nisi  tellus, congue et vestibulum ut, hendrerit id massa. Maecenas ipsum  nibh, tempor non placerat eu, viverra et nulla. Aenean nec massa neque,  vestibulum vulputate dolor. </p>
    <p>Fusce porta ante in nunc interdum pellentesque. Nam suscipit, felis  ut tempus ornare, velit enim molestie quam, eu gravida eros ipsum eget  velit. Aliquam vitae ipsum a mauris tincidunt dapibus at quis mauris.  Morbi non sapien non neque sodales luctus eu nec risus. Vivamus  ullamcorper consequat mi. Curabitur a lectus purus. Nam ut magna a  risus feugiat sollicitudin id a diam. Suspendisse potenti. Sed purus  neque, tempus nec cursus in, iaculis blandit lorem. Aenean non neque et  metus pharetra venenatis vel sit amet risus. </p>
    <p>Vestibulum eget ullamcorper quam. Morbi id sagittis magna. Quisque  vel mi posuere sem fermentum placerat. Donec tincidunt euismod  malesuada. Maecenas dapibus eros id felis auctor auctor. In mattis  viverra enim id fringilla. In hac habitasse platea dictumst. Quisque  quam ligula, vehicula non consectetur non, sollicitudin ac leo. Cras  consectetur imperdiet ultrices. Vivamus non semper nulla. Quisque  commodo egestas sapien, eu auctor sem cursus ut. Curabitur tempor  pulvinar enim quis accumsan. Suspendisse lectus enim, facilisis sit  amet tempor eu, bibendum quis massa. Quisque elit lectus, congue vel  dapibus in, laoreet quis urna. Vivamus dapibus, erat in condimentum  tincidunt, nunc turpis bibendum nulla, eu posuere velit lacus at dolor. </p>
    <p>Cras in enim in elit sagittis sodales. Donec ullamcorper rhoncus mi  ut sagittis. In hac habitasse platea dictumst. Proin arcu diam,  volutpat quis faucibus eget, adipiscing et nisi. Praesent dapibus eros  at magna malesuada lacinia. Phasellus sed nunc elit. Vestibulum vel  ante urna, sed porttitor felis. Vivamus scelerisque fermentum tellus,  sagittis luctus metus pretium non. Morbi tincidunt, diam eu imperdiet  iaculis, eros lectus pharetra justo, ac interdum lorem lorem ut eros.  Vivamus consequat eros erat. </p>
        <p>Phasellus facilisis lectus sit amet augue luctus tempor. Mauris ac  lacus in neque posuere eleifend malesuada ut diam. Sed tortor est,  rutrum nec mollis eu, fringilla vel turpis. Aliquam erat volutpat.  Suspendisse potenti. Cras suscipit massa consequat lorem tincidunt eget  egestas lorem aliquam. Quisque massa eros, porta ac vehicula volutpat,  feugiat at urna. Mauris laoreet, mi at viverra semper, sem sem feugiat  eros, laoreet scelerisque neque nunc id enim. Sed et purus faucibus  massa congue ultrices. Donec sed odio eget metus gravida sollicitudin.  Sed rutrum aliquet tellus, sodales convallis tellus porttitor ut.  Mauris accumsan nibh at mauris venenatis et pellentesque velit  suscipit. Nunc auctor, ligula quis pharetra suscipit, lorem lectus  pretium felis, non tempor enim metus non tortor. </p>
</div>
</body>
</html>

Creo que es eso lo que quieres, delo lo contrario dimelo y vemos haber que pasa

fmorales · #3 (**permalink**) 07/10/2009, 08:35

Ante todo muchas gracias por tu ayuda.

Te comento, no, no es exactamente eso, eso es lo que he encontrado en todos sitios, la forma habitual ... yo necesito algo tal que asi:

Osea, el menu, no está inicialmente arriba del todo, osea, con top:0px, ya que está la cabecera por encima, pero cuando el usuario scrolla hacia abajo ... todo ha de subir, incluido el menu, hasta que llegue al borde superior del navegador, donde no se empezaria a esconder, sino que iria bajando con el scroll de la pagina.

En su ejemplo el menu está siempre fijo, y yo necesito que al principio se mueva hasta que llegue arriba.

Muchas gracias

RubenGuerrero · #4 (**permalink**) 07/10/2009, 15:00

aaaaa joder que fallo ya lo entiendo.... que si estas abajo de la pagina el menú este pegado a la parte superior, pero que la cabecera haga de tope cuando subas.... la verdad, no se hacerlo mediante CSS si encuentro algo te lo pongo no te preocupes

Un saludo y gracias

jomaruro · #5 (**permalink**) 10/10/2009, 14:18

Hola:

Pienso que deberías hacerlo con javascript, pregunta en el foro correspondiente.

Saludos.

mayid · #6 (**permalink**) 11/10/2009, 10:46

Justamente en el foro de javascript estaban comentando menues como esos. Fijate alguno entre estos:

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

En particular: Slide-In Menu Bar I (Cada demo aparece al cargar la pagina. Este aparece a un costado izquierdo. )

RubenGuerrero · #7 (**permalink**) 12/10/2009, 05:20

Ya he encontrado como hacerlo

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<body>
<div id="floatdiv" style="
    position: absolute;   
    width:140px;height:230px;left:0px;top:0px;   
    padding:16px;   
    border:3px solid #94039E">
</div>  
<script language="JavaScript" type="text/javascript" src="floating_menu.js"></script>
<div style="width: 200px;"><p>

Nulla diam arcu, porttitor eleifend commodo id, elementum et mauris. Aenean accumsan nisi imperdiet est venenatis eget volutpat est venenatis. Vestibulum blandit quam risus, at commodo diam. Cras ac lectus sit amet leo porta sagittis. Vestibulum vestibulum sem id mauris congue at fermentum felis convallis. Nulla odio eros, ultrices a ultrices vitae, lobortis sit amet mi. Vestibulum posuere, enim at elementum facilisis, sem ipsum mattis sem, nec vestibulum mauris libero vel ipsum. Quisque lacinia, nisl hendrerit laoreet molestie, erat enim malesuada elit, sed ullamcorper tellus odio nec massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam non mauris id risus placerat volutpat. Donec eu luctus turpis. Sed molestie, lacus non cursus sagittis, nisl arcu pulvinar quam, at lacinia mi mauris feugiat eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sed orci non lectus pellentesque ornare quis a turpis. Suspendisse at magna ut metus ultricies vehicula. Sed vulputate pretium mi. Quisque ac nisl eros. Duis in faucibus est.

Pellentesque nisi dui, semper eu posuere in, interdum at orci. Nam congue blandit dui, et posuere eros eleifend et. Nulla vulputate imperdiet venenatis. Maecenas interdum diam sit amet odio tincidunt feugiat. Nullam eget est velit. Aliquam mollis purus at metus condimentum vel aliquet sapien auctor. Nulla in leo nisl, sed aliquam orci. Etiam pharetra, urna ac ullamcorper dignissim, lacus lorem tincidunt augue, ut luctus nisi orci id libero. Mauris non velit elit, eget lacinia purus. Praesent hendrerit lobortis vulputate. Duis nec neque eros, ac convallis urna. Curabitur sagittis dolor sed est vulputate elementum.

Quisque eget erat urna, vel tincidunt nunc. Phasellus imperdiet facilisis sem, eget varius velit cursus eget. Etiam nec ante ac nulla pulvinar accumsan a id magna. Praesent consectetur pharetra dui, euismod interdum elit adipiscing id. Vestibulum mollis est ac nisi scelerisque sed vestibulum odio cursus. Donec rutrum, diam id lacinia volutpat, arcu dolor iaculis ante, ut tristique tellus dui sit amet nibh. Donec non commodo nisl. Sed non neque eu dui placerat viverra et sit amet dui. Donec ut dolor eros, et feugiat leo. Nunc non metus nibh, quis aliquam arcu.

Curabitur eu dictum odio. Suspendisse nec ante tempus eros aliquet vulputate. Sed nec malesuada augue. Integer id condimentum eros. Fusce dignissim, sapien eu cursus ultrices, urna lorem bibendum magna, nec venenatis nisi urna ut ipsum. Morbi gravida dui sed risus ultrices bibendum. Praesent tristique nunc eget sapien consectetur eget dictum neque mollis. Nullam mollis turpis vel urna aliquet accumsan. Nulla tempor elit in leo ornare aliquam. Vivamus lobortis, lacus vel adipiscing facilisis, velit lectus blandit neque, sed luctus turpis tortor vitae nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p></div>
</body>
</html>

y el floating_menu.js

Código:

// JavaScript Document
var floatingMenuId = 'floatdiv';   
var floatingMenu =   
{   
    targetX: -200,   
    targetY: 14,   
  
    hasInner: typeof(window.innerWidth) == 'number',   
    hasElement: typeof(document.documentElement) == 'object'  
        && typeof(document.documentElement.clientWidth) == 'number',   
  
    menu:   
        document.getElementById   
        ? document.getElementById(floatingMenuId)   
        : document.all   
          ? document.all[floatingMenuId]   
          : document.layers[floatingMenuId]   
};   
  
floatingMenu.move = function ()   
{   
    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';   
    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';   
}   
  
floatingMenu.computeShifts = function ()   
{   
    var de = document.documentElement;   
  
    floatingMenu.shiftX =     
        floatingMenu.hasInner     
        ? pageXOffset     
        : floatingMenu.hasElement     
          ? de.scrollLeft     
          : document.body.scrollLeft;     
    if (floatingMenu.targetX < 0)   
    {   
        floatingMenu.shiftX +=   
            floatingMenu.hasElement   
            ? de.clientWidth   
            : document.body.clientWidth;   
    }   
  
    floatingMenu.shiftY =    
        floatingMenu.hasInner   
        ? pageYOffset   
        : floatingMenu.hasElement   
          ? de.scrollTop   
          : document.body.scrollTop;   
    if (floatingMenu.targetY < 0)   
    {   
        if (floatingMenu.hasElement && floatingMenu.hasInner)   
        {   
            // Handle Opera 8 problems   
            floatingMenu.shiftY +=   
                de.clientHeight > window.innerHeight   
                ? window.innerHeight   
                : de.clientHeight   
        }   
        else  
        {   
            floatingMenu.shiftY +=   
                floatingMenu.hasElement   
                ? de.clientHeight   
                : document.body.clientHeight;   
        }   
    }   
}   
  
floatingMenu.calculateCornerX = function()   
{   
    if (floatingMenu.targetX != 'center')   
        return floatingMenu.shiftX + floatingMenu.targetX;   
  
    var width = parseInt(floatingMenu.menu.offsetWidth);   
  
    var cornerX =   
        floatingMenu.hasElement   
        ? (floatingMenu.hasInner   
           ? pageXOffset   
           : document.documentElement.scrollLeft) +    
          (document.documentElement.clientWidth - width)/2   
        : document.body.scrollLeft +    
          (document.body.clientWidth - width)/2;   
    return cornerX;   
};   
  
floatingMenu.calculateCornerY = function()   
{   
    if (floatingMenu.targetY != 'center')   
        return floatingMenu.shiftY + floatingMenu.targetY;   
  
    var height = parseInt(floatingMenu.menu.offsetHeight);   
  
    // Handle Opera 8 problems   
    var clientHeight =    
        floatingMenu.hasElement && floatingMenu.hasInner   
        && document.documentElement.clientHeight    
            > window.innerHeight   
        ? window.innerHeight   
        : document.documentElement.clientHeight   
  
    var cornerY =   
        floatingMenu.hasElement   
        ? (floatingMenu.hasInner     
           ? pageYOffset   
           : document.documentElement.scrollTop) +    
          (clientHeight - height)/2   
        : document.body.scrollTop +    
          (document.body.clientHeight - height)/2;   
    return cornerY;   
};   
  
floatingMenu.doFloat = function()   
{   
    var stepX, stepY;   
  
    floatingMenu.computeShifts();   
  
    var cornerX = floatingMenu.calculateCornerX();   
  
    var stepX = (cornerX - floatingMenu.nextX) * .07;   
    if (Math.abs(stepX) < .5)   
    {   
        stepX = cornerX - floatingMenu.nextX;   
    }   
  
    var cornerY = floatingMenu.calculateCornerY();   
  
    var stepY = (cornerY - floatingMenu.nextY) * .07;   
    if (Math.abs(stepY) < .5)   
    {   
        stepY = cornerY - floatingMenu.nextY;   
    }   
  
    if (Math.abs(stepX) > 0 ||   
        Math.abs(stepY) > 0)   
    {   
        floatingMenu.nextX += stepX;   
        floatingMenu.nextY += stepY;   
        floatingMenu.move();   
    }   
  
    setTimeout('floatingMenu.doFloat()', 20);   
};   
  
// addEvent designed by Aaron Moore   
floatingMenu.addEvent = function(element, listener, handler)   
{   
    if(typeof element[listener] != 'function' ||    
       typeof element[listener + '_num'] == 'undefined')   
    {   
        element[listener + '_num'] = 0;   
        if (typeof element[listener] == 'function')   
        {   
            element[listener + 0] = element[listener];   
            element[listener + '_num']++;   
        }   
        element[listener] = function(e)   
        {   
            var r = true;   
            e = (e) ? e : window.event;   
            for(var i = element[listener + '_num'] -1; i >= 0; i--)   
            {   
                if(element[listener + i](e) == false)   
                    r = false;   
            }   
            return r;   
        }   
    }   
  
    //if handler is not already stored, assign it   
    for(var i = 0; i < element[listener + '_num']; i++)   
        if(element[listener + i] == handler)   
            return;   
    element[listener + element[listener + '_num']] = handler;   
    element[listener + '_num']++;   
};   
  
floatingMenu.init = function()   
{   
    floatingMenu.initSecondary();   
    floatingMenu.doFloat();   
};   
  
// Some browsers init scrollbars only after   
// full document load.   
floatingMenu.initSecondary = function()   
{   
    floatingMenu.computeShifts();   
    floatingMenu.nextX = floatingMenu.calculateCornerX();   
    floatingMenu.nextY = floatingMenu.calculateCornerY();   
    floatingMenu.move();   
}   
  
if (document.layers)   
    floatingMenu.addEvent(window, 'onload', floatingMenu.init);   
else  
{   
    floatingMenu.init();   
    floatingMenu.addEvent(window, 'onload',   
        floatingMenu.initSecondary);   
}