- Метки урока:
- web дизайн
- jquery
- списки
Красивое оформление элементов списка
Списки очень часто используются на веб страничках. Но очень часто они выглядят шаблонно и непривлекательно. Данный урок поможет Вам справиться с этим.
Несколько строк jQuery и стилей оформления - и Ваши списки невозможно узнать. Кроме того на основе данного примера можно создавать довольно неплохие меню навигации на Вашем сайте.
Ну что ж приступим!
jQuery
Вставляем следующий код между тегами <body></body>. Не забываем про правильный путь к фреймворку.
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(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>
Данный код делит все элементы списка на четные и нечетные. Все нечетные элементы нам видны, а четные спрятаны. При нажатии на нечетные элементы четные становятся видимыми с красивой анимацией. Вот такой простой принцип заложен в основе данного примера.
CSS
Далее идут несколько стилей оформления. Можете поэкспериментировать с ними для создания собственных уникальных решений. Стили можно вставить как в сам документ или вынести в отдельный файл.
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
font: 85%/155% Georgia, "Times New Roman", Times, serif;
color: #333333;
width: 960px;
margin: 20px auto;
}
#menu {
width: 200px;
border: 1px solid #FAB2C1;
}
#menu li {
list-style-type: none;
border-bottom: 1px solid #FAB2C1;
}
#menu li.odd {
font-size: 90%;
padding: 2px 8px;
}
#menu a {
display: block;
width: 184px;
color: #800F25;
text-decoration: none;
padding: 2px 8px;
}
#menu li.even {
background-color: #FAC7D2;
}
#menu li.odd {
background-color: #fff;
display: none;
}
#menu li.odd a {
color: black;
}
#menu li.last {
border-bottom: none;
}
p {
padding-bottom: 20px;
}
</style>
HTML
Вот так Вам необходимо оформить элементы списка:
<ul id="menu">
<li><a href="#">Нажми меня</a></li>
<li>Неплохо! Не правда ли?</li>
<li><a href="#">И меня!!</a></li>
<li>ВАУ! Реально круто!</li>
<li><a href="#">Ухты!!</a></li>
<li>Вот это да!</li>
</ul>
По-моему, получилось очень красиво и практично. Жду Ваших комментариев! С праздниками!!!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.lateralcode.com
Перевел: Максим Шкурупий
Урок создан: 18 Апреля 2009
Просмотров: 48485
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.