The horizontal menu of the horizontal page width page and the horizontal submenu

Question

I am trying to create a solution for a website that I am working on, in which the menus and submenus are horizontal, but the divs expand to the full width of the page.

First of all, here is an example 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> 

CSS for this menu:

 .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; } 

And related to jQuery:

 // 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(); }); 

Everything is nice and dandy, and the right horizontal menu is created. What I'm struggling with, and I can’t create what you can see in this picture:

Pay attention to the following image:

• The thick black border around the image is the full size and width of the web page (i.e. the border of the browser window)

• The thin vertical purple lines in the middle are not visible, they are in the picture to show you where the content will be, i.e. no content will go to the far left or far right of the purple line

• Top-level menu items have a red background

• Submenus appear in the area with an orange background.

Now, to the problem:

Notice how the red and yellow backgrounds spread to the edges of the web page, but the elements of these pages appear inside the content area inside the purple lines . This is what I am trying to achieve, but I cannot. I cannot extend the background to the edges of the web browser (i.e. full page width). My solutoin centers the red and orange backgrounds in the middle.

Answer 1

I am adding the final answer here to make sure that everyone sees the answer that I have chosen (i.e. for the greater good).

This answer is inspired by GraphicO with the changes:

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> 

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

Answer 2

Here is the solution I came up with.

Edited: I copied my response to the message, and did not contact 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.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> 

Take a look, check it yourself and see if it solves your problem.

Notes:

• I used :hover in css, so you can really see the changes happening.
• To implement this the way you want to do it, you will need to either hardcode the "active" class for your top-level elements ... OR ... you can use some javascript for more dynamic.
• you will see the last two lines of css where I left comments ... just replace :hover with .active
• The only thing I needed to add to html was some kind of container divs to wrap each submenu. this was the only way to find the center of your sub navigator on the page .. by letting the color bar stretch across the page.

My css may be a little dirty, but that's because I threw it away. You decide how it looks the way you want.

I hope you will enjoy! Let me know if you need any clarification.

Edit: forgot to mention about .. I got rid of all the identifiers and classes that you had there, they are not needed for functionality ... but if you want to associate certain colors with specific submenus, then you will need to return several identifiers.

Answer 3

If I understood your question, this should help you:

http://jsfiddle.net/X7T94/

To do this, put class="active" in the main menu li, which you want as the active element. 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-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; } 

Obviously, this is not perfect or beautiful, but it should help you.

Answer 4

With slightly modified HTML and javascript, the following menu works well (tested with IE7-10, Chrome, Firefox, Opera, and 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/ - this main menu reserves space for 5 menu links (see javascript)

Answer 5

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

So just remove it from your menu and add it to your content - for example:

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

Fiddle