【jQuery004】固定フローティングメニュー

float.jsを使った、上部に固定されたまま動かないフローティングメニューです。

本文をスクロールしても上部のメニューは固定されて動きません。

 

 

 

 

 

 

 主要なコードは以下になります。

 

---

<ul id="menu">
        <li class="floating_menu"><a href="#">HOME</a></li>
        <li class="floating_menu"><a href="#">MENU1</a></li>
        <li class="floating_menu"><a href="#">MENU2</a></li>
        <li class="floating_menu"><a href="#">MENU3</a></li>
        <li class="floating_menu"><a href="#">MENU4</a></li>
</ul>

$(function(){
    $("#menu").floater({
        marginTop:0,
        speed:0,
        fixed:true
    });
});

---

実はfloaterを呼び出しているだけなのです。

floater.jsは以下のサイトで配布されています。

利用させていただき、ありがとうございます。

http://kaelab.ranadesign.com/blog/2011/06/jquery-2.html

タグ：floater.js jQuery