Записки лондонского фрилансера

Фиксированный сайдбар с помощью CSS

Опубликовано admin в категориях Верстка, Переводная статья, Дизайн

В последнее время я иногда начала писать посты на тему верстки. Верстальщик из меня не очень хороший, но иногда приходится и верстать, и слегка подправлять код вордпресса. Да и вообще, плох тот дизайнер, который не понимает, что и как можно сверстать. Поэтому я предпочитаю хотя бы знать о потенциальных возможностях html и css.

На сайте DesignM.AG недавно была опубликована очень интересная статья - как “приклеить” сайдбар и сделать его неподвижным при скроллинге основного контента сайта (урл статьи designm.ag/tutorials/sticky-sidenav-layout/).

Так это выглядит в реале: http://www.sohtanaka.com/web-design/examples/sticky-nav/

Допустим, ваш сайт или блог состоит из двух колонок. Колонка поуже - меню, колонка пошире - основная часть сайта. Меню сравнительно короткое (пол-экрана), основная часть сайта - длинная (3-4 экрана и больше). Хотелось бы, чтобы меню было постоянно в поле зрения посетителя сайта, даже при прокрутке:

Оказывается, реализовать это с помощью CSS несложно.
HTML

< div class="container" >
< div id="sidenav><!--Fixed Sidenav Goes Here--></div> <div id=">< /div >
< /div>

СSS

.container {
width: 980px;
margin: 0 auto;
overflow: hidden;
background: url(container_stretch.gif);
font-size: 1.2em;
position: relative;
}
#sidenav {
width: 300px;
position: fixed; /*--Фиксирует навигацию на одном месте--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
float: right; /*--Контент справа--*/
width: 640px;
padding: 0 20px 20px;
}


К сожалению, в IE6 это не работает, поэтому приходится фиксировать навигацию иначе:


*html #sidenav {
position: absolute;
left: expression( ( 0 ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) 'px' );
top: expression( ( 0 ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) 'px' );
}

Еще несколько статей для дизайнера - верстальщика:
5 простых, но полезных свойств CSS для дизайнеров и верстальщиков
Юзабилити: увеличение кликабельной зоны
Объемные буквы без Фотошопа (letterpress effect)