0

我正在尝试实现这个滑动菜单突出显示但有一些困难。我有一个小提琴来证明这个问题。

HTML：

<div class="nav top-nav clearfix">
    <ul>
        <li class="current_page_item">
            <a href="#" title="Home">Home</a>
        </li>
        <li class="page_item page-item-880"> 
            <a href="#">Contact</a>
        </li>
        <li class="page_item page-item-948"> 
            <a href="#">Portfolio</a>
        </li>
    </ul>
</div>

CSS：

body {
    background: #ccc;
}
.nav {
    border:0;
}
.nav ul {
    margin:auto
}
.nav li {
    float:left;
    position:relative
}
.nav li a {
    border-bottom:0
}
.nav li ul.sub-menu, .nav li ul.children {
    margin-top:0;
    border:1px solid #ccc;
    border-top:0;
    position:absolute;
    display:none;
    z-index:8999
}
.nav li ul.sub-menu li a, .nav li ul.children li a {
    padding-left:10px;
    border-right:0;
    display:block;
    width:180px;
    border-bottom:1px solid #ccc
}
.nav li ul.sub-menu li:last-child a, .nav li ul.children li:last-child a {
    border-bottom:0
}
.nav li:hover ul {
    top:auto;
    display:block
}
.nav.top-nav ul {
    margin:0 auto;
    list-style:none;
    position:relative
}
.nav.top-nav ul li {
    display:inline-block
}
.nav.top-nav ul li a {
    position:relative;
    z-index:200;
    display:block;
    float:left;
    padding:6px 10px 4px 10px
}
.nav.top-nav ul li a:hover {
    color:#fff
}
.nav.top-nav ul li#sliding-highlight {
    position:absolute;
    top:0;
    left:0;
    width:100px;
    background:#f2065f;
    z-index:100;
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-top-left-radius:25px;
    -webkit-border-top-right-radius:25px;
    -webkit-border-bottom-right-radius:25px;
    -webkit-border-bottom-left-radius:25px;
    border-radius:25px 25px 25px 25px
}
.nav.top-nav ul .current_page_item a {
    color:#fff
}
.nav .ie6 .top-nav li, .nav .ie7 .top-nav li {
    display:inline
}

JavaScript：

/* Menu sliding animation script */
$(function () {

    var $el, leftPos, newWidth;
    $mainNav = $(".top-nav ul");

    $mainNav.append("<li id='sliding-highlight'></li>");

    var $slidingHighlight = $("#sliding-highlight");

    $slidingHighlight.width($(".current_page_item").width())
        .height($mainNav.parent().height())
        .css("left", $(".current_page_item a").position().left)
        //.data("origLeft", $(".current_page_item a").position().left)
        .data("origWidth", $slidingHighlight.width());

    $(".top-nav li a").hover(function () {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $slidingHighlight.stop().animate({
            left: leftPos,
            width: newWidth,
            backgroundColor: $el.attr("rel")
        })
    }, function () {
        $slidingHighlight.stop().animate({
            left: $slidingHighlight.data("origLeft"),
            width: $slidingHighlight.data("origWidth")
        });
    });

    /* Kick IE into gear */
    $(".current_page_item a").mouseenter();

});

我现在知道两个问题：

  1. 脚本创建的 li 项目没有设置高度。
  2. 触发悬停事件时未设置左侧位置属性。

我知道我用来获取高度和左侧位置的选择器很好，因为宽度等其他属性设置正确。

有什么建议可以让我完成这项工作吗？

4

1 回答 1

0

我认为 position() 方法有问题尝试使用 offset() 方法我已经在 [fiddler][1] 中更新了您的代码，请检查并让我知道您有任何疑虑

jsfiddle.net/3C89r/3/

于 2013-04-02T18:25:05.703 回答