Автор

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

  1. Использовать как часы
  2. Использовать в качестве таймера
  3. Использовать в качестве обратного отсчета
  4. Поддерживает широкий спектр использованием CSS
  5. Аннотация всех используемых объектов
  6. Полнофункциональный API для разработчиков и создания пользовательскогоциферблата

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

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


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close