para - menu horizontal html css

Menú horizontal de ancho de página completo de CSS y submenú horizontal

Question

Estoy tratando de crear una solución para un sitio web en el que estoy trabajando, en el que los menús y submenús están centrados horizontalmente, pero los divs se extienden a todo el ancho de página.

En primer lugar, aquí hay un ejemplo de HTML:

<div id="menu-container" class="full-width">
    <nav id="nav1" class="normal-width">
        <ul class="main-menu">
            <li id="item1">
                <a href="#">item 1</a>

                <ul class="sub-menu">
                    <li id="item11">
                        <a href="#">item 1.1</a>
                    </li>

                    <li id="item12">
                        <a href="#">item 1.2</a>
                    </li>

                    <li id="item13">
                        <a href="#">item 1.3</a>
                    </li>

                </ul>
            </li>

            <li id="item2">
                <a href="#">item 2</a>

                <ul class="sub-menu">
                    <li id="item21">
                        <a href="#">item 2.1</a>
                    </li>

                    <li id="item22">
                        <a href="#">item 2.2</a>
                    </li>
                </ul>
            </li>

            <li id="item3">
                <a href="#">item 3</a>
            </li>

        </ul>
    </nav>
</div>

El CSS para este menú es:

.full-width {
    width: 100%;
}

.normal-width {
    width: 1024px;
    margin: 0 auto 0 auto;
}

a {
    color: black;
    text-decoration: none;
}

.clear {
    clear: both;
}

.main-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;

    position: relative;
    background-color: red;
}

.main-menu > li {
    float:left;
    margin-right:2em;
}

.sub-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;

    display:none;
    background-color: orange;
}

.sub-menu li {
    float:left;
    margin-right:2em;
}

.main-menu > li.selected {
    background-color:orange;
}

.main-menu > li.selected .sub-menu {
    display:block;
    position:absolute;
    left:0;
    right:0;
}

Y el jQuery asociado es:

// Add a clear div to allow adding background color to main-menu
$(".main-menu").append("<div class=''clear''></div>");

// Make the first class selected
$(".main-menu > li:first").addClass("selected");

// Switch the selected class
$(".main-menu > li").click(function() {
    $(".selected").removeClass("selected");
    $(this).addClass("selected");
});

// Disable menu links
$(".main-menu > li > a").click(function(e) {
    e.preventDefault();
});

Todo eso es agradable y elegante, y se crea un menú horizontal adecuado. Lo que estoy luchando con y no puedo crear es lo que puedes ver en esta imagen:

Tenga en cuenta lo siguiente acerca de la imagen:

1. El borde grueso negro alrededor de la imagen es la página web de tamaño completo y ancho (es decir, los bordes de la ventana del navegador)

2. Las líneas violetas verticales finas en el centro no son visibles, están en la imagen para mostrarle dónde estaría el contenido, es decir, ningún contenido se extenderá a los lados izquierdo o derecho de las líneas púrpuras

3. Los elementos del menú de nivel superior tienen el fondo rojo

4. Los menús secundarios aparecerán en el área con el fondo naranja

Ahora, al problema:

Observe cómo los fondos rojos y amarillos se extienden a los bordes de la página web, sin embargo, los elementos de esas páginas aparecen dentro del área de contenido dentro de las líneas violetas . Esto es lo que intento lograr, pero no puedo. No puedo extender los fondos a los bordes del navegador web (es decir, el ancho de página completa). Mi solutoína centra los fondos rojos y anaranjados en el centro.

Answer 1

Si entendí tu pregunta, esto debería ponerte en camino:

http://jsfiddle.net/X7T94/

Requiere poner class="active" en el menú principal li que desee como elemento activo. El resto de tu HTML es el mismo. CSS:

.full-width {
    width: 100%;
}

.normal-width {
    width: 1024px;
    margin: 0 auto 0 auto;
}
.main-menu > li {
    float:left;
    list-style-type:none;
    padding-right:30px;
}
.sub-menu {
    display:none;
}
.sub-menu li {
    float:left;
    padding-right:30px;
}
.main-menu li.active {
    background-color:blue;
}
.main-menu > li.active .sub-menu {
    display:block;
    position:absolute;
    left:0;
    right:0;
    background-color:blue;
}

Obviamente no es perfecto ni bello, pero debería ponerlo en su camino.

Answer 2

Aquí está la solución que se me ocurrió.

Editado: copié mi respuesta a la publicación, en lugar de vincularla a jsfiddle ... lo siento mods: /

CSS:

html, body, div, ul, li, a {margin: 0; padding: 0; border: 0;}
body {
    background-color: #000;
}
nav {
    background-color: #fff;
    position: relative;
    width: 100%;
}
ul {
    list-style: none;
    width: 100%;
}
li {
    display: inline-block;
}
a {
    display: block;
    padding: 0.25em 1em;
}
nav > ul {
    margin: 0 auto;
    width: 1024px;
}
nav ul li div { /* nested div (containing the sub nav) will be hidden by default */
    background-color: #ccc;
    width: 100%;
    position: absolute;
    left: -9999px;
}
nav ul li div ul {
    margin: 0 auto;
    width: 1024px;
}
nav > ul > li:hover > a {  /* swap ":hover" with ".active" to allow this to work as a class */
    background-color: #ccc;
}
nav > ul > li:hover > div { /* swap ":hover" with ".active" to allow this to work as a class */
    left: 0;
}

HTML:

<nav>
        <ul class="nav">
            <li>
                <a href="#">item 1</a>
                <div>
                    <ul>
                        <li>
                            <a href="#">item 1.1</a>
                        </li>

                        <li>
                            <a href="#">item 1.2</a>
                        </li>

                        <li>
                            <a href="#">item 1.3</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li>
                <a href="#">item 2</a>
                <div>
                    <ul>
                        <li>
                            <a href="#">item 2.1</a>
                        </li>

                        <li>
                            <a href="#">item 2.2</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="active">
                <a href="#">item 3</a>
                <div>
                    <ul>
                        <li>
                            <a href="#">item 3.1</a>
                        </li>

                        <li>
                            <a href="#">item 3.2</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li>
                <a href="#">item 4</a>
                <div>
                    <ul>
                        <li>
                            <a href="#">item 4.1</a>
                        </li>

                        <li>
                            <a href="#">item 4.2</a>
                        </li>

                        <li>
                            <a href="#">item 4.3</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>

Eche un vistazo, pruébelo usted mismo y vea si resolverá su problema.

Notas:

• :hover en el CSS, solo para que puedas ver los cambios que están teniendo lugar.
• Para implementar esto de la manera que desee hacerlo, deberá codificar la clase "activa" en sus elementos de la lista de nivel superior ... O ... podría usar algunos javascript para hacerlo de forma más dinámica.
• Verás las dos últimas líneas de css donde dejé comentarios ... simplemente reemplaza el :hover con .active
• lo único que necesitaba agregar al html eran algunos divs de contenedor para envolver cada submenú. esta fue la única forma que pude encontrar para centrar tu navegación sub en la página ... mientras permitía que una banda de color se extendiera por la página.

mi CSS puede ser un poco desordenado, pero eso es solo porque lo tiré un poco. Depende de usted el estilo de la manera que desee que se vea.

¡Espero que te guste! Avísame si necesitas alguna aclaración.

Editar: olvidé mencionar ... Me deshice de todas las identificaciones y clases que tenías allí, no eran necesarias para la funcionalidad ... pero si quieres asociar colores específicos con submenús específicos, entonces querrás para volver a poner algunas identificaciones

Answer 3

Su clase .normal-width (que define un ancho de 1024px) debe estar en su contenido, no en su menú (que desea que sea 100% de ancho)

Así que simplemente elimínelo de su menú y agréguelo a su contenido, por ejemplo:

<div id="menu-container" class="full-width">
   <nav id="nav1">
      ...
   </nav>   
</div>
<div class="content normal-width">Content goes here</div>

VIOLÍN

Answer 4

Estoy agregando la respuesta final aquí, por el bien de asegurar que cada uno vea la respuesta que elegí (es decir, para el bien mayor).

Esta respuesta está inspirada en GraphicO, con modificaciones:

El HTML:

