Готовые решения: Боковая панель для сайта

Сегодня решил помочь другим верстальщикам. Поэтому вы сейчас читаете эту статью которая является первой в рубрике «Готовые решения» здесь вы сможете найти полезные дополнения для сайтов созданные мною или другими верстальщиками.


Сегодня я продемонстрирую боковую панель для сайта, что бы долго не описывать как она выглядить просто посмотрите демо. Эта красивая панель может служить для переключения языков веб-сайта, ссылки на RSS и так далее. Ее можно зафиксировать и она будет всегда не подвижна при прокрутки страницы. Короче говоря с ней можно делать все что вам понадобиться.

Как с этим работать?

Начну с того как добавить новую иконку. В zip архиве вы найдете psd файл где вы можете добавлять новые иконки и после этого сохранив картинку с прозрачным фоном (! и главное без рамки) мы приступаем к редактированию кода. Я реализовал использование одной картинки для всех иконок, поэтому мы должны знать координаты каждой иконки.
Открываем css файл и добавляем вот такие строки:
.mobile a /*Код первоначального изображения иконки*/
{
margin: 0 7px 0 0;
padding: 0px;
width: 30px;
height: 35px;
background-image: url(images/icon.png);/*Изображение с иконками*/
background-repeat: no-repeat;
background-position: 0px -140px;/*Здесь указываем координаты первоначальной иконки на изображении со всеми иконками*/
float: right;
overflow: hidden;
}

.mobile a:hover /*Выезжающий эффект при наведении, (не работает в Opera)*/
{
width: 30px;
height: 35px;
background-image: url(images/icon.png);/*Изображение с иконками*/
background-repeat: no-repeat;
background-position: -30px -140px;/*Здесь указываем координаты иконки с фоном на изображении со всеми иконками*/
float: right;
-o-transition: background 250ms linear;
-webkit-transition: background 250ms linear;
-moz-transition: background 250ms linear;
transition: background 250ms linear;
}

После этого открываем html файл и добавляем туда вот эту строку в контейнер

Вот мы и добавили новую иконку НО теперь надо изменить размер панели что бы новая иконка поместилась. Открываем CSS файл и находим там вот это:
.sidebar
{
margin-left:158px;
background:url('images/background.png')repeat-y;
width:44px;
height:170px;/*Изменяем высоту под свои нужды что бы все иконки влезли*/
}

Вот теперь новая иконка добавлена. В архиве содержится все нужные файлы для размещения такой панели у вас на сайте, так же прилагается psd файл.
Вроде все описал, буду благодарен если укажите на ошибки в коде, кстати говоря в Opera почему то транзишен не работает поэтому эффекта при наведении нету, хотя код для Opera написал. Всем сапсибо за внимание, пользуйтесь на здоровье.

Демо страница
ZIP архив