CSS3 3D верхнее меню с сдвигом

21 января 2013 - Администратор

 Результат, который получится в конце этого урока:

 

CSS3 3D верхнее меню с сдвигом 

 

По ссылкам ниже вы можете посмотреть демо этого меню, и можете скачать исходники этого меню:

 

 

 


Шаг 1. HTML

Первый шаг заключается в определении разметки HTML.

index.html

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>CSS3 3D top shift menu | Script Tutorials</title>
  6. <link href="css/layout.css" rel="stylesheet" type="text/css" />
  7. <link href="css/menu.css" rel="stylesheet" type="text/css" />
  8. </head>
  9. <body class="menu_body">
  10.  
  11. <!-- The main menu element -->
  12. <div class="menu">
  13. <ul>
  14. <li><a href="#"><img src="images/1.png" /></a></li>
  15. <li><a href="#"><img src="images/2.png" /></a></li>
  16. <li><a href="#"><img src="images/3.png" /></a></li>
  17. <li><a href="#"><img src="images/4.png" /></a></li>
  18. <li><a href="#"><img src="images/5.png" /></a></li>
  19. <li><a href="#"><img src="images/6.png" /></a></li>
  20. <li><a href="#"><img src="images/7.png" /></a></li>
  21. </ul>
  22. </div>
  23. <div class="page_content">
  24. <div class="shade"></div>
  25.  
  26. <div class="box">
  27. <div class="header">Box header</div>
  28. <div class="body">
  29. Any dummy text
  30. </div>
  31. <div class="footer">Box footer</div>
  32. </div>
  33.  
  34. <div class="box">
  35. <div class="header">Box header</div>
  36. <div class="body">
  37. Any dummy text
  38. </div>
  39. <div class="footer">Box footer</div>
  40. </div>
  41.  
  42. </div>
  43. </body>
  44. </html>

 

В тексте документа у нас есть menu и page_content элемент. Идея заключается в том, чтобы разделить страницу на два смысловых раздела. Главное меню состоит из UL-LI неупорядоченный список элементов. Каждый элемент имеет собственное изображение.

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

 




Шаг 2. CSS

Автор хочет заметить, что текущее меню должны хорошо работать в большинстве современных веб-браузеров (кроме IE). Лучшие результаты в Firefox и Chrome.

Теперь - давайте начнем писать стиль меню навигации! Во-первых, мы пишем правила для тела элементом документа:

 



