Плагины jQuery Slick Menu и Floating Menu для «плавающего» меню и не только…

Plagin jQuery Slick MenuЗдравствуйте уважаемые читатели сайта «Тестируем шаблон». Рада нашей новой встрече на блоге.

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

Плагины достаточно просто редактируются  и имеется удобная настройка их расположения (локализация) на странице сайта. Ну а начнем мы с привычной процедуры поиска и установки плагина на блог.  Ищем плагины через поисковик плагинов в админ-панели вашего блога: заходим в категорию настроек “Плагины”_”Добавить новый” и в окошко поиска вносим точное название плагина. Если через поисковик в админ-панели вы не смогли найти плагин, то скачать его можно по адресу: http://wordpress.org/plugins/jquery-slick-menu/-это для плагина jQuery Slick Menu и http://wordpress.org/plugins/floating-menu/-это для плагина Floating Menu соответственно.

После установки каждого из плагинов в админ-панели в категории настроек «Внешний вид»_»Виджеты» появляется виджет одноименный плагину, который только и нужно редактировать.

Виджет плагина  jQuery Slick Menu выглядит так:

Plagin jQuery Slick Menu 1

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

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

Второе поле -это название вашего раздвижного (выпадающего) виджета.

Третье поле-шесть вариантов на выбор, где будет располагаться ваше меню..

Четвертая  настройка-это возможность сместить ваш виджет выше или ниже, добавив определенное число (количество) пикселей…Подбирается опытным путем, так как нужно обязательно просмотреть на блоге, насколько гармонично виджет вписывается в дизайн блога.

Пятая настройка: выбираем скорость анимации, одну трех представленных: быстро, нормально и замедленно.

Plagin jQuery Slick Menu 2

Шестая настройка: при варианте  «  получается автоматически закрывающееся выпадающее меню.

Седьмая настройка: выбор цвета (12 вариантов), и один без темы, то есть меню будет вообще не выделенное цветом..

На фото ниже слева виден виджет выполненный плагином Floating Menu, а справа-плагином  jQuery Slick Menu.

Plagin jQuery Slick Menu

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

Теперь рассмотрим виджет плагина Floating Menu: настройки немного отличаются, но только благодаря тому, что виджеты обладают разной активностью. Если в случае с плагином  jQuery Slick Menu раздвижное меню, которое нужно самостоятельно открыть кликнув по нему мышкой, то в случае с плагином  Floating Menu есть открытие меню при помощи клика, но вот во второй настройке имеется функция «зависать», то есть просто подносишь мышку к меню и оно открывается, отодвигаешь-закрывается…Даже не знаю, какое из двух удобнее.

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

Далее идут три настройки локализации виджета: вверху-внизу, справа-слева, по центру.

Чуть ниже расположены две скорости: «плавания» и самого меню. Если честно, то я оставила пока их по умолчанию, так как все устраивало,

Plagin jQuery Slick Menu 3

тем более, что три следующие настройки отметить так:

 

 

 

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

Plagin jQuery Slick Menu 4

Пятнадцатая, заключительная настройка- это выбор стиля. Здесь цвета менее яркие, преобладают оттенки серого и черный…

Как выглядят настройки плагина в админ-панели и как ведет себя виджет на сайте (правда не все варианты) можно посмотреть в видеозаписи.

Как видно на фото, два этих плагина могут работать совместно. Здесь еще видно, что в этих плагинах можно использовать виджет не один раз. Виджет плагина Floating Menu на фото один, но поверьте, функции у них схожи.

Plagin jQuery Slick Menu 6

Еще одна версия   расположения плагинов.

Plagin jQuery Slick Menu 5

Теперь в буквально в двух словах: какой же из представленных плагинов тяжелее. Как ни странно, но более подвижный Floating Menu оказался легче  jQuery Slick Menu более чем в два раза…Теперь установив  jQuery Slick Menu, который мне понравился больше я начинаю подумывать, а не заменить ли его? :scratch:

Plagin jQuery Slick Menu8

Такой анализ на блоге вы можете делать самостоятельно после установки плагина   P3 (Plugin Performance Profiler).

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

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

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

О других интересных плагинах мы поговорим в следующих статьях рубрики, до новых встреч, с Вами была Юлия.

:heart: Расскажи другу, пусть тоже дизайном займется :good:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • LinkedIn
  • Digg
  • Blogger
  • Блог Li.ру
  • Сто закладок
  • RSS
  • Одноклассники

Об авторе Юлия

Меня зовут Юлия. Этот сайт я начала из-за моей проснувшейся и непонятной любви к рассмотрению настроек шаблонов. Сама я пока создавать темы на Вордпресс не умею, но надеюсь, что это когда-нибудь случится. Пишите в комментариях свои вопросы: я обязательно отвечу. Ну и замечания тоже приветствуются-))
Метки: . Закладка Постоянная ссылка.

24 комментария: Плагины jQuery Slick Menu и Floating Menu для «плавающего» меню и не только…

  1. Алексей пишет:

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

  2. Web-Кошка пишет:

    Юлия, здравствуйте! У Вас столько всего интересного, что у меня глаза всегда разбегаются! Немножко не в тему вопрос, но как у Вас сделаны на главной похожие записи после каждого анонса? Нигде и ни у кого не видела, да и у Вас не сразу заметила… Поделитесь секретом Happy .

    • Юлия пишет:

      Лариса, мне известны два плагина, которые выводят похожие записи после анонса на главную: это Yet Another Related Posts, о нем здесь http://test-shablon.ru/plagin-yet-another-related-posts-plugin-samye-tochnye-poxozhie-zapisi/, но его лучше использовать у кого настроены миниатюры на блоге, а плагин, который установлен у меня nrelate Related Content , о нем здесь http://test-shablon.ru/plaginy-nrelate-related-content-dlya-poxozhix-i-nrelate-most-popular-dlya-populyarnyx-soobshhenij/. Лариса, может Вы свежим взглядом окинув блог, подскажите: насколько у меня можно найти нужную информацию на блоге…Я вывела и картинки-баннеры на главную и слайдер, даже кнопочки две прицепила, а вопросы все равно возникают: где найти? Может поможете ? :rose:

      • Юлия пишет:

        И мне кажется мой комментарий к Вам в спам попал на новом блоге :cry:

      • Web-Кошка пишет:

        Юля, если можно, я Вам отвечу лучше по почте, только не прямо сейчас, а собравшись с мыслями — завтра, хорошо?

      • Web-Кошка пишет:

        Юля, коммент пропал мой предыдущий почему-то :(. Я обязательно отвечу, только на почту, хорошо, а не здесь? И не сегодня, а завтра — на свежую голову :)
        А коммент на новом блоге не видела — пойду проверять.
        Простите, что не сразу отвечаю — забыла подписаться на комменты.

        • Юлия пишет:

          Лариса, спасибо. Если даже не ответите, то ничего. Я тоже решила поучаствовать в акции «Троллим блоги» -думаю мне достанется не слабо, но хоть правду услышу ;-) Лариса, а ответы просто так, без подписки Вам на почту не приходят?

  3. mrs.interesno пишет:

    Юля, ну просто супер!
    Я эту статью в закладки отправлю.
    И, скорее всего, для другого сайта сотворю менюшку, воспользовавшись твоим подробным описанием и видеозаписями.
    Мне, как раз там нужно сделать специфичное меню.

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

    • Юлия пишет:

      Беата, а ты уже работаешь над новым блогом? Очень интересно будет посмотреть :rose:

      • mrs.interesno пишет:

        Юля, другой блог, вряд ли, представит интерес.
        Блог создается в помощь моему другу.
        Он занимается ремонтами квартир.
        Поэтому преследуется чисто финансовый интерес. :yes:

  4. golodniy-kot пишет:

    Люблю вордпресс за функциональность, но жутко не люблю вообще все что плавает по экрану, даже соц-кнопки. и особенно летающую птичку твитера.

  5. Артем пишет:

    Приветстую! Плагины это конечно хорошо, но почему нельзя все это стилями сделать? Хотя конечно выпадающее меню толкь через jQuery

  6. Максим пишет:

    Здравствуйте!!! Скажите пожалуйста, как вы закрепили выпадающие рубрики в меню ??? Мне надо реализовать такой же функционал, только разбить рубрики на несколько частей.

    • Юлия пишет:

      Максим, все делается с помощью произвольного меню. Делаете свое меню в админке : при этом элемент «Рубрики» без ссылки,а все остальные элементы: названия рубрик и подрубрик со ссылками и являются дочерними,а далее,если шаблон поддерживает произвольное меню устанавливаете в нужную область http://test-shablon.ru/nastrojka-vidzheta-proizvolnoe-menyu-dlya-dizajna/
      Если что-то не понятно, могу записать коротенькое видео и опубликовать на блоге.

  7. Максим пишет:

    Понятно. Шаблон поддерживает произвольное меню, но не делает выпадающее. То есть если я в рубрики вставляю ссылки на рубрики, то в меню будет отображаться только рубрики без выпадающего меню, дочернии категории вообще не будут отображаться. Вот хотел реализовать плагином Floating Menu, а оно плавающее.

    Вообще цель моя реализовать меню как на этих сайтах:
    _http://www.diabetes.org/ или _http://moidiabet.ru/
    и желательно чтобы первая кнопка была без ссылки, а дочернии уже активные, как у вас в меню рубрики.

  8. Максим пишет:

    Вы писали: Делаете свое меню в админке : при этом элемент «Рубрики» без ссылки.

    У меня не вставляется без ссылки. Жму добавить в меню, а элемент не добавляется

  9. Максим пишет:

    Спасибо Юлия с выводом рубрик в меню помогли. А вот для выпадающего списка я воспользовался плагином Dropdown Menu Widget

  10. Евгения пишет:

    Юличка, спасибо что ты есть! Спасибо за твои подробные статьи по применению различных плагинов. Давно хотела такую штучку себе на сайт установить, но не знала какой плагин это делает. Во многом благодаря тебе, Юля, мой сайт, надеюсь, становится более интересным для читателей.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

[+] Жми на плюс- Открой тайник- Чтоб прикольный СМАЙЛ возник!
:bye: 
:good: 
:negative: 
:scratch: 
:wacko: 
:yahoo: 
B-) 
:heart: 
:rose: 
:-) 
:whistle: 
:yes: 
:cry: 
:mail: 
:-( 
:unsure: 
;-)