«Закрепленное» меню с гибким горизонтальным положением - PullRequest
Новая
       33

«Закрепленное» меню с гибким горизонтальным положением

0 голосов
/ 26 июня 2011

Я пытаюсь создать закрепленное меню стиля, например:

http://www.w3.org/Style/Examples/007/menus

За исключением того, что я хочу, чтобы горизонтальное позиционирование было более гибким.

Я знаю, что могу сделать это, имея процентное значение в «right:» вместо константы, но я хочу, чтобы меню плотно прилегало к центрированному макету блога в качестве боковой панели, что означает, что при изменении размера страницы боковая панель не должна покрывать содержимое. Точно так же поле не должно распространяться от контента, если я увеличу размер страницы.

Есть ли способ сделать это только с помощью css? Если нет, возможно, простое решение javascript?

1 Ответ

1 голос
/ 26 июня 2011

Вот один из способов сделать это с помощью общего кода:

HTML: 

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

CSS:

Установите явную ширину контейнера и содержимого, оставляя место для боковой панели в контейнере. Горизонтально отцентрируйте контейнер. 

#container {
  width: 200px;
  margin: 0 auto;
}

#content {
  width: 150px;
}

Теперь мы собираемся position: fix на боковой панели относительно центра страницы, а не относительно правого края страницы. Сделайте так, чтобы ширина оставшегося пространства в контейнере оставалась равной margin-left (или padding-left, в зависимости от других вещей, которые вы можете захотеть с ним делать), равной ширине содержимого. Затем установите right: 50% (для правой боковой панели измените эти значения на left для левой боковой панели) и margin-right на отрицательную половину ширины контейнера: 

#sidebar {
  width: 50px;
  margin-left: 150px;
  position: fixed;
  right: 50%;
  margin-right: -100px;
  /* other styles such as "top", etc. */
}

Измените размер окна, и оно останется плотно прилегающим к содержимому и расположится вертикально там, где вы его разместите.

Вот скрипка (с некоторыми дополнительными стилями для наглядности): http://jsfiddle.net/blineberry/UkEkS/

...