1

on.click で画面にロールオンし、on.click で再度ロールバックするようにプログラムされたナビゲーション バーがありました。

美しく機能していましたが、現在はまったく機能していません。流動的なレスポンシブ デザインのためにレイアウトを 12 列のグリッドに変換しましたが、別の方法で設定し直しても機能しません。

どんな助けでも大歓迎です。

ここにサイトがあります: http://ericbrockmanwebsites.com/dev4/

そしてマークアップ：

<div class="row-fluid">
    <div class="span12">
        <div id="dashboard">
            <nav id="access">
                <div class="open">Here's the Nav Bar
            </nav>
        </div> <!-- dashboard -->
    </div> <!-- span12 -->
</div> <!-- row-fluid -->

そしてスクリプト：

$('.open').bind('click',function() { 
    $('#dashboard').stop().animate({
        right: $(this).hasClass('close') ? '-659px' : '0'
    });
    $(this).toggleClass('close');
});

問題の原因はcssだと思いますが、レスポンシブデザインを学んでいるだけでどこを見ればいいのかわかりません。スタイルシート全体をダンプするのは役に立たないと思いますが、関連するものを選択しようとしますビット:

html {
    min-height: 100%;
    background-size: cover;
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
}

body{
    min-height:100%;
    overflow-x:hidden;
}

.row-fluid .span12 {
    width: 100%;
    *width: 99.94680851063829%;
}

#access {
    display: block;
    float: right;
    margin: 10px auto 0;
    width: 730px;
}

#dashboard {
   font-size: 30px;
   float: left;
   position: absolute;
   right: -659px;
   z-index: 100;
}

.open {
   background: #cabd32 url(images/open.png) top left no-repeat;
   background-position: center;
   float: left;
   padding: 32px 35px 33px;
}

.close {
   background: #cabd32 url(images/close.png) top left no-repeat;
   background-position: center;
   float: left;
   padding: 32px 35px 33px;
}

何時間もそれを選んでいましたが、役に立ちませんでした。助けが大好きです。乾杯、

4

1 に答える 1

0

これを試して：

脚本

$('.open').bind('click',function(){ 
    $('#dashboard').stop().animate(
    {
        right: $(this).hasClass('close') ? '-790px' : '0'
    });
    $(this).toggleClass('close');
});

そしてCSSdashboardの変更 

#dashboard {
  font-size:30px;
  float:left;
  position: absolute;
  right: -790px;
  z-index: 100;
}
于 2013-03-01T05:46:15.080 に答える