Красивое оформление элементов списка

Списки очень часто используются на веб страничках. Но очень часто они выглядят шаблонно и непривлекательно. Данный урок поможет Вам справиться с этим.

Несколько строк 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"

^ Наверх ^