<nav>
    <ul class="main-menu" >
        <li id="item1">
            <a href="#">item 1</a>

            <div>
                <ul class="sub-menu">
                    <li id="item11">
                        <a href="#">item 1.1</a>
                    </li>

                    <li id="item12">
                        <a href="#">item 1.2</a>
                    </li>

                    <li id="item13">
                        <a href="#">item 1.3</a>
                    </li>

                </ul>
            </div>
        </li>

        <li id="item2">
            <a href="#">item 2</a>

            <div>
                <ul class="sub-menu">
                    <li id="item21">
                        <a href="#">item 2.1</a>
                    </li>

                    <li id="item22">
                        <a href="#">item 2.2</a>
                    </li>
                </ul>
            </div>
        </li>

        <li id="item3">
            <a href="#">item 3</a>
        </li>

    </ul>
</nav>

Entonces, el CSS:

a {
    color: black;
    text-decoration: none;
}

nav {
    position: relative;
    width: 100%;

    background-color: red;
}

.main-menu {
    margin: 0 auto;
    width: 1024px;

    list-style: none;
}

.main-menu > li {
    display: inline-block;
    margin-right: 2em;
}

.main-menu > li.selected {
    background-color: yellow;
}

.main-menu > li > div { /* nested div (containing the sub nav) will be hidden by default */
    width: 100%;

    position: absolute;
    left: 0;

    background-color: yellow;
    display:none;
}

.main-menu > li.selected > div {
    display: inline;
}

.sub-menu {
    list-style: none;

    margin: 0 auto;
    width: 1024px;
}

.sub-menu > li {
    display: inline-block;
    margin-right: 2em;
}

Y finalmente el jQuery:

// Make the first class selected
$(".main-menu > li:first").addClass("selected");

// Switch the selected class
$(".main-menu > li").click(function() {
    $(".selected").removeClass("selected");
    $(this).addClass("selected");
});

// Disable menu links
$(".main-menu > li > a").click(function(e) {
    e.preventDefault();
});

Gracias.

Answer 5

Con un poco de HTML modificado y javascript, el siguiente menú funciona bien (probado con IE7-10, Chrome, Firefox, Opera y Safari):

HTML

<div id="menu-container" class="full-width">
    <div class="full-width-bg"></div>  <!-- this additional div makes red background -->
    <ul class="main-menu normal-width">
        ... etc ...
    </ul>
</div>

CSS

.full-width {
    width: 100%;
    background: orange;
    border:1px solid green;
    position:relative;
    z-index:1;
    height:3em;
    font-size:21px;
}
.full-width-bg {
    width:100%;
    background: red;
    height:50%;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
}
.normal-width {
    width: 1024px;
    margin: 0 auto;
    z-index:3;
    position:relative;
}
.full-width, .full-width-bg {
    min-width: 1024px;
}
ul.main-menu li {
    float:left;
    padding:0;
    margin:0;
    height:100%;
    position:static;
    text-align:center;
}
ul.main-menu, ul.main-menu ul {
    list-style-type:none;
    height: 1.5em;
    margin: 0 auto;
    padding: 0;
}
ul.main-menu a {
    text-decoration:none;
    display:inline-block;
    *display:inline; zoom:1; /* IE7 fix */
    width:100%;
    padding:0;
    max-height: 1.5em;
}
ul.main-menu > li {
    background-color:red;
}
ul.main-menu > li > ul > li {
    background-color:orange;
}
ul.main-menu > li > ul > li:hover {
    background-color:yellow;
}
ul.main-menu > li > ul > li:hover > a {
    color:red;
}
ul.main-menu > li > ul {
    position:absolute;
    top:100%;
    left:0px;
    width:100%;
}
.main-menu > li.selected,
ul.main-menu > li:hover > a {
    background-color:#d00;
    color:white;
}
ul.main-menu > li > ul {
    display:none;
    z-index:4;
}
ul.main-menu > li:hover > ul {
    display:block;
    z-index:5;
}

jQuery

$(function () {
    var items = $(''.main-menu>li'');
    var maxitems = 5; //items.length;
    var current = items[0];
    $(''.main-menu li'').css(''width'', (100 / maxitems | 0) + ''%'');
    items.mouseenter(function(e) {
        $(current).removeClass(''selected'').children(''ul'').hide();
        current = this;
        $(current).addClass(''selected'').children(''ul'').show();
    });
    items.children(''ul'').show().end().eq(0).trigger(''mouseenter'');
});

JSFiddle : http://jsfiddle.net/X7T94/12/ - este menú principal reserva lugar para 5 enlaces de menú (ver javascript)