Добро пожаловать, дамы и господа! Используйте кнопки соцсетей, чтобы добавить меня в друзья.

Новое меню навигации Ajax в стиле Mashable

ajax (1)Привет, дорогие друзья! Это навигационное меню в стиле прошлого дизайна Mashable, создан специально для платформы Blogger. Автор замечательного виджета меню Ajax Harish, представил его ещё в конце 2012 года. Я пробовал такое меню установить в демонстрационный блог ещё в то время , но ничего не получилось (плохо значит пробовал).

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

menu_AJAX
Раскрывающиеся меню для Blogger

Как установить меню навигации Ajax в Blogger

Заходим в панель управления Blogger - Шаблон - Изменить HTML, находим тег ]]></b:skin>. Так как некоторые читатели (особенно женский пол) затрудняются с поиском этого тега, показываю на картинках. Нажмите на черную стрелку рядом с тегами <b:skin> - </b:skin> , для того чтобы раскрыть стили CSS установленные в вашем шаблоне:

teg_teg
Нажмите на черную стрелку рядом с тегами

Затем, после открытия стилей, прокрутите шаблон вниз и Вы увидите искомый тег:

teg_teg1
Вот мы его и нашли

Чуть выше найденной строчки вставьте стиль для меню:

Как Вы наверняка знаете, здесь можно поменять цвет фона меню под ваш дизайн блога, шрифт и так далее. Переходим к следующей этапу. Подключаем библиотеку jQuery (если у вас библиотека уже подключена к блогу, пропустите этот шаг) к Blogger. Найдите тег </head> и  чуть ниже добавьте скрипт библиотеки jQuery:

skript_skript
Добавляем библиотеку jQuery и код Javascript

Так же вставьте ниже этой строчки </head> следующий код Javascript:

Следующий шаг завершающий. Здесь прошу вас  быть особенно внимательным, если Вы, что то сделаете не правильно, меню не будет работать.  Я со своей стороны попробую объяснить более подробно (как обычно делаю). Зайдите в панель управления Blogger- Дизайн - Добавить гаджет HTML/JavaScript:

gadget
Добавить гаджет

В поле гаджета вставьте HTML код:

q=ЯРЛЫК если не будет работать - его надо кодировать здесь. Потом только вставлять. Если возникнут проблемы пожалуйста обращаемся в комментарии.

Всего доброго, Сергей - блог Школа Bloggera

Комментарии

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

    • Привет,Ирина!Странно,у меня такое не происходит.Попробую помочь.

    • Привет, Ирина!Попробуйте так.Зайдите в Шаблон -> Настроить -> Дополнительно -> Добавить CSS и вставьте этот код:
      .tabs-outer, .tabs .widget ul {overflow: visible;}
      .tabs .widget ul li {position: relative; z-index: 1000;}
      .tabs .widget ul li a:nth-child(n+2) {position: absolute; bottom: -100%; left: 0; z-index: 2000; width: 20em; border-radius: 0; display:none;}
      .tabs .widget ul li a:nth-child(3) {bottom: -200%;}
      .tabs .widget ul li a:nth-child(4) {bottom: -300%;}
      .tabs .widget ul li a:nth-child(5) {bottom: -400%;}
      .tabs .widget ul li a:nth-child(6) {bottom: -500%;}
      .tabs .widget ul li a:nth-child(7) {bottom: -600%;}
      .tabs .widget ul li a:nth-child(8) {bottom: -700%;}
      .tabs .widget ul li a:nth-child(9) {bottom: -800%;}
      .tabs .widget ul li a:nth-child(10) {bottom: -900%;}
      .tabs .widget ul li:hover a {display: inline-block; box-shadow: none; background: rgba(0,61,118,.95);}
      .tabs .widget ul li:hover a:hover {color: rgba(66,170,255,1);}

  • У Вас написано «Найдите тег и ПЕРЕД ним добавьте скрипт библиотеки jQuery:», а на рисунке код вставлен ПОСЛЕ. Как правильно?

  • Добрый день! А выпадающее меню у меня не выпадает. Ну никак не хочет. Все делаю, как написано. Уже два дня маюсь на тестовом.

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

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

Решите задачку: *