Список - это один из наиболее важных элементов на вэб сайте. Существует множество способов сделать список более интересным с помощью CSS, но можно сделать его еще более интригующим, используя jQuery и CSS3. С помощью этих вэб технологий можно создавать потрясающие эффекты для HTML элементов. В данном уроке мы будет испльзовать CSS3 для придания списку лучшего вида и jQuery, чтобы добавить интерактивности.
Подготовка
В данном уроке мы подготовим расширяющийся список с потрясающим видом, который можно получить с помощью CSS3.
Нам нужно создать отдельную папку для файлов урока и скачать туда библиотеку jQuery.
Теперь создадим HTML документ, и сохраним его как index.html в той же папке, что и библиотека JQuery.
Затем создадим CSS файл и сохраним его в той же папке как style.css.
Установка
Теперь нужно задекларировать наши файлы. Мы декларируем style.css. и jQuery бибилиотеку в нашем HTML документе следующим образом:
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
Работаем над нашим списком
Теперь нужно создать разметку в нашем документе. Мы будем использовать неупорядоченный список в нашем уроке, но адаптация упорядоченного списка очень проста, нужно только поменять ul на ol, или использовать оба тэга в нашем коде jQuery. Итак, вот наша разметка. Контейнер div сожержит заголовок h3 и неупорядоченный список:
<div class="box">
<h3>Список №1<span class="expand">+</span></h3>
<ul>
<li>Пункт №1</li>
<li>Пункт №2</li>
<li>Пункт №3</li>
<li>Пункт №4</li>
</ul>
</div>
Для чего нужен span, который сожержит символ "+"? Мы будем использовать его для разворачивания и сворачивания списка по нажатию кнопки мыши.
Теперь добавим стили CSS, которые помогут придать нашему списку более профессиональный вид. Начнем с задания глобальных правил для удаления всех полей и отступов для всех элементов и установим фон и набор шрифтов:
* { margin: 0; padding: 0; }
body { background: #f0f0f0; font-family: Arial, Helvetica, sans-serif; }
Теперь мы зададим стили для контейнера div и используем некоторые правила CSS3, чтобы сделать его более интересным. Чтобы увидеть функционал CSS3 во всей красе нужно использовать браузер на основе Gecko (Mozilla, и т.п.) или браузер Webkit (Chrome, Safari, и т.п.):
.box {
width: 250px;
margin: 10px auto;
background: #fff;
border: 1px solid #d1d1d1;
padding: 4px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Теперь зададим стили для заголовка h3 и его секции span:
h3 {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px;
background: -moz-linear-gradient(center top, #efefef 0%,#e0e0e0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #efefef),color-stop(1, #e0e0e0));
border: 1px solid #d1d1d1;
color: #c1c1c1;
font-size: 13px;
font-weight: normal;
text-shadow: 1px 1px 0px #fff;
}
h3 span { float: right; cursor: pointer; }
h3 span:hover { text-shadow: 0px 0px 3px #a1eeff; }
Для фонa используется правило CSS3, которое задает градиент. Очень трудно запомнить синтаксис, поэтому можно использовать сайт CSS Corners для генерации других стилей. На картинке ниже показан результат применения стилей к тэгу h3.
Использование стилей CSS3
Теперь займемся элементами списка. Добавим несколько стилей для них, чтобы завершить дизайн нашего списка:
ul { padding: 5px; overflow: hidden; }
ul li { font-size: 13px; list-style-type: square; list-style-position: inside; color: #a1a1a1; padding: 5px; }
Теперь наш список имеет отличный вид и можно приступать к работе с jQuery.
Разберемся с jQuery
Теперь нам надо создать пользовательский скрипт. Мы создадим его в нашем HTML документе, добавим тэг сразу после декларирования jQuery:
<script type="text/javascript">
</script>
Все наши функции и код будут размещены внутри данного тэга. Теперь приступим к добавлению кода, который нам нужен. Ниже приводятся куски кода с объяснениями того, что происходит.
Сначала наш документ загружается и, когда он загружен на 100%, скрипт приступает к действию:
$(document).ready(function(){
});
Мы помещаем весь код нашего скрипта внутрь выше описанной функции. Сначала нам нужно скрыть неупорядоченный список с помощью следующего кода:
$(ul").hide();
Теперь добавляем функцию, которая сворачивает/разворачивает список:
$(h3 span").click(function(){
$(this).parent().next().slideToggle();
});
Давайте разберем далее подробно, что происходит в данном коде. Когда вы нажимаете кнопку мыши на "+", который является элементом h3 span, элемент ul, который является следующим элементом родительского элемента h3 span (это h3) начинает сворачиваться/разворачиватся.
Теперь сделаем наш список боле интересным. Выделим четные строки списка с помощью следующего кода:
$(ul li:odd").css(background-color", "#efefef");
На этом урок закончен. Надеюсь, он был полезен для Вас!