Suitcase. 5 самых нужных эффектов на jQuery в одном скрипте

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

В итоге я решил написать небольшой скрипт на jQuery в котором:

  1. Выпадающее многоуровневое меню
  2. Всплывающее окно без плагинов по таймеру с момента посещения страницы или по клику, а так же опция показа окна только один раз с помощью cookies
  3. Легендарный показать/скрыть блок на jQuery. (Легендарный потому, что запрос «Показать/скрыть блок» можно считать высокочастотным )))
  4. Якорь. Плавная прокрутка страницы к определенному месту по ссылке (GET) или прокрутка по клику
  5. Скрипт который фиксирует определенный блок при прокрутке страницы с определенного момента

Название этого скрипта suitcase. Просто захотелось как-то назвать набор 🙂

По традиции я буду рассматривать установку в шаблоны для WordPress, DLE и плюс общий метод.

 Шаг 1. Подключение всего необходимого

В архиве который Вы скачали будет две папки  css и js. Загрузите и подключите эти файлы к вашему сайту.

Шаг 2. Настройка классов

Откройте suitcase.js в блокноте или редакторе шаблонов/темы. В начале файлы вы увидите такие строки

var menu = $('.menu'); // класс меню
var showhidebox = $('.sbbclass'); // класс блока который надо показать/скрыть по клику
var popwindow = $('.popwindow'); // класс блока который будет всплывать по клику
var popwindowcookie = $('#popwindowcookie'); // ID блока который будет показыватся один раз по таймеру
var popbutton = $('.popbutton'); // класс кнопки при клике на которую будет всплывать блок
var fixedbox = $('.toppanel'); // класс панели которая будет фиксироватся при прокрутке
var scrollbt = $('.scrollbt'); // класс кнопки при клике на которую будет плавная прокрутка к нужному месту

К каждой строке есть комментарий и если Вы понимаете, что делать то дальше читать Вам нет смысла.

Простое выпадающее, многоуровневое меню.

Шаг 1 Определение класса меню

Если у Вас уже есть меню на сайте то следует определить класс вашего меню

Откройте свой сайт и откройте инструмент для веб-мастера. Найдите код вида:

<ul class="some_name">
   <li><a href="http://link.ru">Имя пункта в меню </a></li>
</ul>

some_name — это и есть класс Вашего меню.

Возможно у Вас будет вот такое код

<div class="some_name">
<ul>
   <li><a href="http://link.ru">Имя пункта в меню </a></li>
</ul>
</div>

В таком случае замените

<ul>

на

<ul class="super_menu">

Шаг 2 Подключение класса к скрипту

просто добавьте класс .menu к вашей меню. Выйдет вот так

<ul class="some_name menu">
   <li><a href="http://link.ru">Имя пункта в меню </a></li>
</ul>

При необходимости Вы можете менять класс по умолчанию открыв скрипт.

Шаг 3 Создание структуры выпадающего меню

Допустим у вас есть вот такой вот код меню

<ul class="super_menu">
   <li><a href="http://link.ru">Имя пункта в меню 1</a></li>
   <li><a href="http://link.ru">Имя пункта в меню 2</a></li>
   <li><a href="http://link.ru">Имя пункта в меню 3</a></li>
</ul>

Что бы добавить выпадающие пункты надо доработать структуру до такого вида

<ul class="super_menu">
   <li><a href="http://link.ru">Имя пункта в меню 1</a>
       <ul>
       <li><a href="http://link.ru">Подменю 1</a></li>
       <li><a href="http://link.ru">Подменю 2</a></li>
       <li><a href="http://link.ru">Подменю 3</a></li>
       </ul>
   </li>
   <li><a href="http://link.ru">Имя пункта в меню 2</a></li>
   <li><a href="http://link.ru">Имя пункта в меню 3</a></li>
</ul>

Это мы добавили пункты первого уровня. Что бы добавить второго надо сделать вот так

<ul class="super_menu">
   <li><a href="http://link.ru">Имя пункта в меню 1</a>
       <ul>
       <li><a href="http://link.ru">Подменю 1</a>
          <ul>
          <li><a href="http://link.ru">Подменю 1</a></li>
          <li><a href="http://link.ru">Подменю 2</a></li>
          <li><a href="http://link.ru">Подменю 3</a></li>
          </ul>
       </li>
       <li><a href="http://link.ru">Подменю 2</a></li>
       <li><a href="http://link.ru">Подменю 3</a></li>
       </ul>
   </li>
   <li><a href="http://link.ru">Имя пункта в меню 2</a></li>
   <li><a href="http://link.ru">Имя пункта в меню 3</a></li>
</ul>

Как вы наверно заметили, что для вставки новых пунктов надо вставить код

  <ul>
          <li><a href="http://link.ru">Подменю 1</a></li>
          <li><a href="http://link.ru">Подменю 2</a></li>
          <li><a href="http://link.ru">Подменю 3</a></li>
          </ul>

после

Имя </a>

где «Имя» это имя пункта при наведении на который будет выпадать под меню.

Обязательные стили применяться автоматически. Если вышло криво то пишите ссылку в комментариях я постараюсь пояснить по другому.

Вот и все.

Как создать показать/скрыть блок.

Тут еще проще

Шаг 1 Добавляем блок

Откройте шаблон главной страницы и в нужное место добавьте код

<div class="sbbclass">содержание спойлера</div>

Кнопка (показать скрыть) появится самостоятельно.

Можно задать текст который будет написан на кнопке после склика на которую будет показываться блок. Для это добавьте свойство «data-text:»Показать/скрыть блок»»» В итоге у вас получится

<div class="sbbclass" data-text="текст кнопки">содержание спойлера</div>

Подобных блоков может быть любое количество, менять класс не нужно.

Шаг 2 Оформление

Добавьте свой класс и напишите ему свойства которые необходимы. Например:

<div class="sbbclass newclass" data-text="текст кнопки">содержание спойлера</div>

Стили

.newclass {
border: 3px #000 solid;
}
.newclass .showhidebox_button { 
color:#000000;
}

.showhidebox_button это класс самой кнопки

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$