Автор

16 04.2013
Анимированное 3D меню для сайта на CSS3

Анимированное 3D меню для сайта на CSS3


 

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

 

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

 

Основная идея состоит в том, что выпадающие подпункты меню организованы в список-таблицу, который создает эффект выпадающей вывески. При этом создается иллюзия объемности, и так, приступим.

Шаг 1. HTML

Для начала мы рассмотрим разметку, все достаточно просто, мы создадим список, с принадлежащими ему подпунктами.

<div id="container">
<ul id="menu">
 <li><a href="#">О мне</a>
 <ul>
 <li><a href="#">Контакты</a></li>
 <li><a href="#">Материалы</a></li>
 <li><a href="#">Презентации</a></li>
 </ul>
 </li>
 <li><a href="#">Портфолио</a>
 <ul>
 <li><a href="#">Интересные работы</a></li>
 <li><a href="#">Удачные работы фотографа</a></li>
 <li><a href="#">Заказы</a></li>
 <li><a href="#">Студия</a></li>
 <li><a href="#">Увидеть мои работы</a></li>
 <li><a href="#">Заказать фотосессию</a></li>
 </ul>
 </li>
 <li><a href="#">Клиентам</a>
 <ul>
 <li><a href="#">Заказать студию</a></li>
 <li><a href="#">Аренда аппаратуры</a></li>
 <li><a href="#">Система скидок</a></li>
 </ul>
 </li>
 <li><a href="#">Контакты</a>
 <ul>
 <li><a href="#">Где мы находимся</a></li>
 <li><a href="#">Наш офис</a></li>
 <li><a href="#">Как нас найти</a></li>
 </ul>
 </li>
 <li><a href="#">Поддержка</a></li>
</ul>
</div>

Новые пункты легко добавить, не будем останавливаться детально.

Шаг 2. CSS

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

#menu {
 position: relative;
 float: left;
 width: 100%;
 padding: 0 20px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
 background: #ccc;
 }

#menu, #menu ul {
 list-style: none;
 }

#menu > li {
 float: left;
 position: relative;
 border-right: 1px solid rgba(0,0,0,.1);
 box-shadow: 1px 0 0 rgba(255,255,255,.25);
 perspective: 1000px;

}

#menu > li:first-child {
 border-left: 1px solid rgba(255,255,255,.25);
 box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
 }

#menu a {
 display: block;
 position: relative;
 z-index: 10;
 padding: 13px 20px 13px 20px;
 text-decoration: none;
 color: rgba(75,75,75,1);
 line-height: 1;
 font-weight: 600;
 font-size: 12px;
 letter-spacing: -.05em;
 background: transparent;
 text-shadow: 0 1px 1px rgba(255,255,255,.9);
 transition: all .25s ease-in-out;

}

#menu > li:hover > a {
 background: #333;
 color: rgba(0,223,252,1);
 text-shadow: none;
 }

#menu li ul {
 position: absolute;
 left: 0;
 z-index: 1;
 width: 200px;
 padding: 0;
 opacity: 0;
 visibility: hidden;
 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
 background: transparent;
 overflow: hidden;
 transform-origin: 50% 0%;
 }

#menu li:hover ul {

padding: 15px 0;
 background: #333;
 opacity: 1;
 visibility: visible;
 box-shadow: 1px 1px 7px rgba(0,0,0,.5);
 animation-name: swingdown;
 animation-duration: 1s;
 animation-timing-function: ease;

}

@keyframes swingdown {
 0% {
 opacity: .99999;
 transform: rotateX(90deg);
 }

30% {
 transform: rotateX(-20deg) rotateY(5deg);
 animation-timing-function: ease-in-out;
 }

65% {
 transform: rotateX(20deg) rotateY(-3deg);
 animation-timing-function: ease-in-out;
 }

100% {
 transform: rotateX(0);
 animation-timing-function: ease-in-out;
 }
 }

#menu li li a {
 padding-left: 15px;
 font-weight: 400;
 color: #ddd;
 text-shadow: none;
 border-top: dotted 1px transparent;
 border-bottom: dotted 1px transparent;
 transition: all .15s linear;
 }

#menu li li a:hover {
 color: rgba(0,223,252,1);
 border-top: dotted 1px rgba(255,255,255,.15);
 border-bottom: dotted 1px rgba(255,255,255,.15);
 background: rgba(0,223,252,.02);
 }

 

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

Я использовал данное меню на сайте усадьбы «Сказка»!

Усадьба «Сказка»

Вот и все. Готово!


vk.com/club.ssdru

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


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

26 04.2013
Анимированное 3D меню для сайта на CSS3

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


10 06.2017
Анимированное 3D меню для сайта на CSS3

Простой шаблон для демонстрации возможностей вашего приложения с помощью плавной 3d-анимации, основанной на CSS и jQuery.


23 04.2013
Анимированное 3D меню для сайта на CSS3

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


06 06.2014
Анимированное 3D меню для сайта на CSS3

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close