GB: Блог о дизайне, верстке и веб-разработке Голосов: 1 Адрес блога: http://gering111.com Добавлен: 2011-05-08 20:19:03

Анимированное вертикальное меню

2012-10-31 16:08:27 (читать в оригинале)

Не так давно я показывал пример создания анимированного горизонтального меню. Сегодня продолжим и поговорим про вертикальное меню. Оно используется гораздо реже, нежели горизонтальное, но все же бывает. Попробуем сделать крутое вертикальное меню с круглыми кнопками. Сначала - картинка для привлечения внимания, чтобы вам было интересно ;) Мы будем создавать меню, по стилю схожее с символом Инь-Янь, в черно-белых тонах. Ну и сразу ссылка на демо-страницу. Начнем традиционно - со структуры HTML: [html] <nav class="menu"> <ul> <li> <a href="#"> <h3 class="headline">главная</h3> <h4 class="description">это ясно...</h4> </a> </li> <li> <a href="#"> <h3 class="headline">Работы</h3> <h4 class="description">посмотреть...</h4> </a> </li> <li> <a href="#"> <h3 class="headline">блог</h3> <h4 class="description">почитать...</h4> </a> </li> </ul> </nav> [/html] Как видите ничего сложного, все традиционно - список, в котором содержатся нужные нам элементы: cсылка, заголовок пункта меню и описание. Перейдем к стилям, там самое интересное: [css] .menu{ width:200px; margin:60px 0 0 30px; /* двигаем меню, 60 сверху и 30 слева */ float:left; /* обтекание слева */ } .menu ul{ list-style:none; margin:0; padding:0; } .menu ul li{ width:140px; /* ширина элементов */ height:140px; /* высота элементов */ margin-bottom:-40px; border-radius:100%; /* круглим, лучше в % */ overflow:hidden; position:relative; -webkit-box-shadow:0 1px 2px #999; -moz-box-shadow:0 1px 2px #999; box-shadow:0 1px 2px #999; text-align:center; /* текст по центру */} [/css] Я комментирую свой код, чтобы потом было легче разбираться, это, кстати, очень хорошая практика ;) Собственно, этим кодом мы задаем общие стили для элементов списка. Сначала задаем ширину и высоту, потом превращаем квадраты в круги, используя border-radius. Перейдем к формированию "каскада" из элементов: [css] .menu ul li:nth-child(even){ float:left; -webkit-box-shadow:0 1px 2px #666; -moz-box-shadow:0 1px 2px #666; box-shadow:0 1px 2px #666; background:#000; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2B2B2B), to(#000)); background:-webkit-linear-gradient(top, #2B2B2B, #000); background:-moz-linear-gradient(top, #2B2B2B, #000); background:-ms-linear-gradient(top, #2B2B2B, #000); background:-o-linear-gradient(top, #2B2B2B, #000); } .menu ul li:nth-child(odd){ float:right; /* следующий - справа */ background:#FFF; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#EEE)); background:-webkit-linear-gradient(top, #FFF, #EEE); background:-moz-linear-gradient(top, #FFF, #EEE); background:-ms-linear-gradient(top, #FFF, #EEE); background:-o-linear-gradient(top, #FFF, #EEE); } [/css] Используя псевдокласс ntn-child, мы можем применять стили к элементам, на основе их нумерации в дереве элементов. Допустим, наше вертикальное меню - список из 5 элементов. Используя ntn-child(even), мы назначаем стиль каждому четному элементу, nth-child(odd) - соответственно, нечетному. Код выше как раз это демонстрирует. Псевдокласс имеет достаточно гибкие и мощные "настройки", если будет интересно - дайте знать, расскажу подробнее об этом. Закончили с элементами списка, перейдем к заголовку и описанию: [css] .menu .headline{ padding-top:45px; /* отступ сверху */ font-family: 'Ubuntu', sans-serif;/*Шрифт заголовка*/ font-size:1em; /* размер для заголовков */ color:#333; /* цвет заголовков */ text-transform:uppercase; /* Все в верхний регистр */ text-shadow:0 0 1px #CCC; } .menu ul li:nth-child(even) .headline{ color:#FFF; } .menu .description{ font-family: 'Ubuntu', sans-serif;/*Шрифт описания*/ font-size:16px; /* размер для подзаголовков */ color:#999; /* цвет */ text-shadow:1px 1px 1px #CCC; } .menu ul li:nth-child(even) .description{ color:#CCC; text-shadow:none; } .menu ul li:hover .headline{ font-size:20px; /* размер при наведении*/ color:#888; /* Цвет при наведении */ text-shadow:none; } .menu ul li:active .headline{ color:#FFF; /* Цвет при клике */ } [/css] Оформили заголовок и описание, настроили их поведение при наведении. Теперь для плавности нужно добавить немного магии :) [css] .menu ul li a{ display:block; width:100%; height:100%; text-decoration:none; } .menu .headline, .menu .description{ margin:0; padding:0; font-weight:normal; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -ms-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } [/css] Анимация очень простая, при наведении шрифт заголовка увеличивается, меняя цвет. Вот и все... У нас получилось вертикальное меню, по стилю схожее с символом Инь-Янь, к чему я и стремился. Если у кого не получилось, или он "профилонил" - ссылка на исходники ниже. Демо | Исходники На сегодня все, удачного вам дня ;)