entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Menu estático en HTML/CSS al bajar scroll?

Como puedo hacer para que el menu horizontal y principal de mi pagina web no se descoloque al hacer scroll hacia abajo por los contenidos de la web? Creo recordar que deberia ser con la etiqueta position:fixed para que quede estático y no se altere sean cuales sean las dimensiones del cuerpo de la página pero no lo consigo.

El menu en cuestion es este y así queda con su respectivo CSS del menu que es este:

#menu ul
{   margin: 0px;
    padding: 0px;
}

#menu ul li{
    list-style: none;
    display: inline-block;
    padding: 25px 8px;
    margin-right: 60px;
    margin-left: 60px;
}

#menu ul li a{
    color: #FFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    padding: 25px 8px;
}

#menu ul li a:hover{
    background-color: #91B0AF;
    color: #000;
    font-weight: bold;
    padding: 25px 8px;
}

Si pongo la position fixed en el div completo del menu, la cosa queda así, se desajusta conforme a la imagen de fondo y se alinea a la izquierda :S

Gracias!!

2votos

Peter comentado

¿Solucionaste el problema de tu menú?

5 Respuestas

2votos

monomanco Puntos220

Buenas.
Que es lo que quieres mantener el menu o toda la cabecera?

En principio con la etiqueta fixed deberia de quedar fijo en la posicion que le digas tomando como referencia el navegador.

Por si te sirve, aquí tienes un ejemplo de un menu posicionado a una distancia de la parte superior de X, que al hacer scroll se queda anclado y al volver vuelse a su sitio.

http://jsfiddle.net/adamb/F4BmP/

A mi parecer es un recurso sencillo y cómodo.

Espero que te sirva, un saludo.

0voto

AvkZ comentado

La idea es que mi menu de color verde, cuadra exactamente con la linea de la misma altura que pertenece al fondo. Fijate en esta captura que le he cambiado el color al menu en sí.

Igualmente al hacer scroll date cuenta que el cuerpo de la pagina sube hacia arriba al igual que el menu y el logo de la cabecera :S

No sabria donde meter el position fixed, ni de que manera acoplar el menu tal cual ya lo tengo pero sin alteraciones al hacer scroll

2votos

monomanco comentado

Deberías el fixed al UL, con un TOP y centrado.

Un saludo

1voto

barcadict Puntos160

Hola, efectivamente es con position:fixed y solo indicas la posicion del menu, pero te aconsejo mejor que lo hagas con JavaScript, aqui te dejo un link que me parece es lo que tu quieres hacer.

http://www.outyear.co.uk/smint/

Saludos

2votos

alex_alvarez Puntos2160

Buenas,

yo tengo un menú similar, que queda fijado a la izquierda, y lo hago de la siguiente manera:

                <ul id="navigation" style="position: absolute; z-index: 99; padding-top: 150px;">
                    <li class="usuarios" id="usuarios"><a title=""></a></li>
                    <li class="distribuidores" id="distribuidores"><a title=""></a></li>
                    <li class="embalajes" id="embalajes"><a title=""></a></li>
                    <li class="KLTs" id="KLTs"><a title=""></a></li>
                    <li class="movimientos" id="movimientos"><a title=""></a></li>
                    <li class="klt_distribuidor" id="klt_distribuidor"><a title=""></a></li>
                    <li class="periodo_klt" id="periodo_klt"><a title=""></a></li>
                </ul>

Esto hace que con el scroll se mantenga siempre en la misma posición verticalmente y sea visible todo el todo el rato.

Saludos!

0voto

didac_rios comentado

Al estar en posicion absoluta, tendrias que usar top, en lugar de padding-top, padding-top le da un espacio al elemento ul pero no lo posiciona.

0voto

alex_alvarez comentado

Ara que lo dices tienes razón, la cosa está en que está dentro de un div, que ya lo posiciono, con top.. se me pasó ponerlo..

Gracias!

2votos

didac_rios Puntos690
#menu ul {
    position: fixed;
    top: 100px: // o lo que sea
}

Si lo que quieres es centrarlo horizontalmente, tendras que tener un tamaño del menu fijo y haces un left:50%

Y le das un margin-left negativo de la mitad del width del menu.

Saludos

1voto

gerko23 Puntos1930

Hola en base a alguna experiencia puedo decirte que rebicés la posicion del div de abajo y le des prioridad a el menu y su pocision luego coloques lo demas para poner el header fixed como quieres te puede servir esto talvez:
position: fixed;
top: 0;/ distancia a preferencia/
left: 0;
right: 0;
z-index: 1000;

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta