如何使Superfish菜单水平宽度为100%？

发布于 2024-11-13 01:38:08 字数 591 浏览 4 评论 0原文

我使用 Superfish 1.4.8 作为水平菜单

菜单位于 900px 的固定宽度 div 内

我希望 Superfish 的宽度为 100% (900px)，并且每个 li 的宽度根据项目数量自动缩放。此菜单中的项目数量会随着时间而变化。

基本上我想要 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% ？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青芜 2024-11-20 01:38:08

更新：

查看这篇文章“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/

如果您想将 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 中进行测试。

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.

回复收藏 0 原文

征棹 2024-11-20 01:38:08

我不确定这是否是您正在寻找的，但在阅读这篇文章并进行一些实验后，我已经达到了这一点：

http://jsfiddle.net/EFnTa/

希望有帮助。

回复收藏 0 原文

暮年 2024-11-20 01:38:08

我不确定你是否使用 DNN，但我想到了从他们的 Darknight 皮肤中拉伸我的 superfish 导航的容器。这就是我

#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

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

回复收藏 0 原文

未蓝澄海的烟 2024-11-20 01:38:08

任何浮动的元素都会忽略显示属性，因此在您的代码中 .sfmenu 不会显示为表格（在您的小提琴中，浮动是在代码中稍后设置的）
。 sfmenu 是父ul，所以它应该是display: table-row;，它的直接子li项目是display: table-cell; - .sfmenu ul li 正在选择下拉列表而不是顶级水平列表
#container div 可能应该是 display: table;

查看此示例

正如上面的代码所示，只有下拉列表才能获取这些属性，这就是为什么第一级没有拉伸的原因，尽管我认为子级列表不需要它们，它可能应该只是第一级。我不完全确定子菜单定位是否会正常工作，即使上面的内容被纠正为“真实”表格单元格不接受相对定位，需要一些下降级别来测试。