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

Опубликовано 2012.01.11

Разместить меню сбоку страницы достаточно просто.Под боковым меню я подразумеваю меню,которое будет "приклеено" к правой или левой стороне окна браузера. Достигается такой эффект средствами 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% высоты окна браузера, тоесть посередине. Также меню обернуто в рамку и имеет ширину в 120 пикселей. Если использовать свойство right, вместо left - то его значение будет отступом справа. Аналогично свойство bottom против top.