0

そのため、上部に「固定」されたレスポンシブナビゲーションメニューを作成しています。これは、モノバーとクリックするとナビゲーションを表示するボタンを備えた「ブートストラップ」スタイルです。

HTML

<nav class="hiddennav displaynone">
    <ul>
        <?php wp_nav_menu(array('menu' => 'Main Nav menu')); ?>
   </ul>
</nav> <!-- end div hiddennav -->   
<div class="fixednav fixed">
    <div class="smalllogo">
        <h1 class="smaller"><a class="whitelink" href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    </div> <!-- end div smalllogo -->
    <div class="shownav">
        <a href="#" class="shownavbutton"></a>
    </div> <!-- end div shownav --> 
</div> <!-- end div fixednav -->

Javascript：

$(document).ready(function(){ 
    $(".shownavbutton").click(function() { 
        $(".hiddennav").toggleClass("displaynone").toggleClass("displayblock");
    });
});

 $(document).ready(function(){ 
    $(".shownavbutton").click(function() { 
        $(".fixednav").toggleClass("fixed").toggleClass("relative");
    });
});

これは、「非表示のナビゲーション」の下のバーの位置を相対的なものに変更して、ユーザーがページをクリックした後にスクロールしてから「非表示のナビゲーション」を表示した場合にページの周りに浮かないようにします。

問題は、それが可能な限り滑らかではないということです。1つ目はページの上部にジャンプし、2つ目はアニメーション化されておらず、突然です。

関数をアニメーション化する方法については、ちょっと困惑しました。

誰か助けますか？

4

1 に答える 1

0

「先頭にジャンプ」動作は、クリック イベントを空のマーカー「#」を持つ「a」アンカー タグにバインドしているためです。これは間違いではありませんが、リンクがクリックされた後、ブラウザが一番上までスクロールしないようにする必要があります。これを行うには、クリック イベントで false を返すか、e.preventDefault() を呼び出します (コールバック関数に「e」パラメーターを追加することを忘れないでください)。

アニメーションの場合、slideDown またはフェード jquery アニメーション メソッドを使用できます。

また、同じイベントで同じ要素に 2 つのバインディングを作成する必要はありません。バインディングは 1 つだけでかまいません (同じですが、よりクリーンです)。

例：

$(document).ready(function(){ 
    $(".shownavbutton").click(function(e) {
        e.preventDefault(); 
        $(".hiddennav").toggleClass("displaynone").toggleClass("displayblock");
        $(".fixednav").toggleClass("fixed").toggleClass("relative");
        $(".hiddennav").hide().slideDown("normal", "linear");
    });
});
于 2012-10-24T12:06:25.103 に答える