CSS / menu.css


  1. .menu_body {
  2. /* CSS3 perspective */
  3. -webkit-perspective: 1500px;
  4. -moz-perspective: 1500px;
  5. -ms-perspective: 1500px;
  6. -o-perspective: 1500px;
  7. perspective: 1500px;
  8. }

 




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

 


 

  1. .menu, .page_content {
  2. /* CSS3 box-sizing, transition and transform */
  3. -webkit-box-sizing: border-box;
  4. -moz-box-sizing: border-box;
  5. -ms-box-sizing: border-box;
  6. -o-box-sizing: border-box;
  7. box-sizing: border-box;
  8.  
  9. -webkit-transition: -webkit-transform 0.5s ease;
  10. -moz-transition: -moz-transform 0.5s ease;
  11. -ms-transition: -ms-transform 0.5s ease;
  12. -o-transition: -o-transform 0.5s ease;
  13. transition: transform 0.5s ease;
  14. }
  15.  
  16. /* Основной элемент меню (который появляется сверху) */
  17. .menu {
  18. background-color: #002edb;
  19. display: block;
  20. position: fixed;
  21. width: 100%;
  22. height: 148px;
  23. z-index: 1;
  24.  
  25. /* CSS3 transform (CSS3 преобразования) */
  26. -webkit-transform: rotateX(-45deg) translateY(-95%);
  27. -moz-transform: rotateX(-45deg) translateY(-95%);
  28. -ms-transform: rotateX(-45deg) translateY(-95%);
  29. -o-transform: rotateX(-45deg) translateY(-95%);
  30. transform: rotateX(-45deg) translateY(-95%);
  31. }
  32.  
  33. /* Изменение цвета фона и вращение главного элемента меню при наведении */
  34. .menu:hover {
  35. background-color: #4169ff;
  36.  
  37. /* CSS3 transform (CSS3 преобразования) */
  38. -webkit-transform: rotateX(0deg);
  39. -moz-transform: rotateX(0deg);
  40. -ms-transform: rotateX(0deg);
  41. -o-transform: rotateX(0deg);
  42. transform: rotateX(0deg);
  43. }
  44.  
  45. /* Остальное содержимое страницы */
  46. .page_content {
  47. padding: 20px 0 0;
  48. }



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

 



  1. /* В главном меню - UL-LI свойства */
  2. .menu ul {
  3. display: block;
  4. margin: 0 auto;
  5. overflow: hidden;
  6. position: relative;
  7. width: 1036px;
  8. }
  9. .menu ul li {
  10. float: left;
  11. list-style: none outside none;
  12. margin: 10px;
  13.  
  14. /* CSS3 transition (CSS3 переходы...) */
  15. -webkit-transition: all 0.5s ease;
  16. -moz-transition: all 0.5s ease;
  17. -ms-transition: all 0.5s ease;
  18. -o-transition: all 0.5s ease;
  19. transition: all 0.5s ease;
  20. }
  21. .menu ul li:hover {
  22. background-color: #7e00d6;
  23.  
  24. /* CSS3 border-radius (CSS3 границы радиуса) */
  25. -webkit-border-radius: 64px;
  26. -moz-border-radius: 64px;
  27. -ms-border-radius: 64px;
  28. -o-border-radius: 64px;
  29. border-radius: 64px;
  30. }

 

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

 



  1. /* Страница тени элемента (невидимые по-умолчанию) */
  2. .page_content .shade {
  3. display: block;
  4. height: 100%;
  5. left: 0;
  6. opacity: 0;
  7. position: absolute;
  8. top: 0;
  9. visibility: hidden;
  10. width: 100%;
  11. z-index: 1000;
  12.  
  13. /* CSS3 linear-gradient (CSS3 линейный градиент) */
  14. background: -moz-linear-gradient(top, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
  15. 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)));
  16. background: -webkit-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
  17. background: -ms-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
  18. background: -o-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
  19. background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
  20.  
  21. /* CSS3 transition (CSS3 переходы от одного стиля к другому) */
  22. -webkit-transition: all 0.5s ease;
  23. -moz-transition: all 0.5s ease;
  24. -ms-transition: all 0.5s ease;
  25. -o-transition: all 0.5s ease;
  26. transition: all 0.5s ease;
  27. }

 



 

И, наконец, мы должны показывать тень(shade), и повернуть тело страницы (page_content), когда мы наводим на меню: 

  1. /* Когда мы наводим на меню - очередь за page_content, то есть сворачивается как бы в низ */
  2. .menu:hover ~ .page_content {
  3. /* CSS3 преобразования (transform) */
  4. -webkit-transform: rotateX(-45deg) translateY(80px);
  5. -moz-transform: rotateX(-45deg) translateY(80px);
  6. -ms-transform: rotateX(-45deg) translateY(80px);
  7. -o-transform: rotateX(-45deg) translateY(80px);
  8. transform: rotateX(-45deg) translateY(80px);
  9. }
  10.  
  11. /* Когда мы наводим на меню - отображать тени */
  12. .menu:hover ~ .page_content .shade {
  13. opacity: 1;
  14. visibility: visible;
  15. }



Анимированная 3D меню CSS3 завершена!

 

 

Источник: www.script-tutorials.com/css3-3d-top-shift-menu/
 

 

 

 

 

 


Понравилась статья? Расскажи друзьям!


Рейтинг: 0 Голосов: 0 490 просмотров

Хотите узнавать что нового на сайте?
ПОДПИШИТЕСЬ – и будите в курсе последних новинок!
Список наших рассылок.

Комментарии (0)

Нет комментариев. Ваш будет первым!

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

 

Хотите научится создавать сайты?

Тогда подпишитесь на мини-видеокурс:

 

  •    
  •    

 

 

 

 

Создание социальной сети от А до Я