タグ別アーカイブ: slideDown

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

今回はページ上部に固定されるメニューの亜種です。
以前に上部に固定されるメニューを作成しましたが、ちょっと変形したものを作りました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--
            $(function() {

                var menuBox = $('#menu_box');
                var topPoint;
                $(window).scroll(function () {

                    var winTop = $(this).scrollTop();
                    if (winTop < 50) {
                        menuBox.slideDown();
                        menuBox.addClass('menu_fixed');
                    } else {
                        if (topPoint > winTop) {
                            menuBox.slideDown();
                            menuBox.addClass('menu_fixed');
                        } else {
                            menuBox.slideUp();
                            menuBox.removeClass('menu_fixed');
                        }
                    }
                    topPoint = winTop;

                });


            });

        --></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           : 1500px;
            }
            #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

smaple ページを開いた時点では特に何もありません。
画面下に向けてスクロールするとメニューも表示が消えていきます。

ここまでだと、jQuery を使用していない場合と同じです。
但し、スクロールを少しでも上に戻すと常にメニューが表示されるようになります。
上部に向けたスクロール中は常に上部に固定されます。

・・・結構いいですね。
サイトが綺麗になるほどメニューを画面上に表示するかを悩むかと思います。
普段は表示されなくても、メニューを表示したい場合はすぐに使える。
中々便利だと思います。

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

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

前後のオブジェクトを操作する。

今回は Object を Click した時などに、前後の Object を操作する方法です。

たとえば、複数の名称と説明文が存在するときに、click した項目のみの説明文を表示することができます。
とりあえず、やって見ましょう。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('dt').click( function () {
                    $('dd').slideUp('normal');
                    if ($(this).next().is(':hidden')) {
                        $(this).next().slideDown('normal');
                    } else {
                        $(this).next().slideUp('normal');
                    }
                });
                $('dd').slideUp(0);

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            dl, dd, dt {
                margin :20px;
            }
        --></style>
        
    </head>
    <body>

        <div id="dispArea">

            <dl>

                <dt>Sample01 Click!</dt>
                <dd>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                </dd>

                <dt>Sample02 Click!</dt>
                <dd>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                </dd>

                <dt>Sample03 Click!</dt>
                <dd>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                </dd>

                <dt>Sample04 Click!</dt>
                <dd>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                </dd>

                <dt>Sample05 Click!</dt>
                <dd>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                </dd>

            </dl>

        </div>

    </body>
</html>

sample

sampleページでは タイトルを click したときに説明文の領域が表示されるようになりました。

今回は next() を利用しています。
next() は指定した Object の直後の Object を操作しています。
直前の Object を指定する場合には prev() を使用することで可能です。

この 2つを利用すると 直前,直後の Object を操作することができるため、色々と便利になります。
今回の様に説明文を別に表示するだけでも使い勝手はいいのではないでしょうか。

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

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

ドロップダウンでの開閉表示

今回はドロップダウンでの開閉表示を作ってみます。

とりあえず、こんな感じです。

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--
            $(function() {
                
                $('#label').hover(
                    function(){ 
                        $('#drop_box').slideDown('normal');
                    },
                    function(){
                        $('#drop_box').slideUp('normal');
                    }
                );
                
            });
        --></script>
        
        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!-- 
            #drop_box {
                height           : 100px;
                width            : 200px;
                background-color : #ffcccc;
                border-color     : #ffffff;
                display          : none;
            }
            
        --></style>
        
    </head>
    <body>
        
        <span id="label">On Mouse</span>
        
        <div id="drop_box">Display Box1 Area</div>
        
    </body>
</html>

sample

「On Mouse」にマウスを乗せるとドロップダウンの領域が表示されます。

実は上記内容は slideToggle の方が簡単にできます。
ただし、開く時と閉じる時のスピードを変更できないようなんです。
う~ん。細かい設定をしたいときに slideToggle は使えないなぁ・・・

■おまけ?
jQuery のドロップダウンは以下のような動きをします。
・slideDown  スライドダウンして開く
・slideUp   スライドアップして閉じる
・slideToggle slideDown/slideUpの動作を交互に行って開閉する

そうです、上部にスライドアップして表示する機能がないんです。
 ※「そういった機能が存在するぞ」って言う方、お教えいただければ幸いです。

そこで、こんなやり方はどうでしょう。
ドロップダウン(スライドアップ表示もどき)

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--
            $(function() {
                
                $('#label').hover(
                    function(){ 
                        $('#dummy_box').slideUp('normal');
                        $('#drop_box').slideDown('normal');
                    },
                    function(){
                        $('#drop_box').slideUp('normal');
                        $('#dummy_box').slideDown('normal');
                    }
                );
                
            });
        --></script>
        
        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!-- 
            #drop_box {
                height           : 100px;
                width            : 200px;
                background-color : #ffcccc;
                border-color     : #ff0000;
                display          : none;
            }
            #dummy_box {
                height           : 100px;
                width            : 200px;
                background-color : #ccccff;
                border-color     : #0000ff;
            }
        --></style>
        
    </head>
    <body>
        
        <div id="dummy_box">Dummy Area</div>
        <div id="drop_box">Display Box1 Area</div>
        
        <span id="label">On Mouse</span>
        
    </body>
</html>

sample 2

これで、見た目上はスライドアップして表示されるように見えます。
えぇ、見えます。
断じて見えるはずです。(笑)

行っている手順は以下の通りです。
なお、実際に使用するときは、「Dummy Area」の領域の透明度を変更して見えないようにしてください。

1.ダミーの領域を事前に表示しておく。
2.オンマウス時に以下の処理を行う。
  ・ダミー領域をスライドアップして非表示状態にする。
  ・表示領域をスライドダウンして表示状態にする。
※スライドアップとスライドダウンの表示速度は同じにしてください。

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

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