如何使Superfish菜单横向宽度达到100％？

我使用快鱼1.4.8为水平菜单如何使Superfish菜单横向宽度达到100％？

菜单是900px

一个固定宽度的div我想快鱼的宽度为100％（900px）的内部，并且具有每个L1的宽度根据项目数量自动缩放。此菜单中的项目数量会随着时间而改变。

基本上我想有一个100％的宽度表的同一行为和的自动调整大小行为TD的

我发现从旧的2009年后下面的CSS增加对如何做到这一点：

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

它看起来像它应该工作，但它没有，菜单仍然会出现一模一样的

这是对的jsfiddle： http://jsfiddle.net/xRcJL/

有没有人能够将Superfish缩放到100％的容器？

来源

2011-06-01 samJL

您可以制作[jsFiddle demo]（http://jsfiddle.net/）代码吗？ – thirtydot 2011-06-01 23:09:47

是的，在这里你去http://jsfiddle.net/xRcJL/ - 这是标准Superfish.js与superfish.css（和3条线添加到CSS，看到部分标记为“试图获得100％的宽度”） – samJL 2011-06-02 03:27:00

如果菜单在一个固定为900px的div内，那么这不就是保持它的大小吗？ – 2011-06-02 03:35:09

UPDATE：

看看这篇文章对 “jQuery的全宽导航插件”：http://exscale.se/archives/2007/11/09/jquery-full-width-navigation-plugin/

这是因为你的.sf-menu li列表项向左浮动。

退房编辑的jsfiddle与更新的样式：

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

更新的jsfiddle链接：http://jsfiddle.net/xRcJL/1/

如果要居中你的资产净值，你可以这样做：

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

来源

2011-06-02 04:45:03 Dan

这样比较好，但实际上并没有将导航扩展到适合空间的位置，在第一个示例中它将其转换为垂直导航（它需要保持水平），而在第二个示例中它将导航集中到中心位置，而不是将导航区域拉伸到填充空间（就像表中的td一样） – samJL 2011-06-02 04:49:17

您可能需要某种javascript才能使Nav扩展为可用宽度。 – Dan 2011-06-02 06:04:00

被浮起将忽略显示属性，以便在代码.sfmenu没有显示作为表格（在拨弄浮子设置晚得多的代码）
.sfmenu任何元件是父UL所以它应该是display: table-row;与它的直接孩子li项目是display: table-cell; - .sfmenu ul li是选择下拉列表中没有顶级水平的一个
的#container DIV也许应该是一个是display: table;

See this example

如上代码表示这仅仅是降列出了这是获得这些属性，为什么第一个层次是不拉伸，尽管我不认为儿童水平名单会需要他们，但它应该只是第一级。我并不完全确定子菜单定位将正常工作，即使上述内容被纠正为“真实”表格单元格不接受相对定位，也需要一些下降级别来测试。

来源

2011-06-02 04:58:16 clairesuzy

谢谢clairesuzy，顶级看起来不错，但添加一个儿童菜单到'家'产生不良结果，看看http://jsfiddle.net/tufgD/ – samJL 2011-06-02 19:45:48

它确实似乎与位置：相对; - [重构示例]（http：// jsfiddle。net/clairesuzy/H7SMG /） - 我已经删除了所有IE的东西，只是为了测试定位/显示和隐藏，但你知道这不会在IE7中工作，因为它不支持CSS表的属性，所以'.sfHover选择器'代码将无法正常工作（我没有在8测试）。下拉列表仍然需要一个固定的宽度，因为他们似乎并不想把他们的父“单元” – clairesuzy 2011-06-03 06:53:32

我不确定如果这是你所寻找的，但下面这篇文章，做一些实验，我在这一点上已经到达之后：

http://jsfiddle.net/EFnTa/

希望它能帮助。

来源

2012-01-10 12:05:08 Cris

我不确定你是否使用DNN，但我有从我的超级英雄的皮肤伸展我的超级鱼导航容器的想法。这是我做过什么

#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

来源

2012-09-14 13:57:28

如何使Superfish菜单横向宽度达到100％？

回答

相关问题