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. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

  2. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

  3. Zoom SlideShow

    JavaScript

    カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」

    Zoom SlideShowは、カルーセルによるスライドショーとズーム…

  4. JavaScript

    とても簡単にクールなドロップダウンを実装できるjQueryプラグイン「DropKick」

    個人的に使いやすそうだったので備忘録です。DropKickというjQu…

  5. Slight Submenu

コメント

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

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

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP