—»     —»   Скользящее меню в jQuery: Руководство по созданию
  Раздел: Меню и Навигация   Комментариев: 1  

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

Приветствуем. В данной статье мы расскажем вам о том, как при помощи 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
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Mysterious Master   Прочитано (раз): 11796   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 14 февраля 2012 @ 09:12
Написал: hunter — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо. Как раз для такого новичка как я
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2020    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031