Создаём административную панель на Bootstrap, CSS(LESS) и JavaScript. #5

0
4673

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

Многие разработчики административных шаблонов реализуют у себя всплывающий правый сайдбар, сделаем такой-же. Сайдбар должен появляться справа, а левый сайдбар будет сдвигаться в сторону. Воспользуемся библиотекой от автора takien, которая называется jPushMenu. Скачайте архив и распакуйте содержимое папки jPushMenu-master в новую папку jpushmenu в директории js.

Теперь подключаем стили в шапке и файл javascript в футере:

Открываем файл js/main/main.js и внизу дописываем строчку, для инициализации меню:

Открываем index.html и добавляем меню после всех элементов разметки, а также кнопку для быстрого доступа к этому меню, исходный вид файла index.html:

Добавим ряд правил в файлы стилей:

  1. В файл top-nav.less

     
  2. В файл general.less

     
  3. Создаём файл toggle-menu.less (не забудьте подключить его в файле style.css) с содержимым

     

Отлично, получилось следующее:

Кнопка быстрого доступа:

Вы можете посмотреть исходники на GitHub, — Lesson 5. Всего доброго!

Предыдущий урок.

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя