How to make Superfish menu horizontal width 100%?

Question

I am using Superfish 1.4.8 as a horizontal menu

The menu is inside of a fixed-width div of 900px

I would like Superfish's width to be 100% (900px), and have each li's width automatically scaled depending on the number of items. The number of items in this menu will change over time.

Basically I want the same behavior of a 100% width TABLE and the auto-sizing behavior of TD's

I found the following CSS additions from an old 2009 post on how to do this:

.sf-menu { width: 100%; float: left; display: table;}
.sf-menu ul { display: table-row; }
.sf-menu ul li { display: table-cell; min-width: 20%; }

It looks like it should work, but it does not, the menu still appears exactly the same

Here it is on jsFiddle: http://jsfiddle.net/xRcJL/

Has anyone been able to make Superfish scale to 100% of a container?

Could you make a [jsFiddle demo](http://jsfiddle.net/) of your code? — thirtydot, Jun 01 '11 at 23:09
Yes, here you go http://jsfiddle.net/xRcJL/ - This is standard Superfish.js with superfish.css (and 3 lines added to the CSS, see the parts markted "trying to get 100% width") — samJL, Jun 02 '11 at 03:27
If the menu is inside a div with a fixed with of 900px, then wouldn't that be what's keeping it at the same size? — Scott Harwell, Jun 02 '11 at 03:35
I want the nav to be 100% of its container, right now the nav is less than 900px-- it refuses to scale to 900px wide — samJL, Jun 02 '11 at 04:16

score 1 · Answer 1 · 2012-09-14T14:03:02.633

Im not sure if your using DNN but I got the idea of stretching the container of my superfish navigation from their Darknight skin. This is what I did

#strech_nav
{
    width:100%;
    height:31px;
    background:url(images/yournavbg.jpg) repeat-x;
    z-index: 9;
}

#strech_nav #nav
{
    width:900px;
    height:31px;
    background:url(images/yournavbg.jpg) repeat-x;
    font-size:medium;
    margin:auto;
    color:White;
    position: relative; 
    z-index: 9;

}

then in the ascx file

<div id="strech_nav"><div id="nav"><dnn:MENU ID="MENU1" MenuStyle="Superfish" runat="server"/></div></div>

Hope that helps :) Please note that this is what you want to use if you want your nav container to span the width of the page. If you want your nav to span a specific pixil width delete the contents of #stretch_nav and modify #strech_nav #nav

Dan · Answer 2 · 2011-06-17T05:02:51.447

1

UPDATE:

Check out this article for "jQuery Full-Width Navigation Plug-In": http://exscale.se/archives/2007/11/09/jquery-full-width-navigation-plugin/

It's because your .sf-menu li list items are floated to the left.

Check out edited JSfiddle with the updated style for:

.sf-menu li {
    /*float: left;*/
    position: relative;
}

Updated JSfiddle link: http://jsfiddle.net/xRcJL/1/

If you want to centre your NAV, you could do something like:

}
.sf-menu{
    text-align:center;
    background-color:#ccc;
}
.sf-menu li {
    position: relative;
    display:inline-block;
    margin:0 -2px;
}

See updated JSfiddle v2: http://jsfiddle.net/xRcJL/3/

*Works in Chrome, Firefox and IE8. Haven't tested in IE7&6.

edited Jun 17 '11 at 05:02

answered Jun 02 '11 at 04:45

Dan

10,171
7
38
31

This is better but it's not actually stretching the nav to fit the space, in the first example its turning it into a vertical nav (it needs to stay horizontal), and in the second example its centering the nav but not stretching the li's to fill the space (like td's in a table would) – samJL Jun 02 '11 at 04:49
You will probably need some sort of javascript to get the Nav to stretch to available width. – Dan Jun 02 '11 at 06:04

score 1 · Answer 3 · answered Jan 10 '12 at 12:05

1

I´m not sure if this is what you are looking for, but after following this post and making some experiments I have arrived at this point:

http://jsfiddle.net/EFnTa/

Hope it helps.

answered Jan 10 '12 at 12:05

Cris

11
1

score 0 · Answer 4 · answered Jun 02 '11 at 04:58

any element that is floated will ignore the display property so in your code .sfmenu is not displaying as a table (in your fiddle the float is set much later in the code)
.sfmenu is the parent ul so it should be display: table-row; with it's immediate children li items being display: table-cell; - .sfmenu ul li is selecting the drop down lists not the top level horizontal one
the #container div should probably be the one that is display: table;

See this example

As your code above stands it's only the drop lists that getting these properties which is why the first level isn't stretching, although I don't think the child level lists will need them, it should probably just be the first level. I'm not altogether sure the child menu positioning will work properly even if the above is corrected as "real" table cells don't accept relative positioning, would need some drop levels to test..

Thankyou clairesuzy, the top level looks great but adding a child menu to 'Home' produces undesirable results, take a look http://jsfiddle.net/tufgD/ — samJL, Jun 02 '11 at 19:45
it does seem to work with position: relative; - [refactored example](http://jsfiddle.net/clairesuzy/H7SMG/) - I've removed all the IE stuff from that just to test the positioning/show & hide, but you are aware that this will not work in IE7 and below anyway because it doesn't support the CSS table properties, so that `.sfHover selector` code won't work anyway (I haven't tested in 8). The drop lists will still need a fixed width as they do not seem to want to take their parent "cell" with — clairesuzy, Jun 03 '11 at 06:53

How to make Superfish menu horizontal width 100%?

4 Answers4