4

ブラウザ ウィンドウに右のメニューがあるとします。

___________________________
                   | Right |
        content    | Menu  |
                   |       |
                   |       |
                   |       |
                   |       |
                   |       |
                   |       |
                   |       |
___________________|_______|

ユーザーが下にスクロールしたときに同じものが表示されるように、メニューを修正したいと思います。そこで、右側のメニューに position:fixed を設定しました。

ただし、ウィンドウが小さすぎる場合はメニューが表示されないようにしたい. つまり、ウィンドウは右メニューの前に完全なコンテンツを表示する必要があります。

このような：

_________________________
                   | Ri |
        content    | Me |
                   |    |
                   |    |
                   |    |
                   |    |
                   |    |
                   |    |
                   |    |
___________________|____|

純粋なcssでこれを行う方法はありますか? そうでない場合は、非常に単純な js 修正ですか?

編集：

関連する質問があるので、別の質問を作成する必要はありませんでした:

右側のメニューの幅は固定ですが、それに応じて幅を自動調整するには左側のコンテンツが必要です (左側を埋める)。CSSでこれを行い、上記の機能を維持する方法はありますか?

4

3 に答える 3

2

If you know the dimensions of your content you can use the following instead:

position:fixed; left:800px;

rather than:

position:fixed; right:0;

If say your content was 800px wide. This means your calculation is working from the left and the menu will push off screen if the users window is smaller than that.

update

As it seems that your requirements are the following:

  • You have a content region that has a minimum width specified.
  • You need your menu to scroll with the user.
  • You need your menu to appear attached to the right, until the menu would encroach on the minimum width of your content.

I would recommend using JavaScript to solve this problem, you can achieve it in pure CSS but by placing your menu into a fixed layer that covers the whole page. Whilst the logic here works in modern browsers — due to z-indexing the content above the menu-container — I would hate to see what older user agents would make of it:

pure css version

css

/* make sure our content doesn't collapse too small */
.content { 
  position: relative;
  z-index: 20;
  min-width: 700px;
  margin-right: 200px;
}
/* place our menu container across the entire page */
.menu-container {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
/* a layer that mimics what our content does */
.menu-offset  {
  position: relative;
  min-width: 700px;
  margin-right: 200px;
  height: 100%;
}
/* finally the menu attached to the right of the menu offset */
.menu-content { 
  position: absolute;
  width: 200px;
  height: 100%; 
  left: 100%;
  background: #ddd;
}

markup

<div class="content">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis 
  adipiscing magna sed ipsum convallis vel fringilla nibh viverra.
  Nulla et ligula vel urna scelerisque imperdiet a et lectus.
  Nunc commodo, nibh id blandit mollis, leo quam eleifend urna,
  at rhoncus turpis justo sit amet erat. Quisque tempus nunc 
  vitae eros fringilla eget imperdiet neque tincidunt. Donec 
  ac posuere diam. Nam nibh nibh, sollicitudin non blandit ut, 
  auctor in dolor. Nullam lobortis condimentum consequat. 
  </p>
  <p>
  Maecenas at orci massa, quis congue mauris. Vivamus varius 
  tincidunt nunc, eget <a href="#canyouclickthis">pellentesque arcu 
  faucibus</a> ac. Suspendisse rhoncus orci eu felis consectetur 
  rutrum. Nullam sed mauris eros. Nunc dignissim, libero dapibus 
  consectetur lobortis, ante urna faucibus dui, vel luctus metus 
  leo id magna. Pellentesque mi ligula, commodo ac pellentesque 
  et, auctor sed neque. Phasellus dapibus tellus faucibus dui 
  vehicula hendrerit. Pellentesque habitant morbi tristique 
  senectus et netus et malesuada 
  fames ac turpis egestas.
  </p>
</div>
<div class="menu-container">
  <div class="menu-offset">
    <nav class="menu-content">Menu</nav>
  </div>
</div>

With the above I would expect older browsers to either render so that you wont be able to interact with anything in the content div — please see the #canyouclickthis link — or to not support position:fixed properly anyway:

http://caniuse.com/css-fixed

update 2

Ah, just spotted your comment with regards to 80% width. A modification to the above could work for this, however, it's probably best to avoid using a percentage width when you have a fixed-width menu — especially with the conditions you are specifying — and rely on min and max-width instead. Either that or use a menu with a percentage width rather than fixed.

Depending on how you have/want your markup set up, the following could work. This approach counts on the fact that if you don't specify left, top, bottom or right the layer should stay where it is placed (not 100% true in older browsers). You may find you have to define dimensions for the .menu layer for less modern UAs. This solution has the added benefit of not covering the entier page in a fixed layer :)

.content        { position:relative; width:80%; min-width: 800px; float:left; }
.menu-container { position:absolute; left:100%; top:0; }
.menu-content   { position: fixed; width:20%; height:100%; background:#ddd; }

<div class="content">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis 
  adipiscing magna sed ipsum convallis vel fringilla nibh viverra.
  Nulla et ligula vel urna scelerisque imperdiet a et lectus.
  Nunc commodo, nibh id blandit mollis, leo quam eleifend urna,
  at rhoncus turpis justo sit amet erat. Quisque tempus nunc 
  vitae eros fringilla eget imperdiet neque tincidunt. Donec 
  ac posuere diam. Nam nibh nibh, sollicitudin non blandit ut, 
  auctor in dolor. Nullam lobortis condimentum consequat. 
  </p>
  <div class="menu-container">
    <nav class="menu-content">Menu</nav>
  </div>
</div>

Again it would be best to test this in the likes of Internet Explorer as I don't have access to that particular User agent atm.

于 2013-04-25T00:03:19.327 に答える
1

jQuery を使用すると、ウィンドウの幅とコンテンツの幅を計算し、それをメニューの左の値に割り当てることができます。

var leftPosition = ($('#wrapper').width() / 2 ) + ($(window).width() / 2);

$('#menu').css("left", leftPosition);

$(window).resize(); を使用します。ウィンドウが変更された場合に再計算します。if/else ステートメントを追加して、一定の量を超えないようにして、準備が整うようにします。

結果を示すjsFiddle を次に示します。

于 2013-04-25T00:44:05.717 に答える
1

質問の 2 番目の部分では、content要素にメニュー幅と同じmargin-rightかpadding-right等しい値を指定します

そう

.menu{
   position:fixed;
   top:0;
   bottom:0;
   right:0;
   width: 240px; /*the fixed width you want*/
}

.content{ /*assuming there is a wrapper element*/
   margin-right:240px; /*same as fixed width of menu*/
}

http://jsfiddle.net/gaby/MMnhZ/のデモ

于 2013-04-25T00:39:36.863 に答える