Анимационное многоуровневое меню на CSS3
В недавнем посту я показывал как можно сделать многоуровневое меню на одном только CSS без применения скриптов. Получилось не плохо и в целом функционально, но не хватало некоторой красивости. Сейчас я покажу как с помощью современного CSS3 можно придать этому меню более красивый градиентный вид и придать эффект анимации, все это без скриптов и картинок, только одни стили.
Следует сделать оговорку, что не во всех браузерах эти эффекты будут работать. Последние версии Chrome, Opera и FireFox работают как надо, а IE9 уже не хочет справляться с градиентом и анимацией, но это не смертельно. Пользователи со старыми браузерами скорее всего и не заметят того, что этому меню чего-то не хватает, главное, что оно разворачивается и реагирует на клики.
Ключевой момент в анимации играет свойство transition, оно принимает ряд значений, которые показывают какие изменяемые свойства стилей должны изменятся с применением анимации и характер этой анимации (длительность изменения и характер изменения (линейный, с затуханием и тп). Другими словами, к примеру, если у элемента было высота 10px, а потом с помощью псевдокласса :hover мы переопределили ему высоту в 100px, то высота изменится не мгновенно, а с указанной анимацией, то есть возникнет эффект разворачивания. Если правило hover перестанет действовать (юзер уберет курсор с элемента) то произойдет обратное действие, элемент свернется до 10px.
Разметка использовалась в точности такая же как в прошлом посте создания меню на 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 |
<ul class="menu"> <li><a href="/">Главная</a></li> <li><a href="#">Новости</a> <ul> <li><a href="#">Наука</a></li> <li><a href="#">Культура</a></li> <li><a href="#">Образование</a></li> </ul> </li> <li><a href="#">Статьи</a> <ul> <li><a href="#">Дизайн</a></li> <li><a href="#">Программирование</a></li> <li class="dir"><a href="">Оптимизация</a> <ul> <li><a href="#">В Google</a></li> <li><a href="#">В Yandex</a></li> </ul> </li> <li><a href="#">Маркетинг</a></li> </ul> </li> <li><a href="/about">О сайте</a></li> </ul> |
CSS:
|
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 |
.menu, .menu li ul{ margin:0px; padding:0px; list-style:none; } .menu{ background-color: #242424; margin: 20px; float:left; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: #7d7e7d; background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); -webkit-box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75); box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75); } .menu > li{ float:left; text-align: center; padding: 12px 30px; margin-left: 1px; cursor: pointer; border-radius:inherit; } .menu > li ul{ visibility: hidden; opacity:0; position:absolute; text-align: left; z-index:100; background-color:#393939; width:200px; margin-top:25px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .menu > li > ul{ margin-left:-13px; font-size:80%; } .menu > li > ul > li.dir{ background:url('arrow.png') 96% center no-repeat; } .menu > li:hover > ul{ visibility:visible; opacity:1; margin-top:10px;} .menu > li:hover > a{ color:white; } .menu > li:hover, .menu > li > ul li:hover{ background: #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 40%, #1e69de 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(40%,#54a3ee), color-stop(100%,#1e69de)); background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 40%,#1e69de 100%); background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 40%,#1e69de 100%); background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 40%,#1e69de 100%); background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 40%,#1e69de 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } .menu > li li{ padding:8px 0 8px 10px; border-radius:inherit; } .menu > li > ul > li:hover > ul{ visibility:visible; opacity:1; margin-left:190px;} .menu > li > ul > li > ul{ margin-left:210px; margin-top:-17px; width:220px; } .menu > li a{ text-decoration: none; color: #D1D1D1; display:block; } |
декабря 12, 2012 Среда at 7:36 пп
Подписка
Pingback: Многоуровневое горизонтальное меню на чистом CSS | Red Spirit