0

jQueryを使用してナビゲーションバーを展開および折りたたむCSSで設計されたレイアウトがあります。折りたたむと、ナビゲーションバーがあった場所に空きスペースがたくさんあります。理想的には、コンテンツをそれに拡張したいと思います。

私は図を描きました：

ナビゲーションバーの折りたたみ前後のレイアウトを示す図

私は現在、以下を使用してこれを達成しています:

<div>
  <div id="navbar">
    Navbar content here
  </div>

  <div id="right-side-container">
    <div id="header">
      Header content here
    </div>
    <div id="data">
      Data here
    </div>
  </div>
</div>

..「データ」div の幅は、ナビゲーション バーが展開または折りたたまれたときに Javascript によって動的に設定されます。を使用する以外に、どうすればこれを達成できposition: absoluteますか? absolute残りのデザインとのオーバーラップや全体的な悪い流れを引き起こすため、避けたいです。<div>の設定が間違っていると思います。

4

1 に答える 1

1

これを試して。

CSS:

#navbar {
    width: 200px;
    height: 50px;
    border: 2px solid;
    margin: 0 20px 20px 0;
    float: left;
}

#navbar.expd {
    height: 200px;
}

#header {
    overflow: hidden;
    height: 50px;
    border: 2px solid;
    margin: 0 20px 20px 0;
}

#data {
    overflow: hidden;
    height: 50px;
    border: 2px solid;
    margin: 0 20px 20px 0;
}

JS:

$('#navbar').click(function() {
    $(this).toggleClass('expd');
});

http://jsfiddle.net/5FCeV/

于 2013-11-05T12:13:43.970 に答える