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

Peter comentado Mar 27, 2014

¿Solucionaste el problema de tu menú?

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

AvkZ comentado Ago 19, 2013

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

monomanco comentado Ago 19, 2013

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!

didac_rios comentado Ago 21, 2013

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.

alex_alvarez comentado Ago 21, 2013

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

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

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Actividad Reciente

¿Eres Usuario Apple?

...

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

Conecta