Среда, 09 Мая 2012 06:45

Выпадающий список при клике на стрелочку

Written by 
Оцени эту запись
(11 Голоса)

Например, есть менюшка или просто список ссылок, блок с текстовой информацией, описание чего-то и т.д. Изначально это информация скрыта и появляется при клике на кнопочку, ссылочку, стрелочку. В данной статье на конкретном примере расскажу какими образами можно реализовать появление скрытого блока. Будем рассматривать fadeIn, animate и slideDown.

 

 

 

 

 

Будем рассматривать меню профиля. Оно скрыто. Справа располагается стрелочка, при клике на которую, наше меню появится.

 

Выглядит это так:

 

 

А после клика так:

 

 

HTML:

 

<div class="profile_user_menu_cont">

<div class="profile_user_menu_header">

<a href="#">Мой профиль</a>

<i class="profile_user_menu_arrow"></i>

</div>

<div class="profile_user_menu_body" style="display: none; ">

<ul>

<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>

</div>

</div>

 

CSS:

 

 

.profile_user_menu_cont {float:right; margin-right: 6px; margin-top: 15px; position: relative;}

.profile_user_menu_header {background: #1d1115; border: 1px solid #170e11; padding: 5px 30px 5px 7px; width: 78px; font-size: 11px; line-height: 10px;}

.profile_user_menu_header a {color: #e296a3;}

.profile_user_menu_body {width: 117px; background: #1d1115; font-size: 11px; padding-bottom: 4px; display: none; position: absolute; left; 0px; top: 22px;}

.profile_user_menu_body ul li {display: block;}

.profile_user_menu_body ul li a {color: #e296a3; display: block; width: 76px; height: 100%; padding: 6px 30px 5px 7px; line-height: 10px;}

.profile_user_menu_body ul li a:hover {background: #140c0f; color: #ffc9d2}

.profile_user_menu_arrow {display: block; background: url(../images/profile_user_menu_arrow.jpg) 0px 0px no-repeat; width: 21px; height: 20px; position: absolute; top: 1px; right: 1px;}

.profile_user_menu_header:hover .profile_user_menu_arrow {background-position: 0px -20px;}

.profile_user_menu_header.active .profile_user_menu_arrow {background-position: 0px -40px;}

 

Результат:

 

 

 

 

 

А теперь сделаем три копии, зададим им разные id и применим для ним разные способы появления менюшки.

 

Здесь смотрим демо

 

 

 

 

 

Использование fadeIn()

 

 

В первом случае менюшка появляется с помощью fadeIn. При клике на стрелочку блок появляется, когда мышка с этого блока уходит, блок исчезает.

 

Скрипт для первого случая выглядит так:

 

 

jQuery(document).ready(function(){
 
jQuery('#user_menu_cont1 .profile_user_menu_body').css('z-index', '999');
jQuery('#user_menu_cont1 .profile_user_menu_arrow').click(function(){
jQuery('#user_menu_cont1 .profile_user_menu_body').fadeIn(1000);
jQuery('#user_menu_cont1 .profile_user_menu_header').addClass('active');
});
jQuery('#user_menu_cont1 .profile_user_menu_body').mouseleave(function(){
jQuery('#user_menu_cont1 .profile_user_menu_body').fadeOut(500);
jQuery('#user_menu_cont1 .profile_user_menu_header').removeClass('active');
});
 
});
 
 
 

Рассмотрим его подробнее. При клике на стрелочку (класс profile_user_menu_arrow) показываем блок с менюшкой (класс profile_user_menu_body)

 

jQuery('#user_menu_cont1 .profile_user_menu_body').fadeIn(1000);

 

а также добавляем родительскому для стрелочки блоку (класс profile_user_menu_header) класс active, для которого в стилях прописано изменение вида стрелочки

 

jQuery('#user_menu_cont1 .profile_user_menu_header').addClass('active');

 

Когда курсор покидает блок с менюшкой 

 

jQuery('#user_menu_cont1 .profile_user_menu_body').mouseleave(function(){});

 

мы его обратно скрываем и убираем класс активности с хедера этого элемента

 

 

jQuery('#user_menu_cont1 .profile_user_menu_body').mouseleave(function(){
jQuery('#user_menu_cont1 .profile_user_menu_body').fadeOut(500);
jQuery('#user_menu_cont1 .profile_user_menu_header').removeClass('active');
});
 
 

Использование animate()

 

Во втором случае логика динамики аналогична, меняется только метод. Здесь при клике на стрелку появляется фон блока менюшки (меняется opacity: 0 на opacity:1) и слева выезжает сам список менюшки.

 

Смотрим скрипт:

 

 

jQuery(document).ready(function(){
jQuery('#user_menu_cont2 .profile_user_menu_body').css('display', 'block');
jQuery('#user_menu_cont2 .profile_user_menu_body').css('opacity', '0');
jQuery('#user_menu_cont2 .profile_user_menu_body').css('z-index', '999');
jQuery('#user_menu_cont2 .profile_user_menu_body').css('overflow', 'hidden');
jQuery('#user_menu_cont2 .profile_user_menu_body ul').css('margin-left', '-999px');
jQuery('#user_menu_cont2 .profile_user_menu_arrow').click(function(){
jQuery('#user_menu_cont2 .profile_user_menu_body').animate({'opacity': '1'}, 100, function(){
jQuery('#user_menu_cont2 .profile_user_menu_body ul').animate({'margin-left': '0px'}, 500);
});
 
jQuery('#user_menu_cont2 .profile_user_menu_header').addClass('active');
});
jQuery('#user_menu_cont2 .profile_user_menu_body').mouseleave(function(){
jQuery('#user_menu_cont2 .profile_user_menu_body ul').animate({'margin-left': '-999px'}, 500, function(){
jQuery('#user_menu_cont2 .profile_user_menu_body').animate({'opacity': '0'}, 100);
});
 
jQuery('#user_menu_cont2 .profile_user_menu_header').removeClass('active');
});
 
 
 
});
 
 
Изначально (до какого-либо события) задаем нужные стили для этого случая, изменяя которые будем объект анимировать:
 
jQuery('#user_menu_cont2 .profile_user_menu_body').css('display', 'block');
jQuery('#user_menu_cont2 .profile_user_menu_body').css('opacity', '0');
jQuery('#user_menu_cont2 .profile_user_menu_body').css('z-index', '999');
jQuery('#user_menu_cont2 .profile_user_menu_body').css('overflow', 'hidden');
jQuery('#user_menu_cont2 .profile_user_menu_body ul').css('margin-left', '-999px');
 
 
В этих стилях мы задаем прозрачность 0 блока, который содержат наше меню и смещаем списк пунктов меню влево на -999px. Добавив блоку свойство overflow: hidden мы сделали пункты меню не видными.
 
 
Дальше, при клике на стрелочку, анимируем прозрачность блока с менюшкой. Когда блок появился (сменилось свойство прозрачности с opacity: 0 на opacity: 1) начинаем анимировать смещение менюшки в область видимости блока (изменение с vargin-left: -999px на margin-left: 0px). И добавляем родителю стрелочки класс active.
 
jQuery('#user_menu_cont2 .profile_user_menu_arrow').click(function(){
jQuery('#user_menu_cont2 .profile_user_menu_body').animate({'opacity': '1'}, 100, function(){
jQuery('#user_menu_cont2 .profile_user_menu_body ul').animate({'margin-left': '0px'}, 500);
});
 
jQuery('#user_menu_cont2 .profile_user_menu_header').addClass('active');
});
 
 

Использование slideDown()

 

Как по мне, самый простой и самый красивый вариант для такого случая. Логика такая же. Только блог появляется не при помощи прозрачности, а, как бы, разворачивается.

 

Скрипт при этом очень простой:

 

jQuery(document).ready(function(){
 
jQuery('#user_menu_cont3 .profile_user_menu_arrow').click(function(){
jQuery('#user_menu_cont3 .profile_user_menu_body').slideDown();
jQuery('#user_menu_cont3 .profile_user_menu_header').addClass('active');
});
jQuery('#user_menu_cont3 .profile_user_menu_body').mouseleave(function(){
jQuery('#user_menu_cont3 .profile_user_menu_body').slideUp();
jQuery('#user_menu_cont3 .profile_user_menu_header').removeClass('active');
});
}); 

 

При клике на стрелочку блок развернулся slideDown(), при уходе курсора с блока - он свернулся slideUp().

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов