[SOLUCIONADO] Menu Horizontal distribuir mismo tamaño

[eric_ballon]

Hola, quiero realizar un menú similar al de arriba, lo copie de websitebuilder, me es difícil descargar el código, lo que deseo es que ayuden con la propiedades para hacer que cada item tenga el mismo ancho, y que en el hover se muestre el border, lo hice lo del borde, pero se mueven los item de alado con la propiedad padding.
Gracias por su ayuda.

[fede5426]

Para que tengan el mismo ancho tenes que asignar ese width a los elementos <li>.

Lo del hover, si indicas que al pasar el cursor por encima se le aplique un borde de 2px, es normal que los demás elementos se muevan, la solución es aplicarle un borde transparente en su estado normal..

Te dejo un ejemplo:

Código HTML:

<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Nosotros</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Productos</a></li>
    <li><a href="#">Tienda</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>
 

Código CSS:

nav{
    background-color:#1c4781;
    width:1000px;
    margin:0 auto;
    text-align:center;
    padding:2em;
}
 
nav ul{
    list-style:none;
}
 
nav ul li{
    display:inline-block;
    width:100px;
    padding:.5em 0;
    margin:.5em;
}
 
nav ul li a{
    color:#fff;
    font-family: Trebuchet Ms;
    text-decoration:none;
    border:2px solid transparent;
    display:block;
    padding:.5em;
}
 
nav ul li a:hover{
    border:2px solid #fff;
}
 

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

Saludos

[eric_ballon]

Hola, muchas gracias por tu respuesta, el ejemplo es exacto.
Una consulta, para que el item de mantenga con borde blanco cuando la pagina esta selecionado, que propiedad necesito añadir.

[fede5426]

Antes que nada tenes que crear una clase que tenga los estilos que quieras que tenga el elemento activo.. por ejemplo:

Código CSS:

.activo {
   border: 2px solid #fff; 
}
 

Ahora, hay 2 formas posibles de aplicarlo y depende de como empleas el menú:

1° Si tenes el código del menú en cada archivo del sitio, basta con colocarle la clase .activo al elemento <a> que corresponda a dicha seccion del sitio.. es decir si estás en la página "contacto" le aplicas la clase .activo al <a href="contacto.html">Contacto</a> y asi sucesivamente con todos los archivos..

2° Si cargas el contenido dinamicamente en el sitio, podés usar javascript para aplicar esa clase al elemento que clickeas:

Código Javascript:

$(document).ready(function(){
    
    $("a").click(function(){ //al hacer click en un enlace
        
        $("a").removeClass("activo"); //le quitamos la clase activo a todos los enlaces
        $(this).addClass("activo") //y le agregamos la clase activo al item que clickeamos
        
    }); 
    
});
 

Saludos

[eric_ballon]

Hola Fede, muchas gracias por tu ayuda, estuve trabajando en el diseño de esta web que me copie del website builder.

En conclusión lo quiero hacer en la header es lo siguiente:
1. que su background-color: #1c44781 y width: auto; height: auto;
2. Un div id=container-header, es el contenedor del div id= "Logo" y id="Menu", y este div este centrado margin: 0 auto; background-color: tranparent.
3. el div Logo contiene texto.
4. el div Menu contenga el menú dropdown

El problema. que cuando ingreso el menu dropdown en el div div id=container-header se tira mas a la derecha con en la imagen.
Y que no se note el borde entre blanco alrededor del header.
Abajo es la direccion el codepen.
Muchas Gracias.

http://codepen.io/EricBallon/pen/RPyoRL

Iniciado por fede5426

Antes que nada tenes que crear una clase que tenga los estilos que quieras que tenga el elemento activo.. por ejemplo:

Código CSS:

.activo {
   border: 2px solid #fff; 
}
 

Ahora, hay 2 formas posibles de aplicarlo y depende de como empleas el menú:

1° Si tenes el código del menú en cada archivo del sitio, basta con colocarle la clase .activo al elemento <a> que corresponda a dicha seccion del sitio.. es decir si estás en la página "contacto" le aplicas la clase .activo al <a href="contacto.html">Contacto</a> y asi sucesivamente con todos los archivos..

2° Si cargas el contenido dinamicamente en el sitio, podés usar javascript para aplicar esa clase al elemento que clickeas:

Código Javascript:

$(document).ready(function(){
    
    $("a").click(function(){ //al hacer click en un enlace
        
        $("a").removeClass("activo"); //le quitamos la clase activo a todos los enlaces
        $(this).addClass("activo") //y le agregamos la clase activo al item que clickeamos
        
    }); 
    
});
 

Saludos

[DesgraciadoGabo]

Tienes varias cosas amigo:
1.- YA NO SE USA <CENTER>
2.- Tu id container-header es mas chico según tu tiene 880px de ancho pero tu id logo mide 180px + 790px de tu id menu y bueno sumale los 8 pixeles de borde de ambos cuadros pos ya no salieron las cuentas estos dos juntos rebasan el ancho de tu caja contenedora.
3.- Por que usar UL y LI en tu menú? alguna vez yo lo use jaja pero no tiene sentido usarlos!! de hecho estos te dan resultados inesperados en tus enlaces, estos se recorren a la derecha un poco.
4.- El codigo que subiste esta hecho muy mal amigo.

Aquí te dejo como lo ordené:
http://codepen.io/anon/pen/zGjNdP

En cuanto a tu siguiente paso que es el dropdown puedes acomodarlo dentro de Menu con css tal vez te funcione ese codigo que te pasaron todo depende como lo pienses tu, aun que va a estar muy complicado copiando y pegando código.

Saludos!

[pzin]

Si quieres ahorrarte tanto cálculo, lo que puedes hacer es usar en tu lista de enlaces display: table, display: table-cell y table-layout: fixed.

Iniciado por DesgraciadoGabo

3.- Por que usar UL y LI en tu menú? alguna vez yo lo use jaja pero no tiene sentido usarlos!! de hecho estos te dan resultados inesperados en tus enlaces, estos se recorren a la derecha un poco.

Deja de decir burradas hombre.

[DesgraciadoGabo]

pzin disculpa amigo jajaja pero en su código tiene (http://codepen.io/EricBallon/pen/RPyoRL)

Código CSS:

nav ul{
  list-style:none;
}
 

En todo caso le hace falta agregar margin y padding en 0 por eso es que digo que se "recorre a la derecha" jaja disculpa no quiero confundir a nadie saludos!!!