Динамическое меню. Как вконтакте создать динамическое меню с эффектом навигации
хэндбук заказчика
Брошенные корзины: возвращаем владельцев
Клиент пришёл на сайт, собрал корзину и ушёл. Обидно! Но с этим можно бороться.
Люди, пожалуйста, прочитайте!
В нашем магазине кто-то бросил КОРЗИНУ! Ей всего 2 часа, но если не оформить заказ — она СГОРИТ через 48 часов! Если это вы бросили корзину, или знаете, кто это сделал — вернитесь к ней. Она плачет и хочет на ручки!
В последнее время количество брошенных корзин сильно увеличилось. Люди играются с формой заказа, добавляют товары и УХОДЯТ! Это безответственно. Мы в ответе за те корзины, которые собрали.
Люди, не будьте равнодушными. Доводите дело до конца и, если завели корзину, не бросайте её одну в этом жестоком мире!!11!1!
Теоретически вы можете получить такое письмо — если бросите корзину на сайте очень эмоционального человека.
Многие интернет-магазины уже поняли — дожимать клиентов выгодно. Им не хватило нескольких секунд и одного финального клика, чтобы вы расстались с кровно заработанными — и они готовы дать вам второй шанс. И даже третий и четвёртый, работая с вашей брошенной корзиной.
Благодаря этому увеличиваются продажи — 46% покупателей , которые бросили корзину, завершат оформление забытого заказа, если о нём напомнить.
Почему пользователи бросают корзины?
Причины отказа бывают разные и различаются по сложности продавливания потенциального покупателя до оплаты.
Причина первая. Пользователю помешали — элементарно молоко убежало. Или он осознанно отложил оплату на потом. Этот пользователь всё ещё лоялен и заинтересован в выбранных товарах, просто забыл о них. Его брошенную корзину можно превратить в заказ, напомнив о ней.
Каждая третья корзина — брошенна.
Причина вторая. Пользователь не смог набрать товары на сумму для бесплатной доставки. Или впервые увидел её стоимость и оказался не готов. Грустно вздохнул и бросил корзину. Его можно дожать, если порекомендовать купить то, что его заинтересует. Или предложить бесплатную доставку.
Причина третья. Любопытные мимокрокодилы, которые покупать пока не планируют, а кнопку «добавить в избранное» не нашли. Поэтому кидают в корзину всё, что может-быть-когда-нибудь захотят купить. Предварительно сравнив с предложениями сайтов-конкурентов, конечно же. При общении с этими посетителями напоминайте о себе ненавязчиво и постарайтесь оставить приятное впечатление. И он ещё вернётся.
Причина четвёртая. Внезапно пользователь нашёл место, где дешевле. И уже купил там. Случай тяжёлый, но пользователю можно предложить скидку на будущие покупки.
Как бы тяжело ни было, обратную связь по поводу брошенной корзины выгоднее организовать (помним про 46%), чем молча мириться с этим фактом. Так что переходим к вопросу, как это сделать.
Письма счастья
Самый популярный и очевидный способ напомнить о брошенной корзине — отправить письмо. Они бывают трёх видов, которым мы дали кодовые названия элементарные, классические и мечта разработчика.
Элементарные. Это письмо-текст. Оно напоминает пользователю, что корзина грустит одна и ждёт, когда он оформит заказ. Кстати, вот ссылочка для этого!
В письмо можно добавить картинки или полностью отрисовать дизайнером. Будет красиво, но просто в плане реализации.
Это письмо-шаблон с минимальной персонализацией — с именем в заголовке, хотя и его можно заменить на «Уважаемый клиент нашего замечательного магазина». С рассылкой справятся обычные сервисы, если связать их по API с базой данных интернет-магазина. Если вы пользуетесь , настройка этой функции займёт несколько минут.
67,45% корзин оставляют без оплаты.
Классические. Письма с динамическим контентом — кроме стандартного для всех «Уважаемый, не бросай дело на середине», в нём есть товары из корзины клиента — списком или даже с картинками.
Стандартные сервисы рассылки с этим уже не справляются. Здесь можно подключить тяжёлую артиллерию — системы email-маркетинга: eSputnik , Ofsys , Expersender и т.д. Установить специальный плагин. Или привлечь разработчика и написать своё решение.
Мечта разработчика. В этом типе писем есть не только данные из корзины потенциального покупателя, но и персональные рекомендации. Нужно научить письмо получать их с сайта. Скорее всего, это получится только у разработчиков. Хотя можно попробовать сервисы Crossss и RetailRocket . Но не факт, что они будут работать правильно без настройки программистом.
Этикет против спамеров
Каждый год количество брошенных корзин растёт.
Второе письмо отправляется через 24 часа после того, как корзина забыта. Теперь можно мягко надавить на клиента: предложить небольшую скидку или намекнуть, что товар может закончиться на складе.
Третье письмо — заключительное. Оправляется через неделю. Вам уже нечего терять — предлагайте всё, на что готовы пойти: бесплатную доставку, скидку в этом заказе или следующем. Можно быть жёстким: сказать, что корзина сгорит через несколько часов, если не оформить заказ. И, опять же, будет хорошим тоном (и полезно интернет-магазину) запросить обратную связь. Узнать, почему пользователь бросил корзину и не завершил оформление заказа.
Схема 2 часа — 24 часа — 7 дней примерная. Для разных сфер бизнеса время может меняться. Пользователям, которые покупают дорогой товар, нужно больше времени для размышлений. Если же клиент импульсивно добавил в корзину чехол для телефона, мыльные пузыри и корм для кошек — не дайте ему передумать и шлите первое письмо как можно быстрее. Время, идеальное для вашего бизнеса, выясняется опытным путём.
Многочисленные просьбы моих настойчивых читателей и просто любознательных пользователей возымели свое действие. Я наконец то создала урок, в котором мы будем учиться делать динамическое меню Вконтакте с эффектом нажатых кнопок! По аналогии с обычными сайтами интернета, когда посещенная ссылка маркируется особым способом (нажатая кнопка, подчеркивание итд) — мы будем создавать такую же конструкцию Вконтакте, с помощью созданных страниц и графического оформления. Для начала мы сделаем графические заготовки в фотошопе — создадим шапку меню и кнопочки двух видов. Потом создадим несколько страниц Вконтакте, согласно пунктам нашего меню. И напоследок сделаем хитрый прием, который, собственно, и создаст нам иллюзию перехода по ссылке. Урок достаточно сложный и подходит для тех, кто уверенно себя чувствует в функционале Вконтакта. Все манипуляции я буду производить на примере своей группы Вконтакте , где этот эффект реализован вживую. Итак, за дело!
Шаг 1. Создаем в фотошопе шапку меню
Создаем в фотошопе документ шириной 600 пикселей. Высота может быть разная, на ваше усмотрение. Вы можете поместить в шапку любую видовую фотографию, коллаж, информационный баннер и прочие графические картинки. В данном сучае я использовала такой вот рекламный баннер размером 600х172 пикселя.
Шаг 2. Создаем в фотошопе строку навигации
Теперь нам надо создать строку навигации. В данном примере я использовала в качестве кнопок только текст. Но на ваше усмотрение можно создать цветные кнопки и уже на них написать текст. Делаем так — создаем в фотошопе прямоугольник 600х56 пикселей и в данном случае заливаем его белым цветом. Потом в строку пишем пункты меню — где-то порядка 5-6 пунктов, не больше. Большее количество пунктов будет смотреться зажато.
Шаг 3. Создаем в фотошопе строку навигации в нажатом состоянии
Теперь нам надо создать активные ссылки, так, как-будто по ним нажали. Я использовала обычное подчеркивание, но можно использовать другой цвет текста или фона для маркировки посещенной ссылки.
Шаг 4. Нарезаем готовые картинки
На данном этапе нам надо нарезать картинки из Шага 2 и Шага 3. У нас должно получиться два комплекта по пять кнопок — одна кнопка без подчеркивания, другая кнопка с подчеркиванием. Кнопки каждого отдельного пункта (с подчеркиванием и без подчеркивания) должны быть одинакового размера. На картинке ниже представлено все наше графическое оформление — десять кнопок и одна шапка меню.
Шаг 5. Создаем Вконтакте страницу Меню
Теперь переходим ВКонтакт. Наша задача — создать отдельную страницу под названием «Меню». Для этого мы воспользуемся таким кодом
http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы
где вместо ХХХ мы подставим id нашей группы, а вместо текста «Название страницы» мы напишем Меню. Теперь надо выяснить id группы. Как это сделать? Заходим на главную страницу группы и смотрим на наши записи на стене — прямо под блоком «Добавить запись» будет написано «Все записи» — нажимаем на эту ссылку.
Шаг 6. Определяем id группы и редактируем код
Переходим на страницу и видим урл такого вида https://vk.com/wall-78320145?own=1
, где цифры 78320145 в данном примере и есть id группы. Подставляем наши данные в исходный код и получаем запись такого вида:
http://vk.com/pages?oid=-78320145&p=Меню
(с вашими цифрами!). Вставляем эту строку в адресную строку браузера и нажимаем Enter. Так мы создали новую страницу Вконтакте и изначально она выглядит так.
Шаг 7. Создаем Вконтакте остальные страницы навигации
Аналогичным образом мы создаем еще четыре страницы навигации: Цены, Как заказать, Техзадание и Вопросы. То есть еще четыре раза копируем в адресную строку браузера соответствующий код (с вашими цифрами id в примере ниже мои цифры):
http://vk.com/pages?oid=-78320145&p=Цены
http://vk.com/pages?oid=-78320145&p=Как_заказать
http://vk.com/pages?oid=-78320145&p=Техзадание
http://vk.com/pages?oid=-78320145&p=Вопросы
Обратите внимание, в названии страницы из двух слов (Как заказать) пробел между словами заменен на нижнее подчеркивание Как_заказать. Теперь у нас есть пять готвых страниц под каждый пункт меню. Страницу Портфолио мы не создавали поскольку она размещается на странице Меню
Шаг 8. Загружаем фотографии на первую страницу меню
На созданной, пока еще пустой странице (см. Шаг 6) Меню нажимаем на ссылку Редактировать или на ссылку Наполнить содержанием. После этого мы видим панель редактирования. Здесь нам надо нажать на значок фотоаппарат с функцией Загрузить фотографию. Важно! Обратите внимание на то, чтобы у вас стоял режим wiki-разметки. Переключение режимов регулируется значком у правого края страницы.
Шаг 9. Результат после загрузки картинок
Загружаем наши картинки, которые мы создавали в Шаге 1 и Шаге 2. После загрузки мы видим такой код, как на картинке ниже, а само меню выглядит так. После каждого изменения кода не забываем нажимать Сохранить страницу, а потом нажать предпросмотр для просмотра результата.
Шаг 10. Редактируем код картинок
Теперь наша задача заменить все свойства noborder на свойство nopadding. А у первой картинки проставить реальные размеры, поскольку Вконтакт при загрузке ужал картинку до 400 пикселей. После всех изменений мы должны получить такой код и такое меню. 
Шаг 11. Проставляем ссылки для картинок
Теперь мы должны проставить ссылки для каждой картинки. Ссылку надо вставлять после nopadding| вместо пробела перед закрывающими скобками. Для первой картинки (шапка меню из Шага 1) можно дать ссылку на главную страницу группы, а можно воспользоваться свойством nolink (ставится через; после nopadding без пробелов). Для второй картики вставляем адрес страницы формата page-78320145_49821289
. То есть полный урл картинки https://vk.com/page-78320145_49821289
, до первую часть с доменом можно опустить. А вот для ссылок на внешние сайты урл ссылки надо указывать полностью.
Шаг 12. Копируем код на остальные страницы навигации
На этом, достаточно простом шаге, мы копируем последний код из предыдущего шага и вставляем его на остальные созданные страницы — Цены, Как заказать, Техзадание и Вопросы. Находимся на странице, нажимаем Редактировать или Наполнить содержанием (находимся в режиме wiki-разметки), вставляем код и нажимаем Сохранить. И потом также на следующей странице. То есть сейчас у нас есть пять страниц, на каждой из которых меню выглядит абсолютно одинаково. Но зато уже можно осуществлять навигацию по меню — при нажатии на ссылку например Цены, мы переместимся на страницу Цены итд.
Шаг 13. Делаем эффект нажатой кнопки
Теперь нам предстоит на каждой из пяти страниц поменять одну картинку (кнопку без подчеркивания заменим на кнопку с подчеркиванием). Например, на первой странице Меню мы загружаем новую картинку и потом заменяем в коде адрес старой картинки на новый (подчеркнуто красным). Потом переходим на страницу Цены, загружаем картинку с подчеркнутыми Ценами и меняем в коде на адрес новой картинки. Потом заходим на страницы Как заказать, Техзадание и Вопросы и делаем туже самую операцию аналогичным образом.
Финал.
В итоге у нас получился эффект навигации, когда нажимаешь на ссылку меню и она становится активной. Но поскольку графическое оформление на всех страницах практически одинаковое, за исключением активной ссылки, то создается иллюзия навигации, хотя на самом деле осуществляется переход на другую страницу.
Меню оформленное таким образом не адаптировано под мобильные устройства. При уменьшении размера экрана картинки начинают съезжать одна под другую. Для того чтобы сделать адаптивный дизайн, нужно использовать таблицы для жесткой версти. Но это уже другая история и более продвинутая техника. А пока посмотрите на различные варианты графического формления меню.
Аннотация: Цель. Научиться применять элементы HTML (списки и гиперссылки), а также свойства CSS (модель отображения, псевдоклассы гиперссылок) для формирования системы навигации на веб-странице.
Разместить на странице меню с набором гиперссылок - одна из важных задач в практике веб-дизайнера. Чтобы не утомлять внимание пользователя просмотром всего набора, ссылки обычно группируют по категориям, и в основное меню включают только категории. Только при выборе категории должны отобразиться соответствующие ссылки (или подкатегории).
Как правило, такие динамические меню принято создавать средствами языка Javascript, позволяющего совершать любой сложности манипуляции с элементами веб-страницы. Однако, существует и решение на CSS - довольно простое и красивое, хотя и не любую фантазию дизайнера выполняющее. Рассмотрим его пошагово.
- Запустите Visual Web Developer (или Visual Studio) и создайте новый документ HTML.
- Внутри элемента head введите подходящий заголовок страницы.
- Введите открывающий тэг .
- Создайте в теле документа набор категорий в виде неупорядоченного списка (ul
), каждый элемент которого содержит список ссылок (см. пример).
- Популярные блюда
- Итальянская кухня
- Закуски
- Закуски
- Сласти
- Фрукты
- Подарки к празднику
- Юбилеи
- Малышам
- День рождения
- Поздравляем!!!
- Выбор по цене
- Меньше 1000 руб
- От 1000 до 1500 руб
- От 1500 до 2000 руб
- От 2000 до 3000 руб
- Дорого
- Фрукты и Овощи
- Сухофрукты и Орехи
- Корзины фруктов
- Горы фруктов
- Здоровая пища
- Без пестицидов
- Цветы
- Живые цветы
- Садовые цветы
- "Говорящие" цветы
- Корпоративные подарки
Названия ссылок и категорий придумайте самостоятельно. Важно, чтобы атрибут id внешнего списка имел значение MainMenu - далее ему будет назначен особый стиль по этому идентификатору).
- Популярные блюда
- В таблице стилей добавьте следующее правило:
#MainMenu > li { float: left; list-style-type: none; }
Отслеживайте изменения, происходящие с отображением документа, разделив окно редактора на представление исходного кода и конструктора. После применения указанного стилевого правила пункты внешнего списка (li ) расположились горизонтально (за счёт обтекания):
Рис. 7.1. - Пусть вложенные списки ссылок будут невидимыми (добавьте им свойство display:none;
) и появляются только при наведении курсора на название соответствующей категории. Следующее правило с селектором псевдокласса hover
имеет такой смысл: у списка (ul
), вложенного в пункт списка (li
), на который наведён указатель (:hover
) и который вложен в элемент с id=#MainMenu
, способ отображения следует сделать блочным (а не невидимым):
#MainMenu li:hover ul { display:block; }
Сохраните разрабатываемый документ, откройте его в браузере и убедитесь, что меню работает правильно.
- Принципиально механизм работает - осталась эстетическая сторона.
- Назначьте якорям любого уровня вложенности в меню (правило #MainMenu a ) желаемый цвет (color ), гарнитуру (font ), а также уберите подчёркивание (text-decoration ).
- Назначьте элементам списка категорий (правило #MainMenu > li ) фоновый цвет (background ), внутренний отступ (padding ) и рамку справа (border-right ).
- Назначьте элементам вложенного списка ссылок (правило #MainMenu li li ) такой же фоновый цвет, как и в списке категорий, а также небольшой отступ и рамку снизу. Кроме того, уберите маркировку списка (list-style-type ).
- Уберите у списка ссылок (правило #MainMenu li ul ) поля и отступы (margin и padding ).
Небольшой проблемой является то, что некоторые элементы списка категорий увеличиваются в ширину при наведении на них указателя. Это является следствием того, что ширина элемента списка определяется шириной всего содержимого - включая вложенный список. Однако если выбросить вложенный список из нормального потока и позиционировать его абсолютно, то его ширина более не будет влиять на ширину родительского элемента. Поэтому укажите для списка ссылок абсолютное позиционирование, а для элементов списка категорий - относительное. Проверьте в браузере. Затем уточните положение вложенного списка относительно его контейнера путём задания значения свойств left и top (не опускайте выпадающий список слишком низко, иначе он станет пропадать при попытке выбрать в нём ссылку).
Зачем нужно было позиционировать элементы списка категорий относительно? Уберите соответствующее правило, и вам всё станет ясно.
- Добавьте последний штрих: пусть элементы обоих списков при наведении указателя немного изменяют цвет фона (правило #MainMenu li:hover ).
Окончательный результат должен быть подобен следующему.
Liked:
26
Did not like: 12
В этой статье я покажу как написать простой плагин на jQuery, который будет строить из обычной HTML-разметки симпатичное динамическое меню. Первое, с чего мы начнём, - определимся, что именно будет делать плагин и какова наша цель. Итак:
- Плагин назовём dynamenu (от английского Dynamic Menu ). Короткое, неплохое название в духе jQuery. Динамика меню будет представлена изменением "прозрачности" пунктов меню и изменения позиции элемента меню при наведении мышью - пункт меню будет немного "уезжать" вправо.
- Структуру меню мы зададим статично в виде HTML-разметки. Это будет последовательный набор DIV-элементов. Внутри каждого div-а - гиперссылка с названием пункта меню. Для каждого div-a зададим атрибут class="dynamenu" для того, чтобы затем можно было обратится к набору div-ов и превратить их в меню.
- Для анимации меню будем использовать стандартный метод jQuery - animate(). Его вполне хватит для реализации задачи "динамичности". С помощью этого метода мы изменим свойства opacity и left в момент наведения мышью на элемент и убирания мыши с элемента меню.
Теперь определим, какие файлы нужно создать, чтобы проверить работу рассматриваемого примера. Вот они:
2. jquery.dynamenu.js - код плагина, помещенный в отдельный файл.
3. dynamenu.css - стиль нашего меню. Сюда помещаем весь CSS
Эти файлы с работающим меню можно будет найти в архиве, приложенном к статье. В конце статьи приведена живая демонстрация работы нашего меню. Обратите внимание, что в демонстрации вызов плагина размещен там же, где и сам код плагина. Это связано лишь с тем, что используемый нами механизм живых демо требует размещения JavaScript-кода в отдельном фрейме.
Начинаем писать плагин. Поехали!
1. Готовим HTML разметку страницы
Зададим самую простую разметку для нашего меню. Пусть это будут несколько пунктов меню для нашего будущего сайта:
Тут всё просто - 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:
- Сначала изменим всем div-блокам прозрачность, установив её в 0.4 пункта. Это позволит сделать каждый пункт меню сероватым. Потом, при наведении мышкой на него мы будем менять opacity до 1, таким образом создавая эффект выделения пункта меню
- Далее мы создадим обработчики "входа" мышью в область пункта меню и "выхода" из неё. При наведении на пункт меню будем менять стиль шрифта на полужирный и менять цвет фона на более тёмный. Также, при помощи стандартного метода jQuery animate мы сделаем эффект "выдвигания" меню немного вправо. При уходе мыши из области пункта меню просто будем возвращать все параметры в начальное состояние.
Вот, собственно, и вся логика. А теперь посмотрим, как это реализовать:
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.
Успехов в написании хороших плагинов! Комментарии, вопросы и отзывы всегда приветствуются;)
Слышали ли вы когда либо такое утверждение, что "нельзя сделать динамическое выпадающее меню исключительно на 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" выбирает "
Поиск
Мы можем оповещать вас о новых статьях,