Что такое динамическое меню. Создаем динамичное и анимированное меню. Пишем код, создающий динамическое меню на jQuery
Liked:
26
Did not like: 12
В этой статье я покажу как написать простой плагин на jQuery, который будет строить из обычной HTML-разметки симпатичное динамическое меню. Первое, с чего мы начнём, - определимся, что именно будет делать плагин и какова наша цель. Итак:
Теперь определим, какие файлы нужно создать, чтобы проверить работу рассматриваемого примера. Вот они:
2. jquery.dynamenu.js - код плагина, помещенный в отдельный файл.
3. dynamenu.css - стиль нашего меню. Сюда помещаем весь CSS
Эти файлы с работающим меню можно будет найти в архиве, приложенном к статье. В конце статьи приведена живая демонстрация работы нашего меню. Обратите внимание, что в демонстрации вызов плагина размещен там же, где и сам код плагина. Это связано лишь с тем, что используемый нами механизм живых демо требует размещения JavaScript-кода в отдельном фрейме.
Начинаем писать плагин. Поехали!
1. Готовим HTML разметку страницыЗададим самую простую разметку для нашего меню. Пусть это будут несколько пунктов меню для нашего будущего сайта:
Новости сайта Уроки Photoshop Кисти для Photoshop Красивые шрифты
Тут всё просто - 4 div-элемента, у каждого задан класс dynamenu для того, чтобы потом передать его в качестве селектора нашему будущему плагину. Внутри каждого div-а гиперссылка с названием пункта меню.
2. Задаём CSS-стилиЧтобы стилизовать наше меню, используем всего два CSS-стиля. С их помощью мы сделаем фон каждого пункта меню серым, ширину меню в 300 пикселей с внешними и внутренними отступами по 5 пикселей, а все ссылки меню - чёрного цвета:
a.mlink { color:#000; text-decoration:none; } .dynamenu { background-color: #aaaaaa; width:300px; margin:5px; padding:5px; font-family: "Tahoma"; font-size: 9pt; }
3. Пишем "каркас" плагинаПервым делом, зададим каркас нашего плагина. Этот каркас частично взят с официального сайта jQuery и содержит так называемые "Best Practices" (лучшие практики и приемы - от разработчиков языка jQuery). В общем случае подобный каркас применим практически ко всем плагинам jQuery. Если Вы запомните и поймете, как функционирует этот каркас, то потом будете писать плагины на "раз-два". Выглядит он следующим образом:
(function($) { // список методов нашего плагина var methods = { init: function(options) { // сюда можно помещать инициализацию плагина. в нашем случае // для простоты здесь ничего не будет }, sliding: function () { // метод sliding нашего плагина будет непосредственно строить меню } }; // "регистрируем" наш плагин в пространстве имен jQuery. $.fn.dynamenu = function(method) { // здесь вызываем нужный метод внутри плагина } })(jQuery);
Ничего сложного в каркасе, как видите, нет. Зато он несёт в себе полезную информацию. Первый важный момент, который нужно понять в каркасе - мы собираем все методы, добавляемые к нашему плагину (init, sliding) в один объект - methods. Это позволяет не забивать пространство имен $.fn лишними функциями. Правильное указание пространства имен нашего плагина - очень важная часть процесса разработки плагинов как такового. Использование пространства имен гарантирует, что наш плагин с минимальной долей вероятности будет переписан другими плагинами или кодом, расположенными на одной и той же HTML-странице. Пространство имен также делает жизнь проще, т.к. помогает лучше следить за методами, событиями и данными.
Всегда используйте сокрытие методов внутри плагина, например в объекте methods. Помимо того, что это хороший стиль программирования, данный приём поможет вам избежать конфликтов с другими сторонними библиотеками и плагинами, а также позволит не засорять пространство имен jQuery
Следующий момент, на который стоит обратить внимание - конструктор нашего плагина. Это строка $.fn.dynamenu = function (method) {...}. Как видим, конструктор принимает один параметр - method . В качестве значения для параметра мы будем передавать строку, содержащую имя метода внутри объекта methods, который мы собираемся вызвать. Давайте заполним конструктор следующим кодом:
$.fn.dynamenu = function(method) { if (methods) { methods.init.apply(this, arguments); return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); } else { $.error("Метод" + method + " не существует!"); } }
Разберем, что мы сделали. Сначала мы проверяем, есть ли метод с именем, переданным в параметре конструктора, в объекте methods нашего плагина. Если метод есть, то мы вызываем сначала метод init - для инициализации нашего плагина, а затем вызываем тот метод, имя которого передали в параметре конструктора, причем передаем ему все оставшиеся аргументы. Если же метода с таким именем нет, то мы выдадим ошибку и плагин прекратит свою работу.
На данном этапе уже многое сделано! Уже теперь мы можем обращаться к нашему плагину и вызывать его методы, хоть и никакой полезной работы они пока не выполняют,. Я рекомендую поместить код нашего плагина в отдельный файл и назвать его jquery.dynamenu.js . Размещение кода плагина в отдельном файле является логичным - ведь плагин должен быть по своей сути универсальным и давать нам и другим разработчикам подключать его в готовом виде к своему сайту.
Теперь, когда наш каркас наполнен кодом, способным вызывать внутренние методы плагина, пора нарастить "мясо", то есть написать код, который будет непосредственно превращать наши div-блоки в красивое динамическое меню. Приступим...
4. Пишем код, создающий динамическое меню на jQueryВесь полезный код нашего плагина будет размещён в функции sliding , которая является внутренним методом плагина и находится в объекте methods . Давайте кратко опишем последовательность действий по превращению статичной разметки с нашими div-блоками в динамическое меню на jQuery:
Вот, собственно, и вся логика. А теперь посмотрим, как это реализовать:
return this.each(function() { $(this).css({"opacity":"0.4"}); $(this).hover(function() { $("a.mlink", this).css({"font-weight":"bold"}); $(this).animate({ opacity:1, "margin-left":"+=5" }, 100, "linear"); }, function() { $("a.mlink", this).css({"font-weight":"normal"}); $(this).animate({ opacity:0.4, "margin-left":"-=5" }, 100, "linear"); }); });
На всякий случай, поясню, что происходит. Итак, в самой первой строчке мы видим оператор . Он делает следующее: пробегает по переданному в функцию sliding набору элементов (т.е. все наши div-блоки) и выполняет код, размещенный внутри. После такого пробега по элементам мы возвращаем (оператор return) результат выполнения операций для каждого элемента набора, опять же, в виде набора. Таким образом наша функция sliding возвращает набор div-блоков, переданных на "вход" функции, только обработанный и уже превращенный в динамическое меню. Этим реализуется важная концепция jQuery - возможность использования нашего плагина в цепочке вызовов. Чтобы лучше понять, что такое цепочка вызовов, приведу пример:
$(".myelm").dynamenu("sliding").css({"border" : "1px solid red"});
В приведенном выше куске кода мы видим, что такое цепочка вызовов: сначала мы выбираем все элементы на странице с классом myelm, затем используем наш плагин dynamenu и затем снова по цепочке применяем уже стандартный метод jQuery css() для изменения стиля элементов. Если бы мы не возвращали из метода конструкцию return this.each(function() { ... }) , то использовать метод css() в "цепочке" уже бы не смогли.
Используйте возврат оператора this.each() для того, чтобы поддерживать принцип "цепочки" в ваших плагинах и делать их более универсальными.
Едем дальше, внутри оператора each(), где мы пробегаем по всем нашим div-блокам идет как раз начальная установка свойства "прозрачность" (opacity) элемента в 0.4. пункта. Максимальное значение opacity - это 1 (100%), поэтому мы делаем "прозрачность" в 40%. После этого мы ставим два обработчика на "наведение" (hover) мыши и "уход" мыши из области div-блока. В первом обработчике мы устанавливаем название пункта меню полужирным шрифтом и используем метод animate(), чтобы добиться "полной непрозрачности" пункта меню, а также делаем сдвиг вправо на 5 пикселей. В обработчике "ухода" мыши мы просто возвращаем элемент в начальное состояние - меняем снова шрифт на обычный (normal) и делаем сдвиг влево снова на 5 пикселей.
На этом всё! Наш плагин готов к использованию. Хоть, он и простой, но может хорошо пригодиться для создания динамического меню на сайте. Ниже по тексту - демонстрация работы нашего плагина. Для того, чтобы увидеть результат работы плагина, перейдите на вкладку Result.
Успехов в написании хороших плагинов! Комментарии, вопросы и отзывы всегда приветствуются;)
Наверняка вы видели на некоторых веб-сайтах динамичные и анимированные меню, которые изменяются при прокрутке вниз. Минимизируя главное меню навигации, вы оставляете больше места для содержания. В этом уроке мы объясним, как вы можете создать меню самостоятельно с помощью HTML5, CSS3 и немного jQuery.
Если вы хотите, чтобы особое внимание фокусировалось на содержании сайта, а также позволяло создавать более крупную и впечатляющую навигацию при первом посещении пользователем веб-сайта, то такого рода меню вам подойдет как нельзя лучше. Вы можете отлично продемонстрировать свой бренд или логотип, и после первоначального ознакомления с сайтом, уменьшить некоторые элементы, что позволит пользователю обратить главное внимание на ваше содержание.
Есть несколько способов это сделать. В этом уроке мы объясним, как создать фиксированное меню во всю ширину страницы, которое изменяется в высоте вместе с логотипом, создавая сведенную к минимуму версию исходного оригинала. При желании, вы также можете заменить логотип на другой вариант, например инициалы или иконку, но имейте в виду, что консистенция очень важна здесь, так чтобы пользователь понимал, как элемент изменился и что его главная цель по-прежнему является навигация по сайту.
Создание базовой структуры в HTML5
Мы начнем с создания основного HTML кода, который нам понадобится. Для начала, мы будем придерживаться очень простой структуры HTML5.
Теперь, когда наш первоначальный HTML код написан, мы добавим код для меню, а также некоторые другие детали для хедера нашего HTML файла.
Как создать анимированное меню | WebDesignMagazine
- Главная
- Статьи
- Это очень клевый сайт!
Крутим вниз и смотрим как изменится меню
Все! Приехали!
В нашем : мы добавили мета-тег для автора, чтобы указать создателя документа, после чего мы включили известный “сброс CSS” от Эрика Мейера, что приведет к сбросу почти каждого элемента в HTML файле, давая вам более понятный и простой документ для работы. И так как мы будем использовать JQuery позже, в последней строке нашего главного элемента мы импортируем его через JQuery CDN.
В нашем теге, мы использовали по умолчанию HTML5 элемента. Наш будет во всю ширину страницы и будет нести ответственность за изменения между большими и малыми версии меню. Мы даем нашему класс с именем “large”, так чтобы мы могли изменить некоторые специфические свойства в CSS, чтобы преврать наше меню в уменьшенную версию. это наш меню-контейнер, который содержит изображение логотипа нашего веб-сайта и простой неупорядоченный список меню с тремя ссылками.
Поскольку у нас здесь нету никакого контента, будет использоваться, чтобы растянуть страницу и заставить действовать прокрутку.
И это все по HTML части. Теперь нам нужно стилизовать элементы при помощи CSS и сделать меню динамичным.
Стилизация меню и страниц
/* Импортируем шрифт Amaranth */ @import url(//fonts.googleapis.com/css?family=Amaranth); /* Основной стиль */ body{ background-color: #ebebeb; } ul{ float: right; } li{ display: inline; float: left;} img.logo{float: left;} /* Размер и центровка меню */ nav{ width: 960px; margin: 0 auto;}
Немного этого CSS сделает наше меню 960px шириной по центру, при организации нашего меню справа и логотипа слева. Мы также импортируем Amaranth шрифт от Google Web Fonts, чтобы использовать его для нашего текста на странице.
Section.stretch{ float: left; height: 1500px; width: 100%; } section.stretch p{ font-family: "Amaranth", sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; } section.stretch p.bottom{ top: 100%; }
Здесь мы просто заставляем страницу растянуться, чтобы спровоцировать скроллинг (прокрутку), и позиционирование текста для обозначения начала и конца содержания.
Header{ background: #C7C7C7; border-bottom: 1px solid #aaaaaa; float: left; width: 100%; position: fixed; z-index: 10; } header a{ color: #969696; text-decoration: none; font-family: "Amaranth", sans-serif; text-transform: uppercase; font-size: 1em; } header a.active, header a:hover{ color: #3d3d3d; } header li{ margin-right: 30px; } /* Размеры для увеличенного меню */ header.large{ height: 120px; } header.large img{ width: 489px; height: 113px; } header.large li{ margin-top: 45px; }
Здесь мы заканчиваем основную стилизацию нашего заголовка. будет служить нашим меню контейнером. Он будет содержать наш элемент и будет служить элементом, где мы определяем цвет фона, высоту меню, стиль меню ссылок и другое. Он будет адаптироваться к ширине экрана со свойствами ширины: 100% и будет оставаться фиксированными в течение других элементов на веб-сайте. Важно не забуть задать z-индекс, чтобы этот элемент перекрывал остальные части страницы, а также положения:fixed, чтобы сделать div закрепленным вверху, так чтобы он оставался на том же положении, в то время как пользователь прокручивает веб-сайт. Как вы видите, кроме установки стилей для заголовков, мы также устанавливаем некоторые специфические стили для “large” класса, используя header.large. Начальное состояние нашего меню будет большим, и поэтому мы здесь определяем только нужные стили, чтобы оно выглядело, как мы хотим, при первоначальном входе пользователя на страницу.
Динамическое изменение размера меню
Наше меню сделано и стилизовано, но мы все еще хотим поработать над его минимизацией. Для создания этого «состояния», мы будем создавать новый класс для в CSS под названием “small”, который будет ответствен за изменение свойств, которые мы должны модифицировать. Мы уже определили большое меню, так что теперь мы просто должны сделать наше меню короче, наше изображение меньшего пропорционального размера, а (margin top) мы используем в наших элементах
/* Sizes for the smaller menu */ header.small{ height: 50px; } header.small img{ width: 287px; height: 69px; margin-top: -10px; } header.small li{ margin-top: 17px; }
Итак, как вы видите, эти стили практически идентичны тем, которые в большей меню, мы просто изменили класс “large” на “small” и изменили значения, которые мы использовали, на меньшие. Мы используем отрицательные марджин-топ на изображение, чтобы централизовать его в контейнере, так как изображение имеет тонкую тень и выше, чем написание для его приспособления. Теперь у нас есть все необходимые стили, чтобы настроить меню размера изменения, и если вы попытаетесь изменить его в вашем , вы увидите в браузере, что меню станет меньше. Но нам нужно, чтоб оно было динамичным.
Изменение класса меню при помощи jQuery
При всех наших стилях на местах, нам просто нужно добавить немного JavaScript, чтобы переключатся между классами «large» и «small». Так как мы хотим изменить это на основе прокрутки пользователем, мы будем использовать.ScrollTop () функцию в jQuery. Эта функция позволит нам получить или установить позицию прокрутки в пикселях. Положение прокрутки является количеством пикселей, которые уже были прокручены в окне браузера. В этом случае мы просто должны знать сколько пикселей пользователь прокрутил, чтобы мы могли вызвать наш код и переключиться между классами:
$(document).on("scroll",function(){ if($(document).scrollTop()>100){ $("header").removeClass("large").addClass("small"); } else{ $("header").removeClass("small").addClass("large"); } });
Если пользователь прокрутил более 100 пикселей, то тогда будет удален класс «large», который мы создали, и добавлен наш новый класс «small». Таким образом, меню будет изменяться в размере, как мы ранее определили в CSS. Попробуйте, к этому времени оно должно уже работать, но вы могли заметить, что переходы между классами, кажутся очень резкими.
CSS переходы для анимации меню
Для того, чтобы гладко переключаться между классами в нашем меню, мы будем использовать CSS переходы. Просто используйте этот кусок кода рядом с остальной частью вашего CSS.
Header,nav, a, img, li{ transition: all 1s; -moz-transition: all 1s; /* Firefox 4 */ -webkit-transition: all 1s; /* Safari and Chrome */ -o-transition: all 1s; /* Opera */ }
Здесь мы определили переходы для всех свойств CSS для , и
Слышали ли вы когда либо такое утверждение, что "нельзя сделать динамическое выпадающее меню исключительно на CSS для IE"? Уверен, что да. И что, вы-таки верите этому? Правильно, лучше не верьте.
Цель, которой мы хотим достичь в этой статье
Цель данной статьи - сделать выпадающее меню для IE, сделанное исключительно на CSS. Начав с этой постановки, я расширил задачу до того, чтобы заставить работать такое меню в других наиболее известных браузерах (прим. пер.: из комментариев выясняется, что этими браузерами являются Opera 7.x и последние версии Firefox).
Цель, которой мы хотим достичь в этой статье, в принципе более или менее общеобразовательная, т.е. дать общее представление о некоторых "скрытых" и редко используемых особенностях браузеров.
Также особенно любопытные могут в этой статье найти некоторые ухищрения, с помощью которых можно достичь определенных нестандартных результатов. Ну и для разработчиков эта статья может стать поводом для размышления или источником новых идей.
Каким мы представляем уровень читателя.
Вообще-то я думал о том, чтобы пометить эту статью как для "углубленного изучения (advanced)". Но я уверен, что даже не самые опытные разработчики хорошо поймут то, что написано в статье. Короче, читатель просто обязан знать основы CSS и
HTML.
Чем это меню отличается от всех других?
Я долго искал в сети меню, которые были бы сделаны на CSS, но не нашел ни одного решения, которое бы работало без глюков в IE. Однако же я нашел много интересных идей, которые и привели меня к тому результату, который будет здесь описан. Да, мой код тоже не совершенен, но у меня попросту нет времени, чтобы выправить все ошибки. Самое интересное альтернативное решение из всех, что я видел (которые используют CSS), основано на использовании псевдокласса hover для элементов LI. А я-то никогда и не думал, что такое возможно, впрочем, как и не думал о том, что вообще возможно сделать выпадающее меню для IE без скриптов...
Основным отличием между моим и другими меню является то, что мое работает в IE. Все решения, которые я видел, используют элемент LI как основной элемент для псевдокласса:hover, однако Microsoft решила, что этот псевдокласс может быть использован только для
элемента A. Большинство сайтов делают оговорку, что их меню работают только в браузерах Opera 7.x или Mozilla. Но ведь эти браузеры используются только пятью процентами пользователей! Да, такие меню хороши в этих браузерах, но к сожалению не могут быть видны в большинстве самых распространенных браузеров. Сейчас мы исправим это недоразумение.
Что такое меню, сделанное с помощью только CSS?
Это динамическое меню, для создания которого используется только CSS, и не используются скрипты (например, написанные на JavaScript).
Что, не верится?
Давайте рассмотрим код:
<
STYLE type
=
text
/
css id
=
"default"
title
=
"default"
name
=
"default"
>
*::-
moz
-
any
-
link br
,*:-
moz
-
any
-
link br
{
/*a workarround for mozilla*/
display
:
none
;
}
div
#menu * {
cursor
:
pointer
;
/*because IE displays the text cursor
if the link is inactive*/
}
Disabled
{
color
:
red
!
important
;
background
:
none
!
important
;
}
Div
#menu {
background
:
#F5F5DC;
height
:
15px
;
white
-
space
:
nowrap
;
width
:
100
%;
}
Div
#menu .a {
background
:
#F5F5DC;
border
:
1px solid
#F5F5DC;
color
:
#000000;
text
-
decoration
:
none
;
}
Div
#menu .a table {
display
:
block
;
font
:
10px Verdana
,
sans
-
serif
;
white
-
space
:
nowrap
;
}
Div
#menu table, div#menu table a {
display
:
none
;
}
Div
#menu .a:hover, div#menu div.menuitem:hover {
background
:
#7DA6EE;
border
:
1px solid
#000080;
color
:
#0000FF;
margin
-
right
:-
1px
;
/*resolves a problem with Opera
not displaying the right border*/
}
Div
#menu .a:hover table, div#menu div.menuitem:hover table{
background
:
#FFFFFF;
border
:
1px solid
#708090;
display
:
block
;
position
:
absolute
;
white
-
space
:
nowrap
;
}
Div
#menu .a:hover table a, div#menu div.menuitem:hover table a {
border
-
left
:
10px solid
#708090;
border
-
right
:
1px solid white
;
/*resolves a jump problem*/
color
:
#000000;
display
:
block
;
padding
:
1px 12px
;
text
-
decoration
:
none
;
white
-
space
:
nowrap
;
z
-
index
:
1000
;
}
Div
#menu .a:hover table a:hover, div#menu div.menuitem:hover table a:hover {
background
:
#7DA6EE;
border
:
1px solid
#000000;
border
-
left
:
10px solid
#000000;
color
:
#000000;
display
:
block
;
padding
:
0px 12px
;
text
-
decoration
:
none
;
z
-
index
:
1000
;
}
Td
{
border
-
width
:
0px
;
padding
:
0px 0px 0px 0px
;
}
Menuitem
{
float
:
left
;
margin
:
1px 1px 1px 1px
;
padding
:
1px 1px 1px 1px
;
}
Menuitem
* {
padding
:
0px 0px 0px 0px
;
}
#other {
}
#moz{
}
#moz::-moz-cell-content{
height
:
auto
;
visibility
:
visible
;
}
#other::-moz-cell-content{
height
:
1px
;
visibility
:
hidden
;
}
#holder {
width
:
100
%;
}
<
TABLE id
=
holder
>
<
TR
>
<
TD id
=
"other"
>
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>
File
<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>click me
<
TR
>
<
TD
><
a href
=
#3>Save
<
TR
>
<
TD
><
a href
=
#4>Close
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>
Help
<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>Index
<
TR
>
<
TD
><
a href
=
"#14"
>
About
<
TR
>
<
TD id
=
"moz"
>
Mozilla specific menu
!
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>
Filezilla
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>Open
<
TR
>
<
TD
><
a href
=
#3>Save
<
TR
>
<
TD
><
a href
=
#4>Close
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>
Helpzilla
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>Index
<
TR
>
<
TD
><
a href
=
"#14"
>
About
<
BR
>
Что происходит, почему все работает?
Сразу оговорюсь, что в этой статье я не буду вас учить использованию CSS. Поэтому сразу переходим к рассмотрению принципа работы меню - к псевдоклассу ":hover". Да, это именно класс. Т.е. селектор может наследовать другой селектор, который включает ":hover". В нашем случае "A:hover TABLE" выбирает "