Css Full-page-width Horizontal Menu And Horizontal Submenu

November 26, 2023 Post a Comment

I am trying to create a solution for a website I am working on in which menus and sub-menus are horizontally centred, but the divs extend to full page width. First off, here is a

Solution 1:

Here is the solution I came up with.

Edited: I copied my answer to the post, rather than linking to jsfiddle... sorry 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.25em1em;
}
nav > ul {
    margin: 0 auto;
    width: 1024px;
}
navullidiv { /* nested div (containing the sub nav) will be hidden by default */background-color: #ccc;
    width: 100%;
    position: absolute;
    left: -9999px;
}
navullidivul {
    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><ulclass="nav"><li><ahref="#">item 1</a><div><ul><li><ahref="#">item 1.1</a></li><li><ahref="#">item 1.2</a></li><li><ahref="#">item 1.3</a></li></ul></div></li><li><ahref="#">item 2</a><div><ul><li><ahref="#">item 2.1</a></li><li><ahref="#">item 2.2</a></li></ul></div></li><liclass="active"><ahref="#">item 3</a><div><ul><li><ahref="#">item 3.1</a></li><li><ahref="#">item 3.2</a></li></ul></div></li><li><ahref="#">item 4</a><div><ul><li><ahref="#">item 4.1</a></li><li><ahref="#">item 4.2</a></li><li><ahref="#">item 4.3</a></li></ul></div></li></ul></nav>

Take a look, test it on your own and see if it will solve your problem.

Notes:

I used :hover in the css, just so you can actually see the changes taking place.
To implement this the way you want to do it, you will either need to hard-code the class "active" to your top level list items... OR... you could use some javascript to do it more dynamically.
you will see the last two lines of css where i left comments... just replace the :hover with .active
the only thing that I needed to add to the html were some container divs to wrap each sub menu. this was the only way i could find to center your sub nav on the page.. while allowing a band of color to stretch across the page.

my css might be a bit messy, but thats just because I kinda threw it together. It is up to you to style it they way you want it to look.

Hope you like it! Let me know if you need any clarification.

Edit: oh forgot to mention.. I got rid of all the id's and classes you had in there, they weren't needed for the functionality... but if you want to associate specific colors with specific sub menus, then you will want to put a few id's back in.

Solution 2:

I am adding the final answer here, for the sake of ensuring that every one sees the answer I chose (i.e, for the greater good).

This answer is inspired by GraphicO, with modifications:

The HTML:

<nav><ulclass="main-menu" ><liid="item1"><ahref="#">item 1</a><div><ulclass="sub-menu"><liid="item11"><ahref="#">item 1.1</a></li><liid="item12"><ahref="#">item 1.2</a></li><liid="item13"><ahref="#">item 1.3</a></li></ul></div></li><liid="item2"><ahref="#">item 2</a><div><ulclass="sub-menu"><liid="item21"><ahref="#">item 2.1</a></li><liid="item22"><ahref="#">item 2.2</a></li></ul></div></li><liid="item3"><ahref="#">item 3</a></li></ul></nav>

Then, the 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;
}

And finally the 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();
});

Thanks.

Solution 3:

If I understood your question, this should get you on your way:

http://jsfiddle.net/X7T94/

It does require putting class="active" on the main-menu li that you want as the active item. The rest of your HTML is the same. 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-menuli {
    float:left;
    padding-right:30px;
}
.main-menuli.active {
    background-color:blue;
}
.main-menu > li.active.sub-menu {
    display:block;
    position:absolute;
    left:0;
    right:0;
    background-color:blue;
}

Obviously it isn't perfect or beautiful, but it should get you on your way.

Solution 4:

With a bit modified HTML and javascript the following menu works well (tested with IE7-10, Chrome, Firefox, Opera and Safari):

HTML

<divid="menu-container"class="full-width"><divclass="full-width-bg"></div><!-- this additional div makes red background --><ulclass="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-menuli {
    float:left;
    padding:0;
    margin:0;
    height:100%;
    position:static;
    text-align:center;
}
ul.main-menu, ul.main-menuul {
    list-style-type:none;
    height: 1.5em;
    margin: 0 auto;
    padding: 0;
}
ul.main-menua {
    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/ - this main menu reserves place for 5 menu links (see javascript)

Solution 5:

Your class .normal-width (which defines a width of 1024px) needs to be on your content not on your menu (which you want to be 100% width)

So simply remove it from your menu, and add it to your content - like so:

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

FIDDLE

Html5 Academy