メニュー

WP版キャラチョコブック

Chocobanditz ONLINE

ページトップ

ページボトム

メニュー

Chocobanditz ONLINE

閉じる

DESIGN JavaScript Webデザイン

3手です!ユーザビリティ向上にも役立つ半透明になる固定型ナビメニュー

投稿日:2014年4月29日 更新日:

dez_001_pct01

スクロールした時に他のコンテンツの邪魔にならないよう半透明になる固定型のナビメニューを見かけたことありませんか?
どうやっているのか気になっていて、調べて実装してみました。

この記事では、
固定型のナビを設置していて、これから半透明になる固定型ナビメニューを試してみようかなって方に向けて、備忘録も兼ね調べた方法をご紹介します。

大変そう?

大丈夫! 基本コピペでさくっと実装出来ますよ!

スポンサーリンク

半透明になる固定型ナビメニュー

目次

  1. 01 jQuery「Fixed Fade Out Menu」スクリプトの取得(外部jsファイル化)
  2. 02 外部化したjsファイルのカスタマイズ
  3. 03 jsファイルの実装
  4. 04 まとめ

01 jQuery「Fixed Fade Out Menu」スクリプトの取得
(外部jsファイル化)

[手順1]
ナビの半透明化には、jQueryの「Fixed Fade Out Menu」を使います。
こちらの配布サイト
http://tympanus.net/codrops/2009/12/11/fixed-fade-out-menu-a-css-and-jquery-tutorial/

dez_001_pct02

を開き、デモページ中の「3. THE JAVASCRIPT」のソースコード部分をテキストファイルにコピペして、拡張子jsの好きな名前を付けて保存します。
(例えばFixedFadeOutMenu.jsなど)

02 外部化したjsファイルのカスタマイズ

$(function() {
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        if(scrollTop != 0)
            $('#nav').stop().animate({'opacity':'0.2'},400);//←➀
        else   
            $('#nav').stop().animate({'opacity':'1'},400);//←➁
    });
     
    $('#nav').hover(
        function (e) {
            var scrollTop = $(window).scrollTop();
            if(scrollTop != 0){
                $('#nav').stop().animate({'opacity':'1'},400);//←➂
            }
        },
        function (e) {
            var scrollTop = $(window).scrollTop();
            if(scrollTop != 0){
                $('#nav').stop().animate({'opacity':'0.2'},400);//←➃
            }
        }
    );
})

[手順2-1]
保存したjsファイルの中の「#nav」となっている箇所を、半透明化したい部分(ナビメニュー)のidもしくはクラス名に変更します。

[手順2-2]
➀固定表示部分が最上部にない時の不透明度とフェードアウトする時の秒数
➁固定表示部分が最上部の時の不透明度とフェードインする時の秒数
➂固定表示部分にカーソルがのった時の不透明度とフェードインする時の秒数
➃固定表示部分からカーソルが離れた時の不透明度とフェードアウトする時の秒数

①②③④の値をお好みで調整します。
最初はあまり深く考え込まずやってみて、後から微調整かけるがよいです。

※不透過度はanimate内のopacityに対して1 ~0.1の値で設定します。
(1=不透明です)
※フェードイン/アウトのスピードはopacityの隣に数値で設定します。
(1000=1秒です)

「scrollTop != 0」部分の数値を任意の値に変えることで、半透明化を適応させる基準となる位置を変更することも出来ます。

03 jsファイルの実装

[手順3]
jsファイルのカスタマイズが済んだら、
HTMLのhead内に、保存先を指定して実装します。

↓いつものこんな感じで

<script type="text/javascript" src="js/FixedFadeOutMenu.js"></script>

04 まとめ

簡単に要約すると、
“任意のidもしくはクラス名と基準となるページトップからの位置を設定して、指定したidもしくはクラス名をもつ要素の透明度をコントロールするスクリプト”といった感じでしょうか。

使い方によっては固定型のナビゲーション以外にも応用出来そうですネ。

以上

この記事では、
すでに固定型のナビを設置済の方に向けて、ナビをスクロール等の操作時に半透明化する方法にフォーカスしてご紹介しました。

スポンサーリンク

-DESIGN, JavaScript, Webデザイン

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

MadiaMarkerメディアマーカー

Maerchen_Diverグッズ