1

Mozilla.com のサイトの上部にこのタブがあり、クリックするとメニューがドロップダウンします。ページの下半分から逆さまにして同じことをしてほしいクライアントがいます。どうやらこれは本当に難しい要求です。タブジラのように、コンテンツをオーバーラップさせたり押しのけたりするものを作成するにはどうすればよいですか? ありがとう！

更新: 私はあなたたちを愛しています.

編集: http://hemakessites.com/mayukh/4/上部の「サインイン/登録」がポップアップし、下部の「トグル」がポップアップするのはなぜですか? CSSの「トップ」と「ボトム」以外に違いはありません。ポップアップの方向はどのように変わりますか?

また、「337-9147」をクリックするとメニューが展開されます。ボタン領域をクリック可能にしたいだけです。どうすればこれを達成できますか?

皆さんは素晴らしいです。時間ができたら、ここでいくつかの質問に答えることで恩返しをするつもりです。

4

3 に答える 3

1

画面の下部に固定または絶対位置を設定するという点で、他の方法と同様のアプローチを採用しました（タブを常に表示するか、最下部のみに表示するかによって異なります）。次に、要素の高さを変更するための非常に単純なJavaScriptを記述できます。下部が固定されると、タブが画面に表示されます。

基本的に必要なのは

.container{
 position: absolute;
 bottom: -1px;    
}

と

$('.container').toggle(function(){
    $(this).animate({height:'205px'}, 500)
},function(){
    $(this).animate({height:'20px'}, 200)           
});

これがjsfiddleのデモです。

于 2012-11-17T04:59:00.543 に答える
0

これがcss3よりもスムーズなjQueryソリューションです。

したがって、次のjsfiddleのようなことを行う必要があります（注：これにはjQueryが必要です）： http： //jsfiddle.net/cFkn2/

$(document).ready(function() {
    $('#tab').click(function() {
        if ($('#tab').css('height') == '20px') {
            $('#tab').animate({
                height: '100px'
            }, 1000);
        }
        else {
            $('#tab').animate({
                height: '20px'
            }, 1000);
        };
    });
});

と

#tab{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: red;
    height:20px;
}

と

<div id="tab">CONTENT</div>

スタイルを設定し、編集し、味にイージングを追加します。

于 2012-11-17T04:56:55.180 に答える
0

ここでクリックハンドラーを作成するのが面倒だったので、css3のみのホバーサンプルです

{top：100％}、アニメーションのトランジション、表示するマージン<0の固定位置を使用しました。

HTML

  <div id="menu">
    <div id="handler">handler</div>
    <div id="menucontent">
    menu menu<br>
    menu menu<br>
    </div>
  </div>
  <div id="content">
   <div> text   text   text</div>
   <div> text   text   text</div>
   <!-- many of them -->
   <div> text   text   text</div>
   <div> text   text   text</div>
   <div> text   text   text</div>
  </div>

CSS：

#content > div {
 font-size: 2em; 
 height: 2.1em;
 border: 1px solid black;
 margin-top: 10px;
}
#menu {
 left: 30px;
 position: fixed;
 font-size: 20px;
 width: 300px;
 height: 300px;
 top: 100%;
 border: 1px solid red;
 background: white;
 -webkit-transition: all 1s;
 -mozilla-transition: all 1s;
 -o-transition: all 1s;
 transition: all 1s;
}
#menu #handler {
 position: absolute;
 top: -40px;
 background: green;
 font-size: 30px;
 height: 40px;
 padding-left: 5px;
 padding-right: 5px;
 left: 10px;
}
#menu:hover {
 margin-top: -300px; 

}

クリックで、または

JS：

$(function() {
  $('#menu #handler').click(function() {
  $('#menu').toggleClass('shown');
  });
});

csshoverでクラスに変更shown

#menu.shown {
 margin-top: -300px; 
}
于 2012-11-17T04:48:46.227 に答える