0

我正在尝试将此菜单用于我的 wordpress 网站。

我只是想知道如何使每个悬停/选择的导航项的浮动线更改颜色，因为目前它是红色（background-color:#800; height:2px;）。

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

任何帮助表示赞赏。

谢谢你。

4

2 回答 2

0

有一种更“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;
}

看看这个 jsfiddle。

PS：事件链稍作修改以适应 jsfiddle。

于 2013-01-12T02:16:13.493 回答
0

您所要求的实际上并非微不足道。该插件的作者实际上是根据您将鼠标悬停的位置为 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;
}

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

于 2013-01-12T02:42:45.990 回答