Поиск

 
Новости, Статьи
Форум
Файлы

Привет, Гость

Войти
Идентификация
Я забыл свой пароль
Регистрация

Для создания сайтов небольших фирм существует только одна бесплатная специализированная CMS на русском языке - ReloadCMS, которую активно развивает автор этого сайта.

РазделыСтатьиРазработка сайтов → Простой аккордеон на jQuery №3

Этот аккордеон является логическим продолжением моей разработки "идеального меню-аккордеона" на jQuery.
Напомню решаемую им задачу.
Имеется иерархическое меню — категории с подкатегориями, в каждой категории и подкатегории имеется название со ссылкой.
В аналогичном решении я уже указывал, что в идеале ссылки подкатегории должны открываться при наведении на надкатегорию, а не при клике на ней. Потому что сама родительская категория тоже может иметь ссылку, и эта ссылка при клике не отработает (ведь на неё навесим действие открытия подкатегории, а переход по ссылке придется отменить).

Пишем код:
Код:

<style type="text/css">

ulli{list-style-type:none;line-height:1.5em}
a.first_category {
    
color#fff; /* Цвет текста ссылки */
    
text-decorationnone/* Убираем подчеркивание ссылки */
    
text-shadow1px 1px 2px #333; /* добавляем тень для текста */
    
background#4698BF; /* Цвет фона кнопки по умолчанию */
    
background: -webkit-gradient(linearleft topleft bottomfrom(#55ACD4), to(#4698BF)); /* Градиент кнопки */
    
background: -moz-linear-gradient(top,  #55ACD4,  #4698BF); /* Градиент кнопки */
    
backgroundgradient(lineartop,  #55ACD4,  #4698BF); /* Градиент кнопки */
    
border1px solid #46768B; /* Обводка кнопки */
    
border-radius4px/* Радиус закругленых углов кнопки */
    
padding3px 9px/* Внутреннии отступы кнопки */
    
font-size1.15em;
}

a.first_category:hover {
    
color#fff; /* Цвет текста ссылки */
    
text-decorationnone/* Убираем подчеркивание ссылки */
    
background#A68328; /* Цвет фона кнопки по умолчанию */
    
background: -webkit-gradient(linearleft topleft bottomfrom(#BFAB75), to(#A68328)); /* Градиент кнопки */
    
background: -moz-linear-gradient(top,  #BFAB75,  #A68328); /* Градиент кнопки */
    
backgroundgradient(lineartop,  #BFAB75,  #A68328); /* Градиент кнопки */
    
border1px solid #A68328; /* Обводка кнопки */
    
border-radius4px/* Радиус закругленых углов кнопки */
}
</
style>

<
ul
<
li class="first_child" >
<
class="first_category" href="#">Матрицы ноутбуков</a>  
<
ul> <li> <a  href="#">Матрицы 7"-9"</a>  </li> </ul>
<
ul> <li> <a  href="#" title="">Матрицы 10"-14"</a>  </li> </ul>
<
ul> <li> <a  href="#" title="">Матрицы 15"-17"</a>  </li> </ul> </li>
</
ul>
<
ul> <li class="first_child" >
<
class="first_category" href="#">Клавиатуры ноутбуков</a>  
<
ul> <li> <a  href="#">Клавиатуры для Asus</a>  </li> </ul>
<
ul> <li> <a  href="#">Клавиатуры для Acer</a>  </li> </ul>
<
ul> <li> <a  href="#">Клавиатуры для Samsung</a>  </li> </ul>
</
li>
</
ul>
<
ul> <li class="first_child" >
<
class="first_category" href="#">Блок питания ноутбука</a>  
<
ul> <li> <a  href="#">Блок питания Asus</a>  </li> </ul>
<
ul> <li> <a  href="#">Блоки питания Acer</a>  </li> </ul>
<
ul> <li> <a  href="#">Блок питания HP</a>  </li> </ul>
</
li>
</
ul>
<
script type='text/javascript'>
$(
document).ready(function(){
$(
'.first_child').children('ul').hide();
$(
'.first_child').hover(function(){
$(
this).children('ul:not(:animated)').slideDown('slow');
    },
function(){
$(
'.first_child').children('ul').slideUp('slow');
    });
});
</
script>
Как работает.
— При наведении открываем подкатегорию текущего слайда;
— При потере фокуса закрываем все подкатегории.

Пример (наведите мышку):

Принцип работы прост.
1. При наведении на ul/li открываем всех его потомков;
2. При потере фокуса сворачиваем всех потомков ul.

Лучше всего смотрится этот код, когда в каждой категории почти одинаковое количество подкатегорий, и когда их много.
Справедливости ради надо заметить, что если подкатегорий мало, то лучше не применять вообще никаких сворачивающих список скриптов.
ok
14.01.2013 03:14 Автор/источник: Den1xxx

Комментировать

Вы не залогинены! Регистрация

Устал читать? Напиши! Или позвони +375 29 5344286. На связи по будним дням с 800 до 1700.