Автор

06 06.2013
Навигационное меню с помощью CSS3

Навигационное меню с помощью CSS3


 

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

 

ДЕМО
ИСХОДНИКИ

 

В демонстрации мы рассмотрели три примера различного отображения навигации, теперь рассмотрим процесс создания более подробно.

Шаг 1. HTML

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

 <div class="navbar">
 <ul>
 <li><a href="#">О нас<div class="hover">О нас</div></a></li>
 <li><a href="#">Продукция<div class="hover">Продукция</div></a></li>
 <li><a href="#">Новости<div class="hover">Новости</div></a></li>
 <li><a href="#">Контакты<div class="hover">Контакты</div></a></li>
 </ul>
 </div>

По сути большая и маленькая навигация в разметке отличается только классами, а вот для получения навигации с иконками нам необходимо заменить первичное описание значением с иконками.

 

Шаг 2. CSS

 

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

.navbar {
 width: 500px;
 height: 50px;
 background: #3a3a3a;
 /* Старые браузеры */

background: -moz-linear-gradient(top, #3a3a3a 0%, #3a3a3a 50%, #2b2b2b 51%, #2b2b2b 100%);
 /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3a3a3a), color-stop(50%, #3a3a3a), color-stop(51%, #2b2b2b), color-stop(100%, #2b2b2b));
 /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #3a3a3a 0%, #3a3a3a 50%, #2b2b2b 51%, #2b2b2b 100%);
 /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #3a3a3a 0%, #3a3a3a 50%, #2b2b2b 51%, #2b2b2b 100%);
 /* Opera 11.10+ */

background: -ms-linear-gradient(top, #3a3a3a 0%, #3a3a3a 50%, #2b2b2b 51%, #2b2b2b 100%);
 /* IE10+ */

background: linear-gradient(to bottom, #3a3a3a 0%, #3a3a3a 50%, #2b2b2b 51%, #2b2b2b 100%);
 /* W3C */

filter: progid:dximagetransform.microsoft.gradient(startColorstr='#3a3a3a', endColorstr='#2b2b2b', GradientType=0);
 /* IE6-9 */

margin: 20px auto 40px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
 -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
 border-top: 1px solid #363636;
 border-left: 1px solid #363636;
 border-bottom: 1px solid #000000;
 border-right: 1px solid #000000;
}
.navbar ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}
.navbar ul li {
 display: inline;
 float: left;
 width: 125px;
 height: 50px;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 color: #999999;
 line-height: 50px;
 border-right: 1px solid #363636;
 border-left: 1px solid #000000;
 overflow: hidden;
 margin: 0;
 padding: 0;
}
.navbar ul li a {
 width: 125px;
 height: 100px;
 display: inline-block;
}
.navbar ul li:first-child {
 border-left: none;
 -webkit-border-radius: 4px 0 0 4px;
 -moz-border-radius: 4px 0 0 4px;
 border-radius: 4px 0 0 4px;
}
.navbar ul li:last-child {
 border-right: none;
 -webkit-border-radius: 0 4px 4px 0;
 -moz-border-radius: 0 4px 4px 0;
 border-radius: 0 4px 4px 0;
}
.navbar .hover {
 background: #7DCBE0;
 color: #333333;
 display: block;
}
.navbar.small {
 height: 33.333333333333336px;
}
.navbar.small ul li {
 height: 33.333333333333336px;
 line-height: 33.333333333333336px;
}
.navbar.toolbar {
 width: 180px;
 height: 33.333333333333336px;
}
.navbar.toolbar ul li {
 height: 33.333333333333336px;
 line-height: 33.333333333333336px;
}
a {
 color: #999999;
 text-decoration: none;
}
a:hover {
 color: #999999;
}

Шаг 3. JS

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

$(document).ready(function() {
 $('.navbar li a').hover(
 function(e) {
 $(this).stop().animate({ marginTop: -50}, 100);
 },
 function(e) {
 $(this).stop().animate({ marginTop: 0}, 100);
 }
 );
});

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

21 04.2013
Навигационное меню с помощью CSS3

Сайт это целостная система различных элементов. Каждые детали подогнаны один под одного и работают в сложенном порядке. Но иногда следует подчеркнуть желаемые элементы на сайте. Будь то реклама, популярные статьи или просто полезная информация к которой необходимо привлечь взор посетителя. Для этого существуют множество визуальных приемов. Но мы рассмотрим весьма не навязчивый подход к поставленному вопроса. В данном уроке мы заставим элементы следовать за прокруткой страницы.


18 05.2013
Навигационное меню с помощью CSS3

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


08 04.2013
Навигационное меню с помощью CSS3

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


26 04.2013
Навигационное меню с помощью CSS3

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close