Основное меню

Создание панели навигации для изображения


И так начнем создание панели навигации, первое что нам понадобится - HTML-структура, а именно три контейнера. Перечисляю эти контейнеры:
- панель с иконками расположенная в верхней части
- навигационная панель со стрелками "назад" и "вперед", а также с названием изображения
- изображение

Панель расположенная вверху, будет выглядеть как неупорядоченный список, код ниже:

<ul class="toolbar">
<li><a class="zoomin"></a></li>
<li><a class="zoomout"></a></li>
<li><a class="shop"></a></li>
<li><a class="fav"></a></li>
<li><a class="edit"></a></li>
<li><a class="label"></a></li>
<li><a class="info"></a></li>
</ul>

Навигационная панель располагающаяся внизу будет иметь вид обычного DIV-блока:

<div class="navigation">
<a class="previous"></a>
<a class="next"></a>
<span class="price">Название изображения</span>
</div>

Вносим эти два кода приведенные выше в контейнер, добавляем изображение и получаем следующее:

<div class="image_container">
<ul class="toolbar">
<li><a class="zoomin"></a></li>
<li><a class="zoomout"></a></li>
<li><a class="shop"></a></li>
<li><a class="fav"></a></li>
<li><a class="edit"></a></li>
<li><a class="label"></a></li>
<li><a class="info"></a></li>
</ul>
<img src="example.jpg" alt="example" width="500" height="375"/>
<div class="navigation">
<a class="previous"></a>
<a class="next"></a>
<span class="price">Название изображения</span>
</div>
</div>

Теперь нужно задать стили для HTML-элемнтов. Наше изображение после придания ему красивых форм с помощью CSS3 должно иметь вид кадра или фотографии заключенной в рамку и имеющей вокруг себя красивые мягкие тени. Данный эффект работает не во всех браузерах, так как используется CSS3, например FireFox и Google Chrome CSS3 поддерживают, а Internet Explorer нет. Модификация с помощью CSS3 будет выглядеть следующем образом:

.image_container{
width:500px;
height:375px;
padding:5px;
background-color:#f7f7f7;
border:1px solid #ccc;
-moz-box-shadow: 0 1px 3px #777;
-webkit-box-shadow: 0 1px 3px #777;
margin:40px auto;
}

Изображение, которое мы будем использовать, имеет размер 500x375 пикселей, из-за этого контейнер, который будет окружать наше изображение должен быть такого же размера. Так как нам не желательно выходить за границу эффекта, нужно добавить одну границу, некоторые подладки и цвет фона. Данное действие позволяет создать две границы для изображения: первый установлен за счет границы, а другой при помощи обивки.
С добавлением правого и левого поля "Авто" на данной странице, DIV центруем вертикально. Теперь вернемся к неупорядоченному списку иконок располагающихся вверху изображения. Так как наша панелька с иконками должна находится вверху, нужно задать для нее следующие стили:

ul.toolbar{
position:absolute;
width:500px;
height:52px;
margin:0px;
padding:0px;
background-color:#fff;
border-bottom:2px solid #ccc;
list-style-type:none;
}

Далее составим список расположенный в линии, код ниже:

ul.toolbar li{
display:inline;
}

Когда создаются CSS-стили, нужно всегда стараться писать классы более компактно, не повторяя одну и ту же часть CSS-кода для каждого элемента. Все значки в верхней панели отличаются, поэтому нужно создавать классы для каждой иконки отдельно. Все элементы в верхней панели имеют достаточно неплохое количество свойств, которые подходят для всех иконок, поэтому первым делом нам потребуется определить все эти свойства.

ul.toolbar li a{
float:left;
cursor:pointer;
width:70px;
height:52px;
opacity: 0.6;
}

Каждая иконка имеет размер 48x48 пикселей, но для того чтобы все иконки смотрелись красиво на верхней панели, они должны иметь вокруг себя пространство, а не липнуть друг к другу. При наведение на ссылку или иконку-ссылку курсор мышки обычно изменяется и из стрелки принимает форму кисти с выпрямленным указательным пальцем, но это происходит когда ссылка имеет параметр "href", в данном случае параметр "href" и адрес мы задавать не будем. Для того чтобы иконки стали прозрачными, был добавлен параметр "opacity" равный 0,6. При наведении курсора на панель и на иконки, они становятся непрозрачными, за счет того что мы задаем для них вот этот стиль:

ul.toolbar li a:hover{
opacity: 1.0;
}

Следующим шагом будет определение для кнопок на верхней панели навигации классов:

a.label{
background:#fff url(icons/label.png) no-repeat center center;
}
a.fav{
background:#fff url(icons/favorite.png) no-repeat center center;
}
a.shop{
background:#fff url(icons/shopping_cart.png) no-repeat center center;
}
a.zoomin{
background:#fff url(icons/zoom_in.png) no-repeat center center;
}
a.zoomout{
background:#fff url(icons/zoom_out.png) no-repeat center center;
}
a.info{
background:#fff url(icons/info.png) no-repeat center center;
}
a.edit{
background:#fff url(icons/edit.png) no-repeat center center;
}

После того как мы задали стили для верхней панели навигации, займемся нижней панелью. Нижняя навигационная панель будет выглядеть в виде неупорядоченного списка в DIV-блоке, которому применим следующие стили:

.navigation{
width:500px;
height:52px;
position:absolute;
margin-top:-58px;
border-top:2px solid #ccc;
background-color:#fff;
}

Параметр "margin-top" имеет отрицательное значение, из-за того что навигация должна появиться раньше верхней части навигации. Из этого следует что навигация со стрелками в нижней части контейнера будет иметь стиль следующего вида:

a.previous{
float:left;
background:#fff url(icons/prev.png) no-repeat center center;
}
a.next{
float:right;
background:#fff url(icons/next.png) no-repeat center center;
}

Так как иконки стрелок в нижней панели имеют те же самые параметры, что иконки расположенные в верхней части, мы не будем добавлять одинаковые стили, а просто добавим класс к уже существующим стилям:

ul.toolbar li a, .navigation a {
float:left;
cursor:pointer;
width:70px;
height:52px;
opacity: 0.6;
}

И последний шаг, задаем стиль для "Название изображения"

span.price {
position:absolute;
top: 10px;
bottom: 10px;
right: 15px;
left: 100px;
color:#888;
font-size:14px;
margin:10px 0px 0px 0px;
font-family: Arial;
}

Создание стилей для всех элементов на этом этапе подошло к концу, теперь нужно добавить немного эффектов с помощью javascript.
Целью следующего шага является выполнение следующего:
- при наведении курсора на изображение, сразу же должны появится обе панели навигации
- при наведении курсора на одну из панелей, она должна становится непрозрачной
Для того чтобы достичь всех целий перечисленных выше, задействуем JQuery. Добавим несколько стилей для других классов, которые будут иметь прозрачность.

.transparent{
opacity: 0.6;
}

Дальше нужно задать классы нижней и верхней панели навигации и применить стили, которые будут делать элементы невидимыми:

<div class="image_container">
<ul class="transparent toolbar" style="display:none;">
<li><a class="zoomin"></a></li>
<li><a class="zoomout"></a></li>
<li><a class="shop"></a></li>
<li><a class="fav"></a></li>
<li><a class="edit"></a></li>
<li><a class="label"></a></li>
<li><a class="info"></a></li>
</ul>
<img src="example.jpg" alt="example" width="500" height="375"/>
<div class="transparent navigation" style="display:none;">
<a class="previous"></a>
<a class="next"></a>
<span class="price">Название изображения</span>
</div>
</div>

Для того чтобы действовать на элементы с помощью некоторых функций javascript, необходимо задать отдельные идентификаторы:

<div class="image_container" id="img_cont">
<ul class="transparent toolbar" id="tlbar" style="display:none;">
<li><a class="zoomin"></a></li>
<li><a class="zoomout"></a></li>
<li><a class="shop"></a></li>
<li><a class="fav"></a></li>
<li><a class="edit"></a></li>
<li><a class="label"></a></li>
<li><a class="info"></a></li>
</ul>
<img src="example.jpg" alt="example" width="500" height="375"/>
<div class="transparent navigation" id="nav" style="display:none;">
<a class="previous"></a>
<a class="next"></a>
<span class="price">Название изображения</span>
</div>
</div>

Для того чтобы подключить JQuery к HTML-странице необходимо разместить код приведенный ниже в начале документа:

<script type="text/javascript" src="jquery-1.3.2.js"></script>

Определяем функции до завершения тела тега:

<script>
$(function() {
$('#img_cont').hover(
function () {
$('#tlbar').slideDown(200);
$('#nav').slideDown(200);
},
function () {
$('#tlbar').slideUp(200);
$('#nav').slideUp(200);
}
);
$('#tlbar,#nav').hover(
function () {
$(this).removeClass('transparent');
},
function () {
$(this).addClass('transparent');
}
);
});
</script>

На этом создании панели навигации для данного изображения закончено, все исходные файлы можно скачать ниже.

Скачать файл
размер файла: 302,83 Kb
cкачиваний: 37

Раздел: Статьи для веб-мастера




Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.