Beautiful Slide Out Navigation


Description: 美しいサイドアウトナビゲーションです。マウスを乗せる事でアイコンがスライドインします。また、メニュー全体をposition: fixed;で固定させています。そのため、IE6では正常に表示できません。
Sample: Demo
Tutorial: Beautiful Slide Out Navigation
License: -

Note

$(function() {
 $('#navigation > li').hover(
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  },
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
  }
 );
});

Related snippet :

  • Description: マウスオーバーで可愛いアイコンが降り、離すと裏から戻る、というアニメーションのグローバルメニューです。ユニークでインパクト有ります。 Sa ...
  • Description: MootoolsのサイトにあるようなメニューのエフェクトをjQueryで動かしたもの。アクセス時にアニメーションを掛け、マウスオーバー時にもアニメー ...
  • Description: オンマウスでフェードエフェクトをかけながら画像を切り替えます。cssスプライト使用。シンプルなエフェクトですが、クロスブラウザにも対応しており、目を ...
  • Description: マウスを乗せると縦スライドして色が切り替わるメニュー。テキストメニューをスタイリッシュに見せることができるのでSEOも考慮しているサイトにも使えそう ...
  • Description: サイドからメニューがスムーズに飛び出すタブナビゲーションです。fixさせても面白いですね。デフォルトではIE6で表示できていません。開いたまま、他の ...
  • Description: Appleのスライドショーのようなギャラリーを構築するチュートリアルです。デモではcss3と、IE7のハックを用いているので汎用的とは言えませんが、 ...
  • Description: Macライクなドックメニューを実装するプラグインです。爽快なアニメーションがかわいいですね。アイコンにはキャプションも表示してくれます。クロスブラウ ...