главная

Теги:


Раскрывающееся меню на JQuery

Всем привет! Добро пожаловать в новый краткий учебный курс! В этом уроке я покажу, как с помощью JQuery можно создать кнопку, из которой будет раскрываться список меню. Увидеть данный эффект в действии можно на сайте psd.tutsplus.com в правом верхнем углу.

При нажатии на кнопку, раскрывается блок со списком ссылок, а при повторном нажатии блок сворачивается. Этого можно достичь с помощью JQuery, и в этом уроке я покажу, как именно. Что ж, давайте начнем. Во-первых, давайте создадим нашу кнопку, чтоб потом полностью сконцентрироваться на коде. Откройте Phtoshop и создайте новый документ с размерами будущей кнопки. Вы можете создать кнопку абсолютно любого размера. Размеры моей кнопки - 182 х 32 пикселя. Кликните дважды по слою "Background" и добавьте простой стиль "Gradient Overlay".

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

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

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

Сомое важное, что нам нужно сделать в первую очередь, это установить ссылки на наши файлы javascript и css. Для этого пропишем этот кусок кода в теге .



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

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

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



 

В первой сроке кода мы вставляем изображение нашей кнопки. Мы указываем ее ширину и высоту и задаем ей класс. Класс является уникальной опорной точкой картинки для фйла js, который мы уже создали. Класс также дает нам возможность применять любые CSS стили через .menu_class. После этого мы получаем простой ненумерованный список. Если просмотреть наше меню в браузере, то вот как оно выглядит.

 

 

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

 

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

Необходим простой шрифт и стиль фона. Установите шрифт и желаемый размер. Я также сменил цвет фона с белого на темно-серый. Добавим стиль для нумерованных и ненумерованных списков. Добавим границу изображению кнопки. Вы можете нарисовать границу в Photoshop-е на самом рисунке, но мне кажется, что легче добваить ее через CSS, так как легче изменить кусок кода, чем каждый раз открывать Photoshop и перерисовывать картинку.

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

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

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

.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-пиксельные отступы ссылкам. Также мы отображаем ссылки в блоках. Стили ссылок, отображающиеся при наведении на них курсора, достаточно просты: отступы такие же (10 пикселей), текст жирный, цвет текста меняется при наведении на розоватый. Это все со стилями. Меню готово к тестированию.

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

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

Источник урока: www.hv-designs.co.uk/2009/02/17/sliding-jquery-menu

Урок Создан:2011-02-08 Просмотров:5012

Добавить комментарий:


Copyright© 2009 Hosted by Zhost