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

16 Апр
2012

Сегодня решил помочь другим верстальщикам. Поэтому вы сейчас читаете эту статью которая является первой в рубрике «Готовые решения» здесь вы сможете найти полезные дополнения для сайтов созданные мною или другими верстальщиками. Готовые решения Сегодня я продемонстрирую боковую панель для сайта, что бы долго не описывать как она выглядить просто посмотрите демо. Эта красивая панель может служить для переключения языков веб-сайта, ссылки на 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 архив
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх