Боковое меню html

Опубликовано 2012.01.11 в разделе Html

Разместить меню сбоку страницы достаточно просто.Под боковым меню я подразумеваю меню,которое будет "приклеено" к правой или левой стороне окна браузера. Достигается такой эффект средствами CSS. Достаточно всего одного свойства-position. Рассмотрим на примере простейшее меню, обернутое в див и состоящее из 5 ссылок. html
  1. <div id="menu">
  2. <a href="#">ссылка 1</a>
  3. <a href="#">ссылка 2</a>
  4. <a href="#">ссылка 3</a>
  5. <a href="#">ссылка 4</a>
  6. <a href="#">ссылка 5</a>
  7. </div>
css
  1. #menu{
  2. position:fixed;
  3. left:20px;
  4. top:50%;
  5. border:1px solid black;
  6. width:120px;
  7. }
Значение fixed свойства position - закрепит меню на странице. Свойство left означает отступ слева в 20 пикселей и top - отступ сверху в 50% высоты окна браузера, тоесть посередине. Такое меню, например используется для формирования рекламного блока на сайте tak.ru.Также меню обернуто в рамку и имеет ширину в 120 пикселей. Если использовать свойство right, вместо left - то его значение будет отступом справа. Аналогично свойство bottom против top.

3 Комментариев

Оставить комментарий

  1. Гость 2013/11/08

    Я решил этим способом разместить картинки с боку. Их штук 20, в центре экрана был текст. Хотелось чтоб листая текст двигалось боковое меню. Редактируя position:fixed; у меня боковое меню прилепляется над или под мой текст и левый отступ делает от поля с текстом.

    Ответить

  2. Гость 2013/11/06

    Как скролить? .
    У меня много пунктов в меню и нужно их скролить.

    Ответить

    1. Админ 2013/11/06

      Не влезают на экран?

      Ответить

Ваш комментарий успешно создан

Ваш комментарий

  • Для выделения кода оберните его в тэги <code> и </code>
  • Отметьте стопку книг