Question

我正在尝试将this menu用于我的wordpress网站。

我只是想知道如何为悬停/选择的每个导航项目改变浮动线条颜色，因为此时所有导航项目都为红色（background-color:#800; height:2px;）。

这是我想要实现的目标：
菜单1 - 悬停浮动线为绿色，
菜单2 - 浮线为黄色，
菜单3 - 红色，menu4 - 蓝色等。

感谢任何帮助。

谢谢。

Answer 1

有一种更“CSS”的方法来实现这一点但是使用一些javascript你可以得到一些非常易读的东西。使用此方法，您的网页将需要正确初始化浮点线（.hightlight）和导航边框（#sses1 > ul）。

理想的解决方案是每个浮点线的一个类，但这里只是我用javascript得到的：

<!-- added individual classes for nav items -->
<div id="sse1">
  <div id="sses1">
    <ul>
      <li><a class="nav-item-1" href="?menu=1&skin=2&p=Javascript-Menus">Javascript Menus</a></li>
      <li><a class="nav-item-2" href="?menu=1&skin=2&p=Horizontal-Menus">Horizontal Menus</a></li>
      <li><a class="nav-item-3" href="?menu=1&skin=2&p=Web-Menus">Web Menus</a></li>
    </ul>
  </div>
</div>

在加载正文或窗口之前：

    function customHandleMenu() {
        // get nav selector
        var nav = $('#sses1 > ul');

        // get float line selector
        var floatLine = $('.highlight'); // .hightlight must exist at this point

        // get colors for the current page
        var defaultBGcolor = floatLine.css('background-color');
        var defaultBorderColor = floatLine.css('border-color');
        var defaultNavBorderColor = nav.css('border-bottom-color');


        // change background-color and border-color on mouseenter event

        $('.nav-item-1').on({
            mouseenter: function () {
                setColors({floatColor:'#0f0', borderColor:'#0f0'});
            }
        });

        $('.nav-item-2').on({
            mouseenter: function () {
                setColors({floatColor:'#ee0', borderColor:'#ee0'});
            }
        });

        $('.nav-item-3').on({
            mouseenter: function () {
                setColors({floatColor:'#05f', borderColor:'#05f'});
            }
        });


        /*
           ...
        */

        // put back default colors on the mouseleave event
        $('#sses1 > ul > li').on({
            mouseleave: function() {
              setColors({floatColor:defaultBGcolor, borderColor:defaultNavBorderColor});
            }
        });

        function setColors(args) {
            if (typeof args.floatColor != "undefined") {
                floatLine.css('background-color', args.floatColor);
            }

            if (typeof args.borderColor != "undefined") {
                floatLine.css('border-color', args.borderColor);
                nav.css('border-bottom-color', args.borderColor);
            }
        }
    }

为了确保选择器只使用一次.highlight存在，我建议修改原始javascript的结尾：

function initMenu() {
    sse1.builMenu();
    customHandleMenu();
}

if (window.addEventListener) {
    window.addEventListener("load", initMenu, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", initMenu);
}
else {
    window["onload"] = initMenu;
}

看看this jsfiddle。

P.S。：事件链被轻微修改以适应jsfiddle。

Answer 2

你所要求的实际上是非平凡的。该插件的作者实际上是动画一个li元素，“li.highlight”，宽度和左侧定位基于您悬停鼠标的位置。您可以通过更改此项目的CSS定义轻松更改此项的颜色。例如，要将其设置为黄色，只需在菜单的css文件下面包含此css定义：

#sses1 li.highlight {
    background-color: yellow;
    top: 36px;
    height: 2px;
    border-bottom: solid 1px yellow;
    z-index: 1;
    position: absolute;
    overflow: hidden;
}

我知道这不是完整的解决方案......但是，如果你雄心勃勃，你可以改变javascript，根据.highlight元素所在的li元素添加一个新类。

浮动线菜单/导航具有不同的颜色选项

2 个答案: