0

ホバー時にポップアップする固定サイド メニューに次のコードを使用しています。コードはオンラインで見つかり、簡単に統合できます..

CSS:

<div id="nav">
    <ul class="nav">
        <li class="home"><a class="home" href="#home">Home</a></li>
        <li class="museum"><a class="museum" href="#museum">Museum</a></li>
        <li class="collection"><a class="collection" href="#collection">Collection</a></li>
        <li class="timeline"><a class="timeline" href="#timeline">Timeline</a></li>
        <li class="contact"><a class="contact" href="#contact">Contact</a></li>
    </ul>
    <div class="clear"></div>
</div>

JQuery:

// link hover
$(function() {
    $('.nav a').stop().animate({'marginLeft':'-140px'},200);
    $('.nav > li').hover(
        function () {
            $('a',$(this)).stop().animate({'marginLeft':'-45px'},200);
        },
        function () {
            $('a',$(this)).stop().animate({'marginLeft':'-140px'},200);
        }
    );
});

そして、PlusAnchor スクリプトを使用して、ページを右の div にスクロールします。

// Page Scroll
$('body').plusAnchor({
    easing: 'easeInOutExpo',
    speed:  1000,
    offsetTop: -60
});

コードを変更する必要がありますが、Jquery を初めて使用する方法がわかりません。ユーザーがクリックした後もメニュー項目を「ポップアウト」したままにするか、ユーザーがスクロールして問題の div が表示されるときに「ポップアウト」する必要があります。

どうすればこれを達成できますか？採用できるスクリプトはありますか？

JSFIDDLE: http://jsfiddle.net/AG3tg/

4

1 に答える 1

3

基本的に、要素がクリックされたときに記録し、それに応じて処理する必要があります。jQuery コードを次のように更新します。

$('document').ready(function() {
    // link hover
    $('.nav a').stop().animate({'marginLeft':'-140px'},200);
    $('.nav > li').hover(
        function () {
            $('a',$(this)).stop().animate({'marginLeft':'-45px'},200);
        },
        function () {
            if(!$(this).data('shown'))
            {
                $('a',$(this)).stop().animate({'marginLeft':'-140px'},200);
            }
        }
    ).click(function() {  
        $('.nav > li').data('shown', false);
        $(this).data('shown', true);
        $('.nav > li a').not(':eq('+$(this).index()+')').stop().animate({'marginLeft':'-140px'},200);
    });

    // plus anchor
    $('document').plusAnchor({
        easing: 'easeInOutExpo',
        speed:  1000,
        offsetTop: -60
    });
})

これが更新されたjsFiddleです

于 2013-04-08T17:37:26.283 に答える