Ссылки

Поиск

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

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

Обновления на форуме

Блок новостей в виде блога 2 >>
Игры для сайта 34 >>
Сервис создания тестов 94 >>
Дед 1 >>
На сайте регистрация пользователей спамом 3 >>

Для успешной публикации статей с помощью современных систем управления сайтом знания html, как правило, не требуется.

RSS фиды

RSS Файлы
RSS Новости
RSS Форум

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

Этот аккордеон является логическим продолжением моей разработки "идеального меню-аккордеона" на jQuery.

Напомню решаемую им задачу.

Имеется иерархическое меню — категории с подкатегориями, в каждой категории и подкатегории имеется название со ссылкой.

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



Пишем код:
Код: 
<style type="text/css">

ul, li{list-style-type:none;line-height:1.5em}

a.first_category {

    color: #fff; /* Цвет текста ссылки */

    text-decoration: none; /* Убираем подчеркивание ссылки */

    text-shadow: 1px 1px 2px #333; /* добавляем тень для текста */

    background: #4698BF; /* Цвет фона кнопки по умолчанию */

    background: -webkit-gradient(linear, left top, left bottom, from(#55ACD4), to(#4698BF)); /* Градиент кнопки */

    background: -moz-linear-gradient(top,  #55ACD4,  #4698BF); /* Градиент кнопки */

    background: gradient(linear, top,  #55ACD4,  #4698BF); /* Градиент кнопки */

    border: 1px solid #46768B; /* Обводка кнопки */

    border-radius: 4px; /* Радиус закругленых углов кнопки */

    padding: 3px 9px; /* Внутреннии отступы кнопки */

    font-size: 1.15em;

}



a.first_category:hover {

    color: #fff; /* Цвет текста ссылки */

    text-decoration: none; /* Убираем подчеркивание ссылки */

    background: #A68328; /* Цвет фона кнопки по умолчанию */

    background: -webkit-gradient(linear, left top, left bottom, from(#BFAB75), to(#A68328)); /* Градиент кнопки */

    background: -moz-linear-gradient(top,  #BFAB75,  #A68328); /* Градиент кнопки */

    background: gradient(linear, top,  #BFAB75,  #A68328); /* Градиент кнопки */

    border: 1px solid #A68328; /* Обводка кнопки */

    border-radius: 4px; /* Радиус закругленых углов кнопки */

}

</style>



<ul> 

<li class="first_child" >

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

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

<a 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
Дата 2013-01-14 04:14:23

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

Вы не залогинены!

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