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>

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

フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-top Accordion」前のページ

VMware FusionにインストールしたCentOSのネットワーク設定次のページ

関連記事

  1. How satisfied are you? Slider
  2. Bootstrap Mobile FullScreen Modal
  3. Tendina

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

  4. JavaScript

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラ…

  5. DarkTooltip

    JavaScript

    色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」

    DarkTooltipというjQueryプラグインを使えば、色んなパタ…

  6. JavaScript

    リストなど複数の要素をランダムにフェードで表示していくjQueryプラグイン「champagne.j…

    どこかで使う機会がありそうな感じのjQueryプラグイン「champa…

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP