【问题标题】:How to make Superfish menu vertical in first level but horizontal in second level?如何使 Superfish 菜单在第一级垂直但在第二级水平?
【发布时间】:2013-04-05 14:18:59
【问题描述】:

我在 Drupal7 中使用 Superfish 菜单,我的第一个项目级别是垂直设计的。现在我想将我的第二个项目级别设置为水平样式。我怎么能这样做?我尝试了不同的 CSS 方法,通过 jQuery 添加了一些类名,例如

$('一级li')find('ul').addClass('sf-vertical');

但没有任何帮助。 tnx!

编辑:here is a jsfiddle 我的菜单看起来像

<ul id="superfish-1" class="sf-menu menu-page-menu sf-vertical sf-style-none sf-total-items-6 sf-parent-items-1 sf-single-items-5 sf-js-enabled">
    <li id="menu-622-1" class="first odd sf-item-1 sf-depth-1 sf-no-children">Item 1</li>
    <li id="menu-623-1" class="middle even sf-item-2 sf-depth-1 sf-total-children-5 sf-parent-children-0 sf-single-children-5 menuparent">Item 2
        <ul class="sf-vertical sf-hidden">
            <li id="menu-633-1" class="first odd sf-item-1 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%; ">SubItem </li>
            <li id="menu-634-1" class="middle even sf-item-2 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%; ">SubItem </li>
            <li id="menu-635-1" class="middle odd sf-item-3 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%; ">SubItem </li>
            <li id="menu-636-1" class="middle even sf-item-4 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%; ">SubItem </li>
            <li id="menu-637-1" class="last odd sf-item-5 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%; ">SubItem </li>
        </ul>
    </li>
    <li id="menu-624-1" class="middle odd sf-item-3 sf-depth-1 sf-no-children">Item 3</li>
    <li id="menu-625-1" class="middle even sf-item-4 sf-depth-1 sf-no-children">Item 4</li>
    <li id="menu-626-1" class="middle odd sf-item-5 sf-depth-1 sf-no-children">Item 5</li>
    <li id="menu-627-1" class="last even sf-item-6 sf-depth-1 sf-no-children">Item 6</li>
</ul>

【问题讨论】:

  • 尝试将您的代码放在 jsfiddle 或类似文件中,否则可能会被关闭。
  • @Kiz 添加了 jsFiddle 和一些代码。
  • 你的意思是这样的吗:jsfiddle.net/headkit/2vaQ3/3
  • 你改变了什么?看不出有什么区别。我想要的是第二级菜单(item2)在悬停在第一级项目旁边的水平菜单中打开。在我的示例中,二级菜单作为垂直菜单打开(与一级菜单相同)。
  • 对不起:jsfiddle.net/TC9hy

标签: javascript html css menu superfish


【解决方案1】:

给出.sf-menu ul li ul.sf-menu ul ul li的固定宽度删除width:100%并给出margin_right:XXpx;

类似CSS

.sf-menu ul li ul{width:400px;}
.sf-menu ul ul li{float:left; margin-right:10px;}

【讨论】:

  • 感谢您的帮助。不幸的是它不起作用。您在 jsfiddle 中尝试过吗?
  • 我从头开始构建了另一个菜单,我发现你的宽度提示可以解决问题。所以我将此答案标记为正确。谢谢!这是我的 JSBin:jsbin.com/egowof/2/edit
猜你喜欢
  • 2023-02-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多