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();

});

現在わかっている問題が 2 つあります。

  1. スクリプトによって作成された li アイテムに高さが設定されていません。
  2. ホバー イベントが発生したときに、左の位置属性が設定されていません。

幅などの他の属性が適切に設定されているため、高さと左の位置を取得するために使用しているセレクターが適切であることはわかっています。

これを機能させる方法について何か提案はありますか?

4

1 に答える 1

0

position() メソッドに問題があると思います offset() メソッドを試してください [fiddler][1] のコードを更新しました 確認して、懸念がある場合はお知らせください

jsfiddle.net/3C89r/3/

于 2013-04-02T18:25:05.703 に答える