Все для веб-дизайнера
Темное меню для сайта с помощью CSS3
Навигация для на сайте это всегда важна часть разработки, ведь она помогает сориентировать посетителя, указав ему необходимую информацию на ресурсе. Красивое меню, которое своей анимацией притягивает взор, можно встретить на многих сайта. Но не каждый разработчик, особенно начинающий, может создать подобное меню которое будет отличным дополнением. В данном уроке мы рассмотрим как создать темное анимированное меню только с использованием css. Идея заключает в том, что подпункты подлетают к активной секции..
Для начала начнем с разметки HTML, которая будет построена с помощью неупорядоченного списка:
|
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 |
</pre> <ul id="nav"> <li><a href="http://www.rudebox.org.ua" target="_blank">Главная</a></li> <li><a class="hsubs" href="#">Уроки</a> <ul class="subs"> <li><a href="#">HTML и DHTML</a></li> <li><a href="#">Mootools</a></li> <li><a href="#">Wordpress</a></li> <li><a href="#">PHP</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a class="hsubs" href="#">Скачать</a> <ul class="subs"> <li><a href="#">Flash шаблоны</a></li> <li><a href="#">Wordpress шаблоны</a></li> <li><a href="#">Веб-дизайн</a></li> <li><a href="#">Видеоуроки</a></li> <li><a href="#">Скрипты</a></li> <li><a href="#">Шрифты</a></li> <li><a href="#">Плагины</a></li> <li><a href="#">Модули</a></li> </ul> </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> <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="#">F.A.Q.</a></li> </ul> <pre> |
Как можно заметить ничего сложного в списке нет, тут легко можно добавить новые пункты и подпункты.
Далее мы рассмотрим сами стили 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 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 |
#nav,#nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif; font-size: 13px; height: 36px; list-style: none outside none; margin: 40px auto; text-shadow: 0 -1px 3px #202020; width: 980px; /* Скругленные углы */ -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; /* Тени */ -moz-box-shadow: 0px 3px 3px #cecece; -webkit-box-shadow: 0px 3px 3px #cecece; box-shadow: 0 3px 4px #8b8b8b; /* Градиент */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color:#5f5f5f; } #nav ul { left: -9999px; position: absolute; top: -9999px; z-index: 2; } #nav li { border-bottom: 1px solid #575757; border-left: 1px solid #929292; border-right: 1px solid #5d5d5d; border-top: 1px solid #797979; display: block; float: left; height: 34px; position: relative; width: 105px; } #nav li:first-child { border-left: 0 none; margin-left: 5px; } #nav li a { color: #FFFFFF; display: block; line-height: 34px; outline: medium none; text-align: center; text-decoration: none; /* Градиент */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color:#5f5f5f; } /* Кадры для анимации #animation1 */ @-webkit-keyframes animation1 { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } } #nav li > a:hover { /* Анимации css3 */ -moz-animation-name: animation1; -moz-animation-duration: 0.7s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.7s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } #nav li:hover > a { z-index: 4; } #nav li:hover ul.subs { left: 0; top: 34px; width: 150px; } #nav ul li { background: none repeat scroll 0 0 #838383; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); opacity: 0; width: 100%; /*-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;*/ } /* Кадры для анимации #animation2 */ @-webkit-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } } @-moz-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } } #nav li:hover ul li { /* Анимация css3 */ -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; /*-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;*/ } /* Задержки анимации */ #nav li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; } #nav li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; } #nav li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; } #nav li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; } #nav li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; } #nav li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; } #nav li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; } #nav li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; } |
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 03.05.2012 в 00:49, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
