Question

当我的鼠标悬停时，我正试图在菜单标题下面创建一个带滑动线的菜单。

适用于“简单”菜单，但不适用于下拉菜单...

我的代码：

HTML

<div class="nav-wrap">
    <ul class="group" id="example-one">
        <li class="current_page_item">
            <a href="#">Home</a>
        </li>
        <li class=""><a href="#">Buy Tickets</a></li>
        <li class=""><a href="#">Group Sales</a></li>
        <li class=" dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>Test0</span> <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#"><span class="fa fa-tasks"></span> Test1</a></li>
                <li><a href="#"><span class="fa fa-check"></span> Test2</a></li>
                <li><a href="#"><span class="fa fa-file"></span> Test3</a></li>
                <li><a href="#"><span class="fa fa-play-circle"></span> Test4</a></li>
            </ul>
        </li>
        <li class=""><a href="#">The Show</a></li>
        <li class=""><a href="#">Videos</a></li>
        <li class=""><a href="#">Photos</a></li>
        <li class=""><a href="#">Magic Shop</a></li>
    </ul>
</div>

CSS

.nav-wrap {
  background-color: rgba(0,0,0,0.6);
  border-top:    2px solid white;
  border-bottom: 2px solid white;
}

.group:after { visibility: hidden; display: block; content: ""; height: 0; }
*:first-child+html .group { zoom: 1; }


#example-one {
  margin: 0 auto;
  list-style: none;
  position: relative;
  width: 960px;
}
#example-one li {
  display: inline-block;
}
#example-one a {
  color: #bbb;
  font-size: 14px;
  float: left;
  padding: 6px 10px 4px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
#example-one a:hover {
  color: white;
}
#magic-line {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: #fe4902;
}
.current_page_item a {
  color: white !important;
}
.ie6 #example-one li, .ie7 #example-one li {
  display: inline;
}
.ie6 #magic-line {
  bottom: -3px;
}

ul.dropdown-menu {
    min-width: auto;
}

li.dropdown:hover > ul {
    display: inline!important;
}

.current_page_item_two a {
  color: white !important;
}

JS

var $el, leftPos, newWidth;

$("#example-one").append("<li id='magic-line'></li>");

var $magicLine = $("#magic-line");

$magicLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("#example-one li").find("a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();

    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });
});

$(".current_page_item_two a").mouseenter();

JS如何适用于下拉部分，而不是“Test0”菜单的下划线？

感谢您的帮助！

Answer 1

将您的悬停代码更改为：

clang

老实说，我不确定为什么要使用a = class =＆＃34; dropdown-toggle＆＃34;返回0的左侧位置但是发生了什么。使用li似乎工作。

看到这个小提琴：http://jsfiddle.net/7hvrxw2c/42/

改进下拉菜单的浮动线菜单

1 个答案: