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

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

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

<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 人がこの 投稿 は役に立ったと言っています。

コメントを残す

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