html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

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

 

 


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

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

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

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

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

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

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

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

73
    +55 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • css
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции