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

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

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

^ Наверх ^