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. jQuery Tooltip Basic

    JavaScript

    カスタマイズしやすいツールチップ実装「jQuery Tooltip Basic」

    jQuery Tooltip Basicは、カスタマイズしやすいツール…

  2. socialShare.js
  3. bootstrap-wysihtml5

    JavaScript

    シンプルで美しいWYSIWYGエディタを実装できる「bootstrap-wysihtml5」

    bootstrap-wysihtml5はシンプルでスッキリしたデザイン…

  4. JavaScript

    軽量で嬉しい!画像を拡大ズームしてくれるjQueryプラグイン「Leroy Zoom」

    Leroy ZoomというjQueryプラグインを使えば、画像を拡大ズ…

  5. Choice.js
  6. PgwSlider

    JavaScript

    レスポンシブで軽量なスライダーを実装できるjQueryプラグイン「PgwSlider」

    PgwSliderというjQueryプラグインを使えばレスポンシブで軽…

コメント

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

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

最近の記事

  1. Anker PowerHouse 200

アーカイブ

PAGE TOP