Создание выезжающего меню с использованием CSS3

10 ноября 2014 | Опубликовано в css | 2 Комментариев »

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

Демонстрация работы

В сети можно встретить различные решения, но мы не смогли найти отвечающее нашим требованиям:

Должен использоваться чистый и понятный HTML5 без лишних тегов.
Не должен использоваться JavaScript.
Не должны требоваться дополнительные изображения.
Должно работать на мобильных и планшетных устройствах.
Не должны теряться основные черты в старых браузерах, таких как Internet Explorer версия 7 и выше, или когда не поддерживаются определенные свойства CSS3.
Должно отлично выглядеть!

Откройте любимый редактор и давайте приступим к программированию.

HTML

Тут нет сюрпризов — у нас есть документ HTML5, обходной путь для браузера Internet Explorer, ссылка на таблицу стилей, элемент nav для меню и элемент article для нашего основного текста:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Revealing CSS3 Menu</title>
<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" media="all" href="styles.css" />
</head>
<body>

    <!-- menu -->
    <nav>
        <ul>
            <li><a href="http://www.sitepoint.com/">SitePoint.com</a></li>
            <li><a href="http://www.sitepoint.com/css3-sliding-menu/">Revealing CSS3 Menu</a></li>
        </ul>
    </nav>

    <!-- main article -->
    <article>

        <h1>Revealing CSS3 Menu</h1>

        <p>body text</p>

    </article>
</body>
</html>

Стили основного текста

Основной текст не совсем обычный, так как мы хотим применить трехмерный эффект, когда выезжает меню. Мы задали основному тексту фиксированное расположение, чтобы оно соответствовало размерам тега body:

article
{
    position: fixed;
    width: 70%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 30px 15%;
    background-color: #fff;
    overflow: auto;
    z-index: 0;
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
}

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

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

article:after
{
    position: absolute;
    content: ' ';
    left: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    pointer-events: none;
}

Элемент — блок нулевой ширины на правом краю экрана, меняющий размер, когда выезжает меню. Обратите внимание на удобное свойство pointer-events, узнать о нем больше можно здесь.

Стили меню

Основной блок меню расположен слева на экране. У содержимого ширина 16em, так что мы сдвигаем его влево на -16em. Еще будет показана правая рамка шириной 50px. Мы также можем применить псевдокласс, чтобы создать треугольник на CSS:

nav
{
    position: fixed;
    left: -16em;
    top: 0;
    bottom: 0;
    background-color: #654;
    border-right: 50px solid #765;
    box-shadow: 4px 0 5px rgba(0,0,0,0.2);
    z-index: 1;
    cursor: pointer;
}
nav:after
{
    position: absolute;
    content: ' ';
    width: 0;
    height: 0;
    right: -70px;
    top: 50%;
    border-width: 15px 10px;
    border-style: solid;
    border-color: transparent transparent transparent #765;
}

В стилях меню нет ничего необычного. Внешнему тегу ul задана ширина 14em, и внутренний отступ 1em, что вместе составит 16em:

nav ul
{
    width: 14em;
    list-style-type: none;
    margin: 0;
    padding: 1em;
}

Стили анимации

Тут становится интересно. Сначала, давайте применим переходы к тегам article, nav и элементам меню:

article, article:after, nav, nav *
{
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}

Передвинуть меню на место просто — мы передвигаем его с -16em в 0, когда пользователь наводит указатель мыши на элемент:

nav:hover
{
    left: 0;
}

Эффект страницы применяется ко всем родственным элементам основного текста, следующим за элементом nav, на который пользователь навел указатель мыши. Значение translateX сдвигает его на 16em вправо, чтобы освободить место для меню. Значения perspective и rotateY создают трехмерную трансформацию:

nav:hover ~ article
{
    -webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
    -moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
    -ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
    -o-transform: translateX(16em) perspective(600px) rotateY(10deg);
    transform: translateX(16em) perspective(600px) rotateY(10deg);
}

Наконец, левый край градиента тени, примененного к псевдоклассу основного текста, сдвигается со 100% на 60%. Другими словами, он разрастается на 40% ширины страницы:

nav:hover ~ article:after
{
    left: 60%;
}

Вот и все. Даже с приставками производителей результат превосходит все ожидания.

Демонстрация работы

Вся таблица стилей

/* Revealing 3D Menu CSS */
body
{
	font-family: sans-serif;
	font-size: 100%;
	padding: 0;
	margin: 0;
	color: #333;
	background-color: #221;
}

/* main page */
article
{
	position: fixed;
	width: 70%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 30px 15%;
	background-color: #fff;
	overflow: auto;
	z-index: 0;
	-webkit-transform-origin: 0 50%;
	-moz-transform-origin: 0 50%;
	-ms-transform-origin: 0 50%;
	-o-transform-origin: 0 50%;
	transform-origin: 0 50%;
}

article:after
{
	position: absolute;
	content: ' ';
	left: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
	background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
	background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
	background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
	background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
	pointer-events: none;
}

/* navigation */
nav
{
	position: fixed;
	left: -16em;
	top: 0;
	bottom: 0;
	background-color: #654;
	border-right: 50px solid #765;
	box-shadow: 4px 0 5px rgba(0,0,0,0.2);
	z-index: 1;
	cursor: pointer;
}

nav:after
{
	position: absolute;
	content: ' ';
	width: 0;
	height: 0;
	right: -70px;
	top: 50%;
	border-width: 15px 10px;
	border-style: solid;
	border-color: transparent transparent transparent #765;
}

nav ul
{
	width: 14em;
	list-style-type: none;
	margin: 0;
	padding: 1em;
}

nav a:link, nav a:visited
{
	display: block;
	width: 100%;
	font-weight: bold;
	line-height: 2.5em;
	text-indent: 10px;
	text-decoration: none;
	color: #ffc;
	border-radius: 4px;
	outline: 0 none;
}

nav a:hover, nav a:focus
{
	color: #fff;
	background-color: #543;
	text-shadow: 0 0 4px #fff;
	box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
}

/* hovering */
article, article:after, nav, nav *
{
	-webkit-transition: all 600ms ease;
	-moz-transition: all 600ms ease;
	-ms-transition: all 600ms ease;
	-o-transition: all 600ms ease;
	transition: all 600ms ease;
}

nav:hover
{
	left: 0;
}

nav:hover ~ article
{
	-webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
	-moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
	-ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
	-o-transform: translateX(16em) perspective(600px) rotateY(10deg);
	transform: translateX(16em) perspective(600px) rotateY(10deg);
}

nav:hover ~ article:after
{
	left: 60%;
}

/* typography */
footer
{
	margin-top: 2em;
	border-top: 1px dotted #999;
}

h1
{
	font-size: 1.5em;
	font-weight: normal;
	margin: 0 0 0.2em 0;
	border-bottom: 1px solid #555;
}
p
{
	line-height: 1.3em;
	margin: 0 0 1.5m 0;
}

Страница работает в большинстве браузеров.

В браузере Firefox как старых, так и новых версий она работает идеально.
В последних версиях браузеров Chrome, Opera и даже Internet Explorer тоже все работает.
В старых версиях браузеров Chrome и Safari тень страницы появлялась сразу, а не расширялась постепенно, так как в тех версиях движка Webkit не поддерживалось анимирование псевдоклассов.
Также в некоторых версиях браузера Safari и старых версиях браузера Opera, до перехода на движок Webkit, не поддерживаются трехмерные трансформации, так что меню просто выезжает поверх страницы.
Старые версии браузера Internet Explorer тоже не поддерживают трансформации, так что меню накрывает страницу. Довольно мало эффектов работает в браузерах Internet Explorer версий 7 и 8, но меню можно использовать.
В мобильных браузерах, таких как Android, Dolphin и Firefox Mobile, страница работает хорошо, хотя быстродействие может быть проблемой на медленных устройствах.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:

Опубликовано в css, ноября 10, 2014
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Создание выезжающего меню с использованием CSS3

HTML

Стили основного текста

Стили меню

Стили анимации

Вся таблица стилей

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые