Выдвыгающееся сверху меню с 3D эффектом

В данном уроке мы создадим анимированное  3D  навигационное меню (с иконками) с использованием только CSS3 (без JavaScript). Задействуем мощные эффекты CSS3, такие как перспектива, трансформации, градиенты и переходы. Чтобы увидеть меню в действии нужно поместить курсор мыши на голубой элемент вверху страницы.

Разметка HTML

Сначала определим структуру HTML.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>3D меню, сдвигающееся сверху | Матреиалы сайта RUSELLER.COM</title>
        <link href="/css/layout.css" rel="stylesheet" type="text/css" />
        <link href="/css/menu.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="menu_body">

        <!-- Элемент основного меню -->
        <div class="menu">
            <ul>
                <li><a href="#"><img src="/images/1.png" /></a></li>
                <li><a href="#"><img src="/images/2.png" /></a></li>
                <li><a href="#"><img src="/images/3.png" /></a></li>
                <li><a href="#"><img src="/images/4.png" /></a></li>
                <li><a href="#"><img src="/images/5.png" /></a></li>
                <li><a href="#"><img src="/images/6.png" /></a></li>
                <li><a href="#"><img src="/images/7.png" /></a></li>
            </ul>
        </div>
        <div class="page_content">
            <div class="shade"></div>

            <div class="box">
                <div class="header">Заголовок</div>
                <div class="body">
			...
		</div>
                <div class="footer">Нижний колонтитул</div>
            </div>

            <div class="box">
                <div class="header">Заголовок</div>
                <div class="body">
			...
		</div>
                <div class="footer">Нижний колонтитул</div>
            </div>

        </div>
    </body>
</html>

В теле документа у нас имеются два элемента: menu и page_content. Основная идея заключается в разделении страницы на две секции. Главное меню состоит из элементов неупорядоченного списка. Каждый элемент имеет свое изображение.

Страница также содержит теневой элемент (который не видим по умолчанию) и остальной код (в демонстрации используются два прямоугольника с заголовком, текстом и нижним колонтитулом).

 

CSS

Меню работает почти во всех современных браузерах (кроме  IE). Лучший результат получается в Firefox и Chrome.

Сначала определим правила для элемента body:

.menu_body {
    /* Перспектива */
    -webkit-perspective: 1500px;
    -moz-perspective: 1500px;
    -ms-perspective: 1500px;
    -o-perspective: 1500px;
    perspective: 1500px;
}

Он добавил перспективу на нашу страницу. Теперь нужно написать базовые правила для меню и содержания:

.menu, .page_content {
    /* Схема вывода, трансформация и переход */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transition: -webkit-transform 0.5s ease;
    -moz-transition: -moz-transform 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease;
    -o-transition: -o-transform 0.5s ease;
    transition: transform 0.5s ease;
}

/* Элемент основного меню (которое появляется сверху) */
.menu {
    background-color: #002edb;
    display: block;
    position: fixed;
    width: 100%;
    height: 148px;
    z-index: 1;

    /* Трансформация */
    -webkit-transform: rotateX(-45deg) translateY(-95%);
    -moz-transform: rotateX(-45deg) translateY(-95%);
    -ms-transform: rotateX(-45deg) translateY(-95%);
    -o-transform: rotateX(-45deg) translateY(-95%);
    transform: rotateX(-45deg) translateY(-95%);
}

/* Изменяем цвет фона и вращаем элемент основного меню при наведении курсора мыши */
.menu:hover {
    background-color: #4169ff;

    /* CSS3 transform */
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

/* Остальное содержание страницы */
.page_content {
    padding: 20px 0 0;
}


Обратите внимание, что мы используем свойства rotateX и translateY для скрытия/ вывода основного меню. Теперь добавим правила для неупорядоченнного списка с изображениями:

/* Основное меню - свойства UL-LI */
.menu ul {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 1036px;
}
.menu ul li {
    float: left;
    list-style: none outside none;
    margin: 10px;

    /* Переход */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.menu ul li:hover {
    background-color: #7e00d6;

    /* Скругление углов */
    -webkit-border-radius: 64px;
    -moz-border-radius: 64px;
    -ms-border-radius: 64px;
    -o-border-radius: 64px;
    border-radius: 64px;
}

 Используем переход для наших изображений - будет меняться цвет и радиус. Когда курсор мыши находится в меню, страница будет становиться немного темнее  (будем использовать затеняющий элемент с градиентом):

/* Затеняющий элемент страницы (невидим по умолчанию) */
.page_content .shade {
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 1000;

    /* Линейный градиент */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
    background: -webkit-gradient(linear, top top, bottom top, color-stop(0%,rgba(0,0,0,0.15)), color-stop(100%,rgba(0,0,0,0.65)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);

    /* Трансформация */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

В завершение нужно вывести затеняющий элемент и повернуть page_content при наведении курсора мыши на меню:

/* Когда курсор мыши находится над меню, поворачиваем page_content вниз */
.menu:hover ~ .page_content {
    /* CSS3 transform */
    -webkit-transform: rotateX(-45deg) translateY(80px);
    -moz-transform: rotateX(-45deg) translateY(80px);
    -ms-transform: rotateX(-45deg) translateY(80px);
    -o-transform: rotateX(-45deg) translateY(80px);
    transform: rotateX(-45deg) translateY(80px);
}

/* Когда курсор мыши находится над меню, выводим тень */
.menu:hover ~ .page_content .shade {
    opacity: 1;
    visibility: visible;
}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/SI1vASEX2IE/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Выдвыгающееся сверху меню с 3D эффектом | | 2012-08-19 20:13:50 | | Статьи Web-мастеру | | В данном уроке мы создадим анимированное  3D  навигационное меню (с иконками) с использованием только CSS3 (без JavaScript). Задействуем мощные эффекты CSS3, такие как перспектива, трансформации, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: