Menu con imagen en html5 y css3

[loadgo]

Hola, me gustaria hacer un menu responsive en una onepage (que ya tengo hecha) que al bajar la pagina se quedara fijo, y dentro del menu en la izquierda estuvieran las opciones y en la derecha un logo con el telefono direccion etc..

Y no encuentro la manera, alguien me podria ayudar.

Muchas gracias.

[DesgraciadoGabo]

Fija tu menú con position:fixed;

a ver si esto te sirve

espero sea lo que necesitas, si necesitas un segundo elemento fijo en la pantalla solo crea otro elemento y en lugar de left:0 ponle right:0, saludos!

[loadgo]

Pero seria algo como top 0 right 0 no? Y luego esa imagen se podria poner fixed como el menu?

Muchas gracias

[DesgraciadoGabo]

Si la imagen es lo mismo pones algo asi

Código HTML:

<img src="imagen.jpg" class="fijo-derecha">
 

Código CSS:

.fijo-derecha{
  position:fixed;
  right:0;
}
 

Tu puedes agregar mas atributos según sea tu necesidad, recuerda no saturar la parte superior debido a que en un celular podría estorbar tanto elemento siguiendote al scrollear*

Saludos!

[TIExpert]

Hola.

Mira este video:
https://www.youtube.com/watch?v=eYS9...D8D099A6D9BFA6

Eso mismo se puede aplicar a un menu.

Espero haberte ayudado. Si te gusto la respuesta, vota positivo.

Saludos.

[loadgo]

Muchas gracias a todos, la cuestión es que ya tengo hecho el menú gracias a vosotros pero el problemas que tengo es que la pagina al ser una onepage al bajar y subir con el scroll si lo haces muy rápido el menú se desplaza momentáneamente y luego vuelve a su posición en la parte de arriba, alguien sabe como evitar que esto pase.

Muchas gracias

[fede5426]

Si estas usando fixed, raro que se desplace.. no debería moverse de su lugar por más rápido que scrollees..

Fijate si esto te sirve:

Código HTML:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
 

Código CSS:

nav{
    width:100%;
    padding: 2em 0; 
    position: fixed;
    top:0;
    left:0;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease;
}
 

Código Javascript:

//detectamos cuando el usuario haga scroll
$(window).scroll(function(){ 
        //si el scrollTop es mayor o igual que 200px... 
    if($(this).scrollTop() >= 200){
            //disminuimos el padding del nav para 
            //que no ocupe tanto espacio
            $("nav").css({"padding":".5em 0"})
            
        }
      //sino...
        else{
            //aumentamos el padding del nav nuevamente
            $("nav").css({"padding":"2em 0"})
            
        }
    
});
 

Básicamente modificas el padding del nav para que al hacer scroll cambie su tamaño y no moleste tanto para ver el contenido.

Usé padding para darle el alto al nav porque si le aplicaba un height, al asignarle "display:inline-block" a los items de lista, no se los puede alinear verticalmente al centro.. (a menos que se use flexbox que simplificaría mucho las cosas).

Acá te dejo un demo para que veas que funciona y no se desplaza a ningún lado:

http://codepen.io/fede5426/pen/OVaBLe

Saludos

[loadgo]

Es que no es un texto plano, es una web que vas bajando y cambia de tema y al cambiar de tema para diferenciarlo del anterior la foto de fondo tambien cambia y es ahi cuando el menu se vuelve loco y luego se vuelve a colocar en la parte superior

[fede5426]

Podrías facilitarnos una versión online del sitio? Siempre que postees intenta dejar todo el material posible para que sea mas fácil y rápido darte una respuesta.

[loadgo]

Vale, voy a colgarla en un hosting gratuito y os paso en link, muchas gracias.

[loadgo]

Vale aqui teneis el link, ojala me podais ayudar:

http://www.davidpruebas.hol.es/

Muchas gracias.

[loadgo]

No sabeis que le puede pasar, parece que se descuadra al cambiar de imagen.

[loadgo]

No se os ocurre nada? Me a parecido ver un codigo en jquery pero no se si es posible

[LazyProgrammer]

Hola loadgo,

He mirado el código desde google chrome y el ul sale sin cerrar, por otro lado he copiado el código html y el css, al no tener las imágenes el indice funciona perfectamente. Se queda fijo en su posición. Has comprobado que es lo que podría afectar añadiendole las imagenes?

Saludos