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. jQuery fullsizable
  2. JavaScript

    スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

    StickyというjQueryプラグインを使えば、スクロールしても固定…

  3. JavaScript

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

  4. Data Img

    JavaScript

    ブラウザ幅に応じて画像を切り替えれるレスポンシブ対応のjQueryプラグイン「Data Img」

    Data Imgはブラウザ幅に応じて最適なサイズの画像を切り替えて表示…

  5. WEB TICKER

    JavaScript

    テキストや画像を無限にスクロールさせれるティッカー実装「WEB TICKER」

    WEB TICKERは、テキストや画像、リストなどさまざまなコンテンツ…

  6. PhotoSwipe

    JavaScript

    タッチジェスチャーにも対応したイメージギャラリー・PhotoSwipe

    PhotoSwipeはスマホやタブレットのタッチジェスチャーにも対応し…

コメント

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

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

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP