3D меню для сайта со смещением на CSS3 и HTML

Stats: 3300 0
Author: RUDEBOX
Category: Css, Цікаво
Comments: Комментариев нет
Tags: HTML5

Заказать рекламу: info@it-media.kiev.ua Звоните: +380934169249

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

&lt;div ng-controller="HomeCtrl"&gt;
&lt;div ng-click="menu_open = !menu_open" ng-init="menu_open = false" class="toggle_menu"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/div&gt;
&lt;div ng-class="{'has_menu_open': menu_open == true}" ng-init="menu_index = 1" class="main"&gt;
&lt;div ng-class="{'visible': menu_index == 1}" class="bg bg1"&gt;&lt;/div&gt;
&lt;div ng-class="{'visible': menu_index == 2}" class="bg bg2"&gt;&lt;/div&gt;
&lt;div ng-class="{'visible': menu_index == 3}" class="bg bg3"&gt;&lt;/div&gt;
&lt;div ng-class="{'visible': menu_index == 4}" class="bg bg4"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div ng-class="{'is_open': menu_open == true}" class="menu"&gt;
&lt;ul&gt;
&lt;li ng-click="menu_index = 1; menu_open = false;" ng-class="{'active': menu_index == 1}"&gt;Главная&lt;/li&gt;
&lt;li ng-click="menu_index = 2; menu_open = false;" ng-class="{'active': menu_index == 2}"&gt;О нас&lt;/li&gt;
&lt;li ng-click="menu_index = 3; menu_open = false;" ng-class="{'active': menu_index == 3}"&gt;Проекты&lt;/li&gt;
&lt;li ng-click="menu_index = 4; menu_open = false;" ng-class="{'active': menu_index == 4}"&gt;Контакты&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;

</div>

<ul>

<li ng-click="menu_index = 1; menu_open = false;" ng-class="{'active': menu_index == 1}">Главная</li>

<li ng-click="menu_index = 3; menu_open = false;" ng-class="{'active': menu_index == 3}">Проекты</li>

<li ng-click="menu_index = 4; menu_open = false;" ng-class="{'active': menu_index == 4}">Контакты</li>

</ul>

</div>

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

Как создать меню для сайта

Шаг 2. CSS

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

body {
background: #111115;
font-family: "Open Sans", sans-serif;
-webkit-perspective: 600px;
-moz-perspective: 600px;
perspective: 600px; }

body {

background: #111115;

font-family: "Open Sans", sans-serif;

-webkit-perspective: 600px;

-moz-perspective: 600px;

perspective: 600px; }

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

.toggle_menu {
background: rgba(255, 255, 255, 0.2);
z-index: 99999;
position: absolute;
top: 50px;
right: 50px;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer; }

.toggle_menu {

background: rgba(255, 255, 255, 0.2);

z-index: 99999;

position: absolute;

top: 50px;

right: 50px;

width: 50px;

height: 50px;

border-radius: 50%;

cursor: pointer; }

Следующим шагом станет активация и анимация кнопки при нажатии, мы добавляем несколько классов для активного отображения кнопки после нажатия:

.toggle_menu:active {
background: rgba(255, 255, 255, 0.3);
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out; }
.toggle_menu i {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 22px; }

.toggle_menu:active {

background: rgba(255, 255, 255, 0.3);

-webkit-transition: all .25s ease-in-out;

-moz-transition: all .25s ease-in-out;

transition: all .25s ease-in-out; }

.toggle_menu i {

width: 50px;

height: 50px;

line-height: 50px;

text-align: center;

color: #fff;

font-size: 22px; }

У нас будет четыре изображения, которые будут изменяться при нажатии на соответствующий класс меню, нам необходимо добавить эти изображения, а также трансформации, чтобы у нас создавался эффект объемности слайдов:

.main {
position: relative;
z-index: 1;
width: 100vw;
height: 100vh;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out; }
.main.has_menu_open {
-webkit-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);
-moz-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);
-ms-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);
-o-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);
transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9); }
.main .bg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out; }
.main .bg.visible {
opacity: 1; }
.main .bg.bg1 {
background-image: url(/HD-Wallpapers1.jpeg); }
.main .bg.bg2 {
background-image: url(/space_desktop_wallpaper1.jpg); }
.main .bg.bg3 {
background-image: url(/summer-wallpaper-9.jpg); }
.main .bg.bg4 {
background-image: url(/hd-widescreen-wallpaper-10.jpg); }

.main {

position: relative;

z-index: 1;

width: 100vw;

height: 100vh;

-webkit-transition: all .5s ease-in-out;

-moz-transition: all .5s ease-in-out;

transition: all .5s ease-in-out; }

.main.has_menu_open {

-webkit-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);

-moz-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);

-ms-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);

-o-transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9);

transform: rotateX(-4deg) translate3D(0px, 0px, -100px) scale(.9); }

.main .bg {

position: absolute;

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

z-index: 2;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

width: 100vw;

height: 100vh;

opacity: 0;

-webkit-transition: opacity .5s ease-in-out;

-moz-transition: opacity .5s ease-in-out;

transition: opacity .5s ease-in-out; }

.main .bg.visible {

opacity: 1; }

.main .bg.bg1 {

.main .bg.bg2 {

.main .bg.bg3 {

.main .bg.bg4 {

Следующим шагом станет оформление нижней плашки с навигацией, у нас оно будет тоже в виде наклоненного блока, для добавления общей объемности на странице, также мы добавляем параметры для активного и пассивного состояния навигации:

.menu {
position: fixed;
z-index: 99;
background: #292931;
bottom: 0px;
left: 10%;
right: 10%;
width: 80%;
height: 110px;
-webkit-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
-moz-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
-ms-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
-o-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);
-webkit-transition: all .75s ease-in-out;
-moz-transition: all .75s ease-in-out;
transition: all .75s ease-in-out; }
.menu.is_open {
-webkit-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);
-moz-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);
-ms-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);
-o-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);
transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1); }
.menu ul {
position: relative;
margin: 0px;
padding: 20px;
height: 70px;
width: 100%;
box-sizing: border-box;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex; }
.menu ul li {
margin: 10px;
list-style: none;
height: 50px;
line-height: 50px;
text-align: center;
color: #eee;
font-size: 20px;
font-weight: 300;
background: rgba(238, 238, 238, 0.075);
cursor: pointer;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
-webkit-font-smoothing: antialiased;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1; }
.menu ul li.active {
color: palegoldenrod; }
.menu ul li:hover {
background: rgba(238, 238, 238, 0.15);
-webkit-transform: translate3D(0px, 0px, 0px) scale(1.05);
-moz-transform: translate3D(0px, 0px, 0px) scale(1.05);
-ms-transform: translate3D(0px, 0px, 0px) scale(1.05);
-o-transform: translate3D(0px, 0px, 0px) scale(1.05);
transform: translate3D(0px, 0px, 0px) scale(1.05); }

.menu {

position: fixed;

z-index: 99;

background: #292931;

bottom: 0px;

left: 10%;

right: 10%;

width: 80%;

height: 110px;

-webkit-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);

-moz-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);

-ms-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);

-o-transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);

transform: translate3D(0px, 150px, 0px) rotateX(45deg) scale(0.9);

-webkit-transition: all .75s ease-in-out;

-moz-transition: all .75s ease-in-out;

transition: all .75s ease-in-out; }

.menu.is_open {

-webkit-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);

-moz-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);

-ms-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);

-o-transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1);

transform: translate3D(0px, 0px, 0px) rotateX(2deg) scale(1); }

.menu ul {

position: relative;

margin: 0px;

padding: 20px;

height: 70px;

width: 100%;

box-sizing: border-box;

display: -webkit-box;

display: -moz-box;

display: box;

display: -webkit-flex;

display: -moz-flex;

display: -ms-flexbox;

display: flex; }

.menu ul li {

margin: 10px;

list-style: none;

height: 50px;

line-height: 50px;

text-align: center;

color: #eee;

font-size: 20px;

font-weight: 300;

background: rgba(238, 238, 238, 0.075);

cursor: pointer;

-webkit-transition: all .25s ease-in-out;

-moz-transition: all .25s ease-in-out;

transition: all .25s ease-in-out;

-webkit-font-smoothing: antialiased;

-webkit-box-flex: 1;

-moz-box-flex: 1;

box-flex: 1;

-webkit-flex: 1;

-moz-flex: 1;

-ms-flex: 1;

flex: 1; }

.menu ul li.active {

color: palegoldenrod; }

.menu ul li:hover {

background: rgba(238, 238, 238, 0.15);

-webkit-transform: translate3D(0px, 0px, 0px) scale(1.05);

-moz-transform: translate3D(0px, 0px, 0px) scale(1.05);

-ms-transform: translate3D(0px, 0px, 0px) scale(1.05);

-o-transform: translate3D(0px, 0px, 0px) scale(1.05);

transform: translate3D(0px, 0px, 0px) scale(1.05); }

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