Geek asks and answers

How to make Superfish menu horizontal 100% wide?

I use Superfish 1.4.8 as a horizontal menu

The menu is inside a 900px fixed width div

I would like the Superfish to be 100% (900 pixels) wide, and each lithium width will automatically scale based on the number of elements. The number of items in this menu will change over time.

Basically, I need the same 100% TABLE width behavior and TD autosize behavior

I found the following CSS additions from an old 2009 publication 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 seems like it should work, but it doesn’t, the menu still displays exactly the same

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

Could anyone make a Superfish scale to a 100% container?

+3
4

UPDATE:

" jQuery Full-Width Navigation Plug-In": http://exscale.se/archives/2007/11/09/jquery-full-width-navigation-plugin/ p >

, .sf-menu li .

JSfiddle :

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

​​ JSfiddle: http://jsfiddle.net/xRcJL/1/

NAV, - :

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

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

* Chrome, Firefox IE8. IE7 6.

+1

, , , , , :

http://jsfiddle.net/EFnTa/

, .

+1

, DNN, Darknight. ,

#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;

}

ascx

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

, :) , , , , . , , #stretch_nav #strech_nav #nav

+1

  • , , , .sfmenu ( )

  • .sfmenu ul, display: table-row;, li, display: table-cell; - .sfmenu ul li, ,

  • div #container , , display: table;

.

, , , , , , , , , , , "" , .

0

More articles:


All Articles