javascript - 修改Superfish菜单jQuery插件

Question

我正在尝试让 superfish 呈现菜单，以便每个菜单列都有一组 css，允许我为每个菜单列提供不同的 css 属性。 IE。不同的文字颜色，不同的背景颜色，悬停颜色。

例如菜单可能是

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

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

我想为它们附加样式，以便 .imMenu-Primary1... imMenu-PrimaryN 位于每个主菜单项及其子项上。另外，我想为他们的每个 child 附加类似这样的东西。imMenu-Childof-Primary1 .... imMenu-Childof-PrimaryN。或者类似的东西，可以让我为每个主菜单项及其子项设置样式。

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

预先感谢您的时间和精力，

蒂姆

附言我正在使用 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。

我注意到您使用的不是 super 鱼，而是 super 潜艇。这不再是必需的，请参阅 http://users.tpg.com.au/j_birch/plugins/superfish/examples/supersubs/ 处的注释