スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

オンマウスでスライドしてメニューが出てくるjQueryプラグイン

メニュー全体は「position: fixed;」で固定されているので下にスクロールしても同じ位置に表示され、オンマウスでアイコンがあらわれます。

Beautiful Slide Out Navigation Revised - Codrops

オンマウスで上から出るメニュー

Beautiful Slide Out Navigation Revised - Codrops

こちらは左側にメニューがあってオンマウスでアイコンがあらわれます。

hoverMenu201102.png

少しだけ解説してみます

どちらもソースは似ているので、今回は後で紹介した左側にメニューがある方で説明してみます。

緑の数字が最初に画面が表示されたときにアイコンが収まるまでの時間で、赤の数字がマウスを乗せたときにアイコンがあらわれるまでの時間です。数字が大きいほどゆっくりになります。

ちなみにjavascriptはjQueryと以下の分だけですので非常にシンプルです。

<script type="text/javascript">
  $(function() {
    $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

    $('#navigation > li').hover(
      function () {
        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
      },
      function () {
        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
      }
    );
  });
</script>
ちなみにアイコンの画像は以下のようにCSSで指定されていますが、画像はサンプルに入っていません。ですので各自で画像を用意する必要があります。
ul#navigation .home a{
    background-image: url(../images/home.png);
}
ul#navigation .about a      {
    background-image: url(../images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(../images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(../images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(../images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(../images/mail.png);
}

画像ファイルはpngがjpgだと表示されますがgifだと表示されませんでした。指定した画像は真ん中に表示されるようになっていて、画像の方が大きい場合も問題なく表示されます。

hoverMenu201104.png

結構単純な仕組みですし、元のレイアウトを壊すことなく設置できるので便利そうです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
こちらは左ですが右に設置するにはどうしたらよいでしょうか?
【2012/08/04 16:06】 | ゆーた #- | [edit]
こんにちは~

試していないですが、CSSのleftのところをrightに、
jsのmarginLeftをmarginRightにするなど
適宜変更してみるとできるかと思います。
【2012/08/11 18:27】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。