0

サイト全体に存在するように、デザインの上に固定されたヘッダーを使用してサイトを構築しました。問題は、ヘッダーとドックのコンテナーを、ドロップ状態に対応するのに十分な高さにしなければならなかったことです。これはほぼ正しく機能していますが、ヘッダー/ドックのオーバーレイが原因でページの一部がクリックできなくなりました... これは css の問題であり、ヘッダー/ドキュメントの作成方法に問題があります。これを行う別の方法があるかどうかはわかりません。誰かが素晴らしいアイデアや解決策に参加したい場合.

コンテナにはオーバーフローが隠されているため、ドロップ状態の場合、すべてのビデオの再生が中断されます。firebug で遊んでみると、私のジレンマがわかります。

これは実際の JS ですが、何度も試行した後にドックを元に戻すことができなかったため、正しく機能していません。

$('#play-the-series').click(function(){
            $('#main-nav #content').animate({
                    top: '0'
                }, 1000, 'jswing');
        });

サイトへのリンクはこちら: http://www.districtdesigngroup.com/basho/

これはかなり難しいので、挑戦したい人にはお勧めです。ありがとう

4

1 に答える 1

1

基本的には、CSS で #main-nav 要素の高さを 195px だけにし、同時に内側の要素の上に +200px をアニメーション化すると、 #main-nav の高さも 200px 拡張する必要があります。ヘッダーを折りたたむときは、反対のことを行います。

このコードを試してください：

$('#play-the-series').click(function(){
  // check for a "open" class on the main-nav
  if (!$("#main-nav").hasClass('open')) {

    // your animation
    $('#main-nav #content').animate({
      top: 0
    }, 1000, 'jswing');

    // container animation
    $('#main-nav').animate({
      height: 395
    }, 1000, 'jswing');

    // add class to main-nav
    $("#main-nav").addClass('open');

  } else {

    //reverse everything:

    $('#main-nav #content').animate({
      top: -200
    }, 1000, 'jswing');
    $(this).addClass('open');

    $('#main-nav').animate({
      height: 195
    }, 1000, 'jswing');

    $("#main-nav").removeClass('open');
  }
});

別の方法として、#main-nav 要素内で絶対配置を使用することもできますが、その場合、マークアップを変更し、その他の新しい CSS 編集を大量に行う必要があります。

于 2012-10-01T23:34:43.173 に答える