Все для веб-дизайнера
Создаем анимированное меню с помощью CSS3
Красивый дизайн всегда положительно сказывается на его репутации. Ведь не секрет, если дизайн плох, то и находиться на таком ресурсе не вызывает интереса. Недавно в одном из премиум шаблонов заметил интересное меню, которое отлично вписывается в темный дизайн сайта. Эта навигация весьма привлекательная, и меня она заинтересовала. Одним из преимуществ такого меню является то, что оно написано полностью на css. Идея меню состоит в том, что ползунок, который находиться над верхней частью меню, плавно скользит к активным пунктам навигации.
Я уже говорил, что меню отлично смотрится в структуре темного шаблона, в этом можете сами убедиться, просмотрев online-демонстрацию шаблона в работе.
Чтобы создать подобное меню, нам необходимо создать достаточно простую разметку, которая будет использовать неупорядоченный список:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
</pre> <div class="container"> <ul> <ul> <li><a href="http://www.rudebox.org.ua/">Главная</a></li> <li><a class="hsubs" href="#">Уроки..</a> <ul class="subs"> <li><a href="#">Уроки jQuery</a></li> <li><a href="#">Уроки CSS</a></li> <li><a href="#">Уроки Photoshop</a></li> <li><a href="#">Уроки JavaScript</a></li> <li><a href="#">Еще..</a></li> </ul> </li> <li><a class="hsubs" href="#">Денвер</a></li> <li><a class="hsubs" href="#">О нас..</a> <ul class="subs"> <li><a href="#">Контакты</a></li> <li><a href="#">Помощь сайту</a></li> <li><a href="#">Карта сайта</a></li> </ul> </li> <li><a href="#">Релизы</a></li> <li><a href="#">Помощь</a></li> <li><a href="#">Еще..</a></li> </ul> </ul> <div id="lavalamp"></div> </div> <pre> |
Теперь рассмотрим стилизацию с помощью CSS3.
При задании стилей используются преимущества CSS3 для создания визуального эффекта перемещения маркера при наведении курсора мыши на пункт меню.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
#nav,#nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { background: url('menu_bg.png') no-repeat scroll 0 0 transparent; clear: both; font-size: 12px; height: 58px; padding: 0 0 0 9px; position: relative; width: 957px; } #nav ul { background-color: #222; border:1px solid #222; border-radius: 0 5px 5px 5px; border-width: 0 1px 1px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); left: -9999px; overflow: hidden; position: absolute; top: -9999px; z-index: 2; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transition: -moz-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; transition: transform 0.1s linear; } #nav li { background: url('menu_line.png') no-repeat scroll right 5px transparent; float: left; position: relative; } #nav li a { color: #FFFFFF; display: block; float: left; font-weight: normal; height: 30px; padding: 23px 20px 0; position: relative; text-decoration: none; text-shadow: 1px 1px 1px #000000; } #nav li:hover > a { color: #00B4FF; } #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active { background: none repeat scroll 0 0 #121212; outline: 0 none; } #nav li:hover ul.subs { left: 0; top: 53px; width: 180px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } #nav ul li { background: none; width: 100%; } #nav ul li a { float: none; } #nav ul li:hover > a { background-color: #121212; color: #00B4FF; } #lavalamp { background: url('lavalamp.png') no-repeat scroll 0 0 transparent; height: 16px; left: 19px; position: absolute; top: 0px; width: 64px; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -webkit-transition: all 300ms ease; transition: all 300ms ease; } #lavalamp:hover { -moz-transition-duration: 3000s; -ms-transition-duration: 3000s; -o-transition-duration: 3000s; -webkit-transition-duration: 3000s; transition-duration: 3000s; } #nav li:nth-child(1):hover ~ #lavalamp { left: 19px; } #nav li:nth-child(2):hover ~ #lavalamp { left: 103px; } #nav li:nth-child(3):hover ~ #lavalamp { left: 185px; } #nav li:nth-child(4):hover ~ #lavalamp { left: 267px; } #nav li:nth-child(5):hover ~ #lavalamp { left: 348px; } #nav li:nth-child(6):hover ~ #lavalamp { left: 429px; } #nav li:nth-child(7):hover ~ #lavalamp { left: 510px; } #nav li:nth-child(8):hover ~ #lavalamp { left: 616px; } |
Если Вам понравилась тема WordPress с онлайн просмотра, то можете ее скачать бесплатно:
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 08.04.2012 в 18:23, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
