2014
16
Янв

Навигация для сайта



Любой сайт должен иметь навигацию. Это упрощает поиск тем и материала. Навигация может быть просто в виде списка, в виде книги или как сейчас мы рассмотрим в виде полки. Автором этой навигации является веб-дизайнер Глеб Кавраский.

Эта интересная навигация может украсить ваш сайт.

Для ее создания необходимо сделать изображения.


Прежде всего, создадим таблицу и заключим ее в блок. Присвоим идентификаторы и классы блокам таблицы.



<div class="boxblock"> <div class="boxname"><span style="color: #e5fd80;">Навигационная полка</div> <table class="boxlevel" cellpadding="0" cellspacing="0" border="0"> <tr> <td><div id="iconblock"><div class="boxicon Tones"></div><div class="shadowico"></div><div class="app_name">Телефон</div></div></td> <td><div id="iconblock"><div class="boxicon Mail"></div><div class="shadowico"></div><div class="app_name">Почта</div></div></td> <td><div id="iconblock"><div class="boxicon Camera"></div><div class="shadowico"></div><div class="app_name">Камера</div></div></td> <td><div id="iconblock"><div class="boxicon Clock"></div><div class="shadowico"></div><div class="app_name">Часы</div></div></td> </tr> </table> </div> </div>

Теперь для нашей навигации зададим стили.

.boxblock { height:288px; /*высота блока*/ width:397px; /*ширина блока*/ margin: 0px auto; /*устраняем отступы*/ margin-top: 2%; /*величина отступа от верхнего края элемента*/ padding: 0px; /*задаем нулевые отступы внутри*/ } .boxname { width:397px; height: 26px; background:url(../Nav-polka/img1/box_head.png);/*ссылка на рисунок верхней части полки*/ text-align: center;/*расположение текста по центру*/ padding: 24px 0px 0px 0px;/*внутренние отступы*/ font: 17px/25px Arial;/*размер и стиль шрифта*/ font-weight: bold;/*насыщенность шрифта*/ color: #fff;/*цвет шрифта*/ text-shadow: 0px 1px 4px rgba( 0, 0, 0, 0.4);/*тень к тексту*/ } .boxlevel { width:397px; height:114px; padding: 28px 10px 0px 10px; background: url(../Nav-polka/img1/box_level.png);/*ссылка на рисунок средней части полки*/ } #iconblock { width:59px; height:85px; margin: 0px auto; cursor: pointer;/*вид курсора в виде руки*/ } #iconblock .boxicon { position: relative;/*позиционирование*/ width: 59px; height: 60px; display: block;/*Элемент показывается как блочный*/ transition: 300ms ease;/*эффект перехода между двумя состояниями элемента*/ border-radius: 13px;/*радиус скругления уголков рамки*/ box-shadow: 0px 0px 7px 0px rgba( 0, 0, 0, 0.5);/*тень к элементу*/ } #iconblock:hover .boxicon { top: -12px;/*отсчитывается от верхнего края исходного положения элемента*/ box-shadow: 0px 0px 8px 0px rgba( 255, 255, 255, 0.5); } #iconblock .shadowico { width: 59px; height: 13px; background: url(../Nav-polka/img1/shadow.png); transition: 300ms ease; opacity: 0.7;/*уровень прозрачности элемента*/ } #iconblock:hover .shadowico { opacity: 0.4; } #iconblock .app_name { text-align: center; right: 31px;/*расстояние от правого края родительского элемента*/ bottom: 30px;/*положение нижнего края содержимого элемента*/ width: 120px; position: relative; font: 14px "Arial"; font-weight: bold; color: #fff; text-shadow: 0px 1px 2px #000; opacity: 0.0; transition: 300ms ease; } #iconblock:hover .app_name { bottom: 20px; opacity: 1.0; } .Camera {background: url('../Nav-polka/img1/Camera.png');}/*адрес картинки*/ .Mail {background: url('../Nav-polka/img1/Mail.png');} .Music {background: url('../Nav-polka/img1/iTunes.png');} .SettingsAlt {background: url('../Nav-polka/img1/SettingsAlt.png');} .Photos {background: url('../Nav-polka/img1/Photos.png');} .Helloween {background: url('../Nav-polka/img1/Pumpkin.png');} .Weather {background: url('../Nav-polka/img1/Weather.png');} .Contacts {background: url('../Nav-polka/img1/Contacts.png');} .YouTube {background: url('../Nav-polka/img1/YouTube.png');} .Safari {background: url('../Nav-polka/img1/Safari.png');} .Tones {background: url('../Nav-polka/img1/RiPTones.png');} .Maps {background: url('../Nav-polka/img1/MapsALT.png');} .Clock {background: url('../Nav-polka/img1/ClockALT.png');}

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