Question

我正在尝试让superfish渲染菜单，以便每个菜单列都有一组css，这将允许我为每个菜单列赋予不同的css属性。 I.E.不同的文字颜色，不同的背景颜色，悬停颜色。

例如，菜单可能是

Home | About Us:Meet the Team:Why Hire Us | Contact Us:Social Media | Our Services

“关于我们”有两个子菜单项，“联系我们”有一个子菜单项。

我想为他们添加样式，以便.imMenu-Primary1 ... imMenu-PrimaryN在每个主菜单项上，并且它是子项。另外，我想给他们的每个孩子添加这样的东西.imMenu-Childof-Primary1 .... imMenu-Childof-PrimaryN。或类似的东西，允许我设置每个主菜单项的样式，并将它作为一个组的子项。

以下是我认为相关的Superfish文件。

提前感谢您的时间和精力，

添

P.S。我正在使用Wordpress生成菜单，不能或者更不知道如何在Wordpress中使用菜单结构来添加css。我注意到虽然super subs确实走了菜单树结构，但我很确定可以使用javascript添加css属性。这就是我建议这样做的原因。然而，如果有更好的方法，我会全力以赴。再次感谢。

;(function($){ // $ will refer to jQuery within this closure

$.fn.supersubs = function(options){
    var opts = $.extend({}, $.fn.supersubs.defaults, options);
    // return original object to support chaining
    return this.each(function() {
        // cache selections
        var $$ = $(this);
        // support metadata
        var o = $.meta ? $.extend({}, opts, $$.data()) : opts;
        // cache all ul elements and show them in preparation for measurements
        $ULs = $$.find('ul').show();
        // get the font size of menu.
        // .css('fontSize') returns various results cross-browser, so measure an em dash instead
        var fontsize = $('<li id="menu-fontsize">&#8212;</li>').css({
            'padding' : 0,
            'position' : 'absolute',
            'top' : '-999em',
            'width' : 'auto'
        }).appendTo($$)[0].clientWidth; //clientWidth is faster than .width()
        // remove em dash
        $('#menu-fontsize').remove();
        // loop through each ul in menu
        $ULs.each(function(i) { 
            // cache this ul
            var $ul = $(this);
            // get all (li) children of this ul
            var $LIs = $ul.children();
            // get all anchor grand-children
            var $As = $LIs.children('a');
            // force content to one line and save current float property
            var liFloat = $LIs.css('white-space','nowrap').css('float');
            // remove width restrictions and floats so elements remain vertically stacked
            $ul.add($LIs).add($As).css({
                'float' : 'none',
                'width' : 'auto'
            });
            // this ul will now be shrink-wrapped to longest li due to position:absolute
            // so save its width as ems.
            var emWidth = $ul[0].clientWidth / fontsize;
            // add more width to ensure lines don't turn over at certain sizes in various browsers
            emWidth += o.extraWidth;
            // restrict to at least minWidth and at most maxWidth
            if (emWidth > o.maxWidth)       { emWidth = o.maxWidth; }
            else if (emWidth < o.minWidth)  { emWidth = o.minWidth; }
            emWidth += 'em';
            // set ul to width in ems
            $ul.css('width',emWidth);
            // restore li floats to avoid IE bugs
            // set li width to full width of this ul
            // revert white-space to normal
            $LIs.css({
                'float' : liFloat,
                'width' : '100%',
                'white-space' : 'normal'
            })
            // update offset position of descendant ul to reflect new width of parent.
            // set it to 100% in case it isn't already set to this in the CSS
            .each(function(){
                var $childUl = $(this).children('ul');
                var offsetDirection = $childUl.css('left') !== undefined ? 'left' : 'right';
                $childUl.css(offsetDirection,'100%');
            });
        }).hide();

    });
};
// expose defaults
$.fn.supersubs.defaults = {
    minWidth        : 9,        // requires em unit.
    maxWidth        : 25,       // requires em unit.
    extraWidth      : 0         // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off     values
    };

})(jQuery);

Answer 1

没有必要修改superfish。您只需要在菜单标记中添加类，并在CSS文件中设置样式。 Superfish不控制CSS，它只扩展了标准CSS下拉菜单的功能。

例如，如果您的标记看起来像这样，您只需在<li>标记中添加一些新类：

<ul>
    <li class="home"><a href="#">Home</a></li>
    <li class="about">
        <a href="#">About Us</a>
        <ul>
            <li><a href="#">Meet the Team</a></li>
            <li><a href="#">Why Hire Us</a></li>
        </ul>
    </li>
</ul>

然后只需使用该类将相应的样式添加到CSS中。

我注意到你没有使用superfish，但实际上是超级用户。这不再是必要的，请参阅http://users.tpg.com.au/j_birch/plugins/superfish/examples/supersubs/

上的说明

修改Superfish菜单jQuery插件

1 个答案: