Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

"Нестандартная" навигация при помощи jQuery

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Dima (you can also view the original English article)

Почти каждый веб-сайт использует обычные концепции навигации, к которым мы все привыкли. Через некоторое время это может стать довольно скучным, особенно для дизайнеров, которые преуспевают в творчестве. Хотя имитация док-станции OS X и стеков не нова, она не распространена.


Несколько дней назад Джеффри объявил о потенциальном конкурсе "нестандартно" на ThemeForest, чтобы побудить авторов надеть свои творческие шляпы и разработать полезные шаблоны с креативным дизайном "нестандартно". В этом уроке я расскажу о нескольких способах сделать это с помощью навигации в доках и стеках в стиле OS X.

Источники и ресурсы

Прежде чем мы начнем, я хочу поблагодарить пару парней, которые пришли на помощь, когда услышали мой призыв о помощи в Twitter. Стив обновил сценарий стеков Harley, используя jQuery 1.2.6 для использования текущей версии 1.3.2, а Рей Банго из команды jQuery помог мне исправить ошибку. Они оба приступили к выполнению задачи через пару минут после моей просьбы о помощи через Twitter. Спасибо огромное, ребята! *Аплодисменты* :-D

Dock and Stack Preview

Первоисточник

Быстрые заметки

Эти скрипты опираются на jQuery 1.3.2. Приведенные примеры совместимы со всеми основными браузерами, включая IE6, и легко обеспечивают постепенное снижение производительности, если JavaScript отключен или недоступен.

jQuery OS X Dock #1 (Горизонтальный)

Первый док, который мы построим, использует плагин jQuery Fisheye Menu, упомянутый выше. Он довольно легкий (~ 7 Кбайт с зависимостями), но главная причина, по которой я хотел использовать его, заключалась в том, что он невероятно плавный, без заиканий. Посмотреть демо.

jQuery Fisheye Menu Dock

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

Это отличный пример «нестандартных» концепций на веб-сайтах и ​​предоставляет интерактивный и интересный интерфейс.

Обязательные файлы (я объединил плагин Fisheye и iutil.js в демонстрационных файлах).

  • jQuery 1.3.2
  • Интерфейс: плагин Fisheye Menu
  • Интерфейс: iutil.js (зависимость)

HTML

Мы обернем наши изображения и заголовки в ссылки и поместим их в содержащий div. Затем мы завернем все это в другой содержащий div для корректной работы.

Обратите внимание, что я поместил заголовки в теги span, чтобы мы могли их стилизовать, а также позволить плагину скрывать/показывать их по мере необходимости.

CSS

С помощью CSS мы разместим док там, это необходимо на странице. Мы не можем использовать фиксированное позиционирование с этим плагином, иначе он не будет работать должным образом.

Я также поместил немного дополнительного CSS в заголовок страницы ниже CSS, включенного выше. Я обернул его в тэги noscript на случай, если у посетителя не будет включен или доступен JavaScript, это будет удобная навигация. Я должен отметить, что это не будет проверяться, потому что тег noscript недопустим в разделе заголовка, даже если он работает во всех текущих браузерах. ;-)

JavaScript

Мы добавим наши файлы JavaScript, начиная с jQuery 1.3.2. Файл fisheye-iutil.min.js представляет собой комбинацию плагина Fisheye и его зависимого файла iutil.js. Мы создадим последний файл и добавим в него наш JavaScript, необходимый для инициализации дока.

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

Это все, что нужно сделать! :-D

jQuery jqDock

jQuery OS X Dock #2 (По вертикали)

Горизонтальную док-станцию ​​было легко использовать на веб-сайтах. Они, вероятно, являются наиболее распространенным типом, используемым в настоящее время в сети, поэтому давайте попробуем что-то другое. Мы могли бы получить немного больше "нестандартно", если бы мы делали навигацию по вертикали.

Эта док-станция опирается на плагин jQDock jqDock. Его размер примерно 10 КБ, поэтому он на несколько КБ больше, чем в предыдущей версии, но это немного. Недостаток этого плагина в том, что он не такой гладкий, как док плагина Fisheye, хотя он все же очень плавный и, безусловно, подходящий для использования. Этот плагин также не имеет проблем с фиксированным позиционированием. Посмотреть демо.

HTML

Мы поместим наши изображения в неупорядоченный список и обернем их в ссылки. Как и в случае с последним плагином, мы обернем все в содержащий div. Когда мы инициализируем плагин, мы будем использовать здесь «ul».

На этой док-станции вы заметите, что у нас нет заголовков, обернутых в теги span. Вместо этого этот плагин будет смотреть на тег "title", установленный для каждого изображения, и таким образом создавать заголовки (если он включен в настройках плагина). Это делает разметку немного проще, но также делает заголовки менее настраиваемыми.

CSS

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

Для стилизации заголовков мы можем использовать класс ".jqDockLabel". Нам также не нужно будет включать какие-либо дополнительные стили, чтобы он по-прежнему мог использоваться с отключенным JavaScript. Это может быть не очень красиво но функционально.

JavaScript

Мы добавим библиотеку jQuery, как и в предыдущий док, а также плагин.

Мы инициализируем док и устанавливаем несколько параметров для его настройки. Вы можете прочитать документацию по этим настройкам, посетив сайт, указанный в разделе источников в начале руководства для jqDock. Что я хочу отметить здесь,так это вариант продолжительности. Это время для увеличения анимации в миллисекундах. Приятно иметь возможность изменять скорость продолжительности, но, кажется, она немного запинается, что я ненавижу.

Вы можете легко изменить расположение док-станции и надписей, а также начальный размер значков и некоторые другие параметры. Что мне не понравилось в этом плагине, так это то, что он увеличился до полного размера иконки. Предыдущий плагин дает вам возможность изменить размер, до которого он увеличивается. Это все, что нужно сделать!

jQuery OS X Stacks Example

jQuery OS X Stack and Drop Stack

Это, вероятно, мой любимый стиль навигации из трех, показанных в этом уроке. Он очень легкий (~ 1 КБ) и является действительно креативным и "нестандартным" способом навигации по сайту. Может быть немного неудобно иметь навигацию в правом нижнем или левом углу окна браузера, но это, безусловно, будет креативно и сэкономит много места. Посмотреть демо.

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

HTML

HTML так же прост, как и два примера док-станции. Мы поместим все в div и разместим все наши изображения и заголовки, которые заключены в ссылки, в неупорядоченный список.

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

CSS

Мы разместим основной контейнер и удостоверимся, что изображение корзины имеет более высокий z-индекс, чем неупорядоченный список, чтобы все оставалось позади. Также обратите внимание, что я использовал для изображения корзины 35px отступа. Это предотвращает нажатие на значки позади корзины, так как изображение корзины короче, чем значки. Если вы измените значок корзины на что-то больших размеров, вам также придется изменить отступы.

Заголовки, заключенные в теги span, настроены на display:none, поэтому они будут скрыты при загрузке страницы.

JavaScript

Мы разместим JavaScript в своем собственном файле, так как он больше, чем пара строк. Когда щелкают изображение вне неупорядоченного списка (корзины), оно использует функцию переключения jQuery для анимации элементов списка и установки их положения на основе горизонтальной начальной точки + .75px, затем умноженной на 2. Это дает нам красивую изогнутую пружину движения пунктов списка.

Вы можете изменить .75px или множитель (2), чтобы настроить, величину изгиба.

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

И вот оно у тебя! Простая и гибкая стековая навигация в стиле OS X для вашего сайта. :-D Этот скрипт также находится в процессе преобразования в более простой в использовании плагин, так что следите за этим.

Заключительные мысли

Надеемся, что эти примеры дадут вам некоторые идеи, чтобы проявить креативность и выходить за рамки при разработке вашего следующего веб-сайта или шаблона. Как видите, jQuery - это мощная библиотека, которая позволяет легко воплотить наши идеи в жизнь. В связи с возможным предстоящим конкурсом, основанным на нестандартных разработках, вы можете начать работу над некоторыми идеями, чтобы представить их в ThemeForest. Если вы не отправляли файлы раньше, это очень просто и это может достойно вашего внимания! :-)

Я хочу поблагодарить Рея (из команды jQuery) и Стива за быстрый ответ на мой призыв о помощи в Twitter. Это яркий пример того, насколько полезным может быть Twitter для дизайнеров и разработчиков. Если вы еще не подписаны на Theme Forest или Nettuts в Twitter, сейчас самое время сделать это. Эти оба веб-сайта с кучей фантастической информации. Вы также можете подписаться на меня в Твиттере, если хотите.

  • Подпишитесь на нас в Twitter или подпишитесь на RSS-канал NETTUTS, чтобы получать ежедневные обзоры и статьи о веб-разработке.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.