JavaScript

マウスオーバーでメニュー以外の全体にオーバーレイがかかるクールなナビゲーションメニュー「Overlay Effect Menu with jQuery」

とてもかっこいいナビゲーションメニューを実装できるjQueryプラグイン「Overlay Effect Menu with jQuery」を使ってみました。ファッション関係などビジュアル面でこだわりたい場合などにはとてもよさそうな感じです。各メニューにマウスオーバーするとメニュー以外の画面全体にオーバーレイのエフェクトがかかりメニュー選びに集中できる視覚効果もあるかと思います。ということで以下簡単な使い方です。

[ads_center]

使い方

以下のURLからファイルをダウンロードします。

デモもあります。

ダウンロードしたファイルの中のstyle.cssを読み込みます。

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

基本的なマークアップはこんな感じです。

<div class="oe_wrapper">
    <div id="oe_overlay" class="oe_overlay"></div>
        <ul id="oe_menu" class="oe_menu">
            <li><a href="">タイトル1</a>
                <div>
                    <ul>
                        <li class="oe_heading">メニュータイトル</li>
                        <li><a href="#">メニュー1</a></li>
                        <li><a href="#">メニュー2</a></li>
                        <li><a href="#">メニュー3</a></li>
                        <li><a href="#">メニュー4</a></li>
                        <li><a href="#">メニュー5</a></li>
                    </ul>
                    <ul>
                        <li class="oe_heading">メニュータイトル</li>
                        ・・・以下省略
                    </ul>
                    ・・・以下省略
                </div>
            </li>
            <li><a href="">タイトル2</a>
                ・・・以下省略
            </li>
        </ul>
    </div>

jQueryを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script type="text/javascript">
$(function() {
    var $oe_menu = $('#oe_menu');
    var $oe_menu_items = $oe_menu.children('li');
    var $oe_overlay = $('#oe_overlay');

    $oe_menu_items.bind('mouseenter',function(){
        var $this = $(this);
        $this.addClass('slided selected');
        $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
            $oe_menu_items.not('.slided').children('div').hide();
            $this.removeClass('slided');
        });
    }).bind('mouseleave',function(){
        var $this = $(this);
        $this.removeClass('selected').children('div').css('z-index','1');
    });

    $oe_menu.bind('mouseenter',function(){
        var $this = $(this);
        $oe_overlay.stop(true,true).fadeTo(200, 0.6);
        $this.addClass('hovered');
    }).bind('mouseleave',function(){
        var $this = $(this);
        $this.removeClass('hovered');
        $oe_overlay.stop(true,true).fadeTo(200, 0);
        $oe_menu_items.children('div').hide();
    })
});
</script>

とてもシンプルでクールなナビゲーションメニューですね。
メニュー項目がたくさんある場合などもスペースの有効活用になったりするのでおすすめかと思います。

関連記事

  1. Progressively

    JavaScript

    画像を徐々に読み込んでくれるJSライブラリ「Progressively」

    Progressivelyは画像を徐々に読み込ませることができるJSラ…

  2. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  3. no-image

    JavaScript

    タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」

    simplelightboxはレスポンシブ対応でタッチフレンドリーなl…

  4. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

  5. jAnimate

    JavaScript

    フリップやバウンスなどのアニメーションを要素に実装できる「jAnimate」

    jAnimateはフリップやバウンスなどといったアニメーションを要素に…

  6. Vertical Fixed Navigation #2

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP