Ссылки

Поиск

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

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

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

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

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

Последние статьи

Сайт для фирмы-изготовителя натяжных потолков 0
Антиспам «Я не робот» 0
За что воюет Украина и когда всё это кончится 12
Удаление родителя текущего элемента на jQuery 0
Простой аккордеон на jQuery №3 0

На нашем сайте для вебмастера работает сервис создания тестов.

RSS фиды

RSS Статьи
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
14.01.2013 03:14 Автор/источник: Den1xxx

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

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

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