Навигационное меню с помощью 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



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

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

Во время поиска в Интернете для вдохновения мы столкнулись с красиво оформленным веб-сайтом Honda HR-V. Когда вы переходите от раздела к другому, переход украшается анимированной фигурой, созданной с помощью элемента <canvas>.


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

Продолжаем рассматривать интересные фишки, которые можно достичь с помощью CSS. В Данном уроке мы рассмотрим весьма интересный, на мой взгляд, эффект движущихся объектов, а именно шестереночного механизма с помощью правил CSS3. Эффект достаточно красиво смотрится, плавно работает, и представляет собой картину полноценного механизма из задействованных деталек различной величины. Эффект весьма специфичный и не каждому веб-мастеру станет полезным, но при правильном применении станет весомым атрибутом дизайна..


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

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

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


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

Анимация с поддержкой CSS, которая заменяет обновление страницы при обновлении контента с помощью jQuery.


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

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


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