Цель:
Создать интересное многоуровневое меню с симпатичным дизайном.
Надоели скучные ссылочки слева на панельке? Не получается вставить скрипт с крутыми выпадающими кнопочками с зарубежного сайта? Тогда мы идём к вам =D
Итак, идея в том, что наводя на нужный пункт меню «вываливаются» подпункты этого самого меню. Выглядит довольно симпатично, и что важно, юзабилити не подпорчено. Меню достаточно большое, занимает пол экрана, мимо не промахнешься
На самом деле на примере показано меню на сайте некоей строительной компании, которая занимается «всем и вся». В каждом конкретном случае пункты меню, естественно, можно подобрать свои.
Реализовывать можно по-разному, приведем пример своей реализации. Начнем с того, что разместим 4 блока с фоновой картинкой и названием пункта меню, каждый в своей цветовой гамме. Здесь все в ваших руках, решение будет зависеть от вашего желания творить и разнообразить. Далее сразу же подготовим «выпадающие» картинки. Желательно, чтобы изображение аккуратно «пропадало» сверху вниз, т.е. становилось прозрачным (делается легко с помощью градиента и маски в шопе). Однако, если не хотите проблем с IE6, можно обойтись без прозрачности.
После проделанных операций с картинками перейдем к верстке. Как мы уже сказали, 4 блока, внутри каждого еще по блоку, причем с относительным позиционированием.
1 <div id="menu"> 2 <div id="m1"> 3 <div class="mover1"></div> 4 </div> 5 <div class="divider"></div> 6 <div id="m2"> 7 <div class="mover2"></div> 8 </div> 9 <div class="divider"></div> 10 <div id="m3"> 11 <div class="mover3"></div> 12 </div> 13 <div class="divider"></div> 14 <div id="m4"> 15 <div class="mover4"></div> 16 </div> 17 </div>
Упростим себе жизнь, воспользуемся jquery. При наведении на каждый из четырех блоков, у нас сверху вниз будет появляться приготовленная картинка, поверх которой и будут наши пункты меню. Воспользуемся функцией animate() из API Jquery, чтобы все смотрелось аккуратно. Скрипт будет выглядеть примерно так:
1 $(document).ready(function() { 2 $('#m1').mouseenter(function() { 3 $('.mover1').animate({ 4 'top': "0px", 5 }, 800); 6 }).mouseleave(function() { 7 $('.mover1').animate({ 8 'top': "-160px", 9 }, 400); 10 }); 11 12 ... 13 14 });
Для блоков m1, m2, m3, m4 при наведении курсора будет меняться значение top внутренних блоков, поскольку они позиционированы относительно. Таким образом, внутренние «дивы» будут выезжать из потолка=). Осталось немножко поколдовать со стилями и добавить нужные пункты меню. Здесь есть простор для ваших фантазий. У нас получилось такое весьма интересное решение поставленной задачи:
Демо-версия «выпадающего» меню. | Скачать проект целиком.
s3rg — 10.09.2010
14:21
интересно. спасиб=)
Queedly — 31.10.2010
21:33
Прикольная статья! Буду рад читать ещё ваши новости. Пишите ещё!