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

Опубликовано: 01.09.2018

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

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

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

Название этого скрипта 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>

на

Шаг 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 это класс самой кнопки

Продолженние на следующей странице: 1 , 2 , 3