Главная > Меню и Навигация > Скользящее меню в jQuery: Руководство по созданию

Скользящее меню в jQuery: Руководство по созданию


9 октября 2009, 16:30. Разместил: Mysterious Master
Приветствуем. В данной статье мы расскажем вам о том, как при помощи jQuery создать скользящее разворачивающееся меню. Вы сможете рассмотреть в действии сам эффект при помощи веб-сайта PSDtuts, в верхнем правом углу.

Ах да, забыли упомянуть о том, что вы также можете бесплатно скачивать исходные файлы, чтобы подробнее рассмотреть процесс создания.

Скользящее меню в jQuery: Руководство по созданию

Сам процесс заключается в том, что при нажатии на кнопку, выкатывается меню с доступными ссылками, и при последующем клике, все сворачивается обратно. Такого эффекта можно добиться с помощью jQuery, а в данной статье мы расскажем вам о том, как это сделать. Итак, давайте начнем. Давайте сразу сделаем кнопку, чтобы потом можно было тщательно сфокусироваться на коде. Откройте Photoshop и создайте новый документ с требующимися размером (какой должна быть ваша кнопка). Я обычно использую 182х32 пикселя. Кликните два раза на фоновом слое и добавьте простое наложение с градацией.

Скользящее меню в jQuery: Руководство по созданию

С правой стороны кнопки добавьте небольшую стрелочку и вертикальный разделитель. Разделение состоит из двух цветов #302f2f и #252525.

Скользящее меню в jQuery: Руководство по созданию

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

Скользящее меню в jQuery: Руководство по созданию

Теперь для большей привлекательности откройте блокнот, и сохраните пустой документ под именем styles.css, сохраните его в папку, названную "sliding menu" на вашем рабочем столе. Сохранив, закройте блокнот, затем откройте папку "sliding menu", создайте еще две новые папки, одну назовите "js", а вторую назовите "images". Теперь идите на главную страницу jQuery, и скачайте библиотеку "jquery-1.3.1.min.js", переименуйте этот файл в "jquery", и поместите его в папку под названием "js". Откройте Dreamweaver и создайте новый HTML-файл, затем сохраните его прямо в папку "sliding menu" (название html-файла не имеет никакого значения, лучшим вариантом было бы sliding_menu.html). Теперь в Dreamweaver перейдите во вкладку с редактированием кода.

Скользящее меню в jQuery: Руководство по созданию

Одной из важных вещей, которые мы должны реализовать – связать наши файлы javascript и css. Мы сделаем это посредством данного кода, расположенного в пределах тэгов верхушки кода (head).

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>

Вы наверное уже заметили, что в коде упоминается три файла, которые мы согласовали между собой: styles.css, jquery.js, и третий slider.js (наверняка вы уже подумали о том, что у нас нет третьего файла…). Именно сейчас мы его и будем создавать. Откройте блокнот и сохраните пустой документ под именем slider.js в папку "js". Откройте сохраненный файл через Dreamweaver и внесите следующий код.

$(document).ready(function () {
    $('img.menu_class').click(function () {
    $('ul.the_menu').slideToggle('medium');
    });
});

Давайте я попробую немного разъяснить код, предоставленный выше. Первая строчка означает, что когда документ загружен, запускается функция - в нашем случае, это развертывание меню. Следующая строчка представляет собой изображение с классом menu_class, и после того, как будет произведен клик, меню начнет развертываться, что ведет к третьей линии. Меню будет разворачиваться на средней скорости. Вы можете поменять скорость, если есть такое желание. Вторая и третья строки считаются важными, так как они обращаются к нашему CSS-файлу, или img.menu_class и ul.the_menu. Мы пока еще не создали эти файлы, но все еще впереди. Переключитесь на файл HTML в режиме кодирования и приступим на написанию нашего меню.

<img src="images/button.png" width="184" height="32" class="menu_class" />
<ul class="the_menu">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a></li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>
<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>

Сначала в коде вы видите простую картинку, что есть наша кнопка, мы указали ширину и высоту, и задали класс. Класс создаст уникальную точку опоры для файла js, который мы уже написали. Класс также дает нам возможность применять стили, используя css-класс .menu_class. Далее у нас имеется беспорядочный список. Если мы взглянем на наше меню через окно браузера, то увидим то, как он выглядит.

Откройте ваш файл CSS через Dreamweaver. Давайте пропишем кое-какие стилевые параметры для нашего основного документа.

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    background-color: #333333;
}

Требуется всего лишь некоторый текст и фоновое оформление, определите используемый шрифт и его размеры, я также изменил цвет фона с белого на темно-серый. Далее мы добавим некоторое оформление к упорядоченным или беспорядочным спискам, также мы добавим границу к изображению кнопки (вы можете сделать эту границу в Photoshop, или же непосредственно в коде CSS, что легче, нежели открывать и копаться в объемной программе).

ul, li {
    margin:0;
    padding:0;
    list-style:none;
}

.menu_class {
    border:1px solid #1c1c1c;
}

Следующая ступень редактирования CSS относится к меню, которые выпадает при нажатии мышью.

.the_menu {
    display:none;
    width:300px;
    border: 1px solid #1c1c1c;
}

Здесь вы можете изменить ширину открытого меню, в моем указана ширина в 300 пикселей, но опять же, вы можете поставить собственный размер. Еще я указал ширину границы в 1 пиксель, так же, как и у кнопки. Далее отредактируем цвет фона выпадающего содержимого, а также цвет текста, его размеры и цвет при наведении.

.the_menu li {
    background-color: #302f2f;
}

.the_menu li a {
    color:#FFFFFF;
    text-decoration:none;
    padding:10px;
    display:block;
}

.the_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

The_menu li – это цвет фона, когда меню развернуто, текст не будет подчеркнутым, так как в стиле мы задали параметр "text-decoration:none". К тому же, мы отделили наши ссылки, посредством параметра отступа в 10 пикселей по всей площади наших ссылок. Стили при наведении достаточно просты, отступ остается таким же, размер шрифта меняется на жирный, а цвет меняется на что-то приближенное к розовому. Наверное, это все, что нужно для того, чтобы можно было уже приступать к тестированию меню. Вот так выглядит моё.

Скользящее меню в jQuery: Руководство по созданию

Далее быстренько пройдемся про позиционирование. Не применяйте выравнивание div по центру, левой или правой стороне, потому что выдвигающееся меню вряд ли будет правильно выравниваться. Если вы хотите выровнять ваше меню, редактируйте параметры его собственного div.

Посмотрите, что бы вы еще могли добавить на собственное усмотрение. Добавьте иконок для каждого пункта меню. Благодарим вас за чтение и оказанное внимание.

Скачать исходники + демо-версию:
Внимание! У вас нет прав для просмотра скрытого текста.


Автор статьи © Richard Carpenter
Русский перевод © CoolWebmasters.Com 2009
Вернуться назад