Главная страница » jQuery » Как создать простые элементы списка

Как создать простые элементы списка

На сайтах часто встречаются элементы списка, но зачастую они выглядят одинаково и не привлекают взор посетителей, по этому в данном уроке , я расскажу как можно разнообразить ваши списки применив к ним пару красивых эффектов. И так украсим наш список эффектами jQuery, посмотрим что у нас получилось…

По традиции предлагаю просмотреть online готовый образец, или просто скачать исходники:

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

1.И так, теперь рассмотрим сам код и с чем его едят, для начала мы рассмотрим jQuery, данный код необходимо вставить между тегами <body></body>

$(function() {

$('#menu li:even').addClass('even');

$('#menu li:odd').addClass('odd');

$('#menu li:even:last').addClass('last');

$('#menu li:even').click( function() {

$('#menu li:even').toggle(500);

$(this).toggle(500);

$(this).next().slideToggle();

} );

});

</script>

Что мы сделали этим кодом? мы разделили наш список на первый и второй столбец, первый столбец нам будет виден, а второй будет скрытый. При нажатии на первый , будет с анимацией появляться второй, в этом и заложен принцем фишки нашего списка.

2.Вторым этапом будет СSS, тут мы рассмотрим оформление нашего списка и позиционирование его на нашей страничке: