月別アーカイブ: 2013年5月

上部に固定されるメニュー

今回は最近流行りとの情報を聞いたので上部に固定されるメニューを作ってみます。

とりあえず、こんな感じでどうでしょうか。

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
        
        <script type="text/javascript"><!--
            $(function() {
                
                var menuBox = $('#menu_box');
                $(window).scroll(function () {
                    var winTop = $(this).scrollTop();
                    if (winTop > 0) {    // メニューの高さを超えた時はメニュー位置を変更
                        menuBox.addClass('menu_fixed')
                    } else {
                        menuBox.removeClass('menu_fixed')
                    }
                });
                
            });
        --></script>
        
        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!-- 
            #menu_box {
                width            : 100%;
                background-color : #ffffff;
            }
            .menu_fixed {
                position         : fixed;
                top              : 0;
                left             : 0;
                z-index          : 9999;
                
                filter:alpha(opacity=50);
                -moz-opacity: 0.5;
                opacity: 0.5;
                
            }
            
            #menu_items {
                width            : 200px;
                margin           : 0 auto;
                padding          : 20px;
            }
            
            .disp_box {
                width            : 100%;
                height           : 300px;
            }
            #disp_box1 {
                background-color : #ffcccc;
            }
            #disp_box2 {
                background-color : #ccffcc;
            }
            #disp_box3 {
                background-color : #ccccff;
            }
            #disp_box4 {
                background-color : #ccffff;
            }
            
        --></style>
        
    </head>
    <body>
        
        <div id="menu_box">
            <div id="menu_items">
                <a href="#disp_box1">Box1</a>
                <a href="#disp_box2">Box2</a>
                <a href="#disp_box3">Box3</a>
                <a href="#disp_box4">Box4</a>
            </div>
        </div>
        
        <div id="disp_box1" class="disp_box">Display Box1 Area</div>
        <div id="disp_box2" class="disp_box">Display Box2 Area</div>
        <div id="disp_box3" class="disp_box">Display Box3 Area</div>
        <div id="disp_box4" class="disp_box">Display Box4 Area</div>
        
    </body>
</html>

sample

こんな形でメニューを上部に固定することが出来ました。
やってることは結構簡単です。

画面がスクロールされてページトップでない場合に、メニューを固定する class を追加しています。
もちろんページトップに戻った場合には、メニューを固定する class は削除します。

あとは、オマケですが、ページトップで無い場合にはメニューの透明度を変更しています。
※ここはスタイルシートの設定なので Javascript は関係有りませんね・・・

これで、トップメニューの固定は出来ました。
ちょっと変更すれば、「ページ位置によっては表示させない」なども出来そうですね。
他にも必要な機能があれば、今後追加をして行きたいと思います。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

jQuery での表示/非表示

Javascript に取り組もうと思ったら避けては通れない jQuery!
今回はまず jQuery での表示,非表示です。
 ※私が最近何かと使うようになったので覚書に・・・

<html>
    <head>
        <script src="./jquery-1.9.1.min.js"></script>   
    </head>
    <body>

        <input type="button" onclick="$('#disp_box').show();" value="Show">
        <input type="button" onclick="$('#disp_box').hide();" value="Hide">
        <input type="button" onclick="$('#disp_box').fadeIn('normal');"  value="Fade In">
        <input type="button" onclick="$('#disp_box').fadeOut('normal');" value="Fade Out">

        <div id="disp_box">Display Text Area</div>

    </body>
</html>     

sample

たったこれだけで表示/非表示ができてしまうとは「凄い!」の一言につきますね。

何より感動したのは callback に対応していることですね。
A と B という DIV があるときも「A を非表示にしてから B を表示」や「A を表示してから B を非表示」が
簡単にできてしまいます。

しかし、”fadeTo();” や “toggle();” は現在の状況に影響されたりするのであまり好きではありません。
どうしても使わないといけないわけでもないので「まぁ、いいかな」っていうのが個人の感想ですね。

なんにしても「jQuery は偉大だなぁ・・・」とつくづく思いますね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 3 人中 1 人がこの 投稿 は役に立ったと言っています。