Ваша корзина пуста
Форма входа

Бесплатный раздел

Вы здесь: Главная страница » Файлы » Переключатели / Навигация
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Анимированный выдвижной блок с меню при клике (Animated Sidebar)

Дата добавления: 15.05.2017 - 06:26
Добавил: Buger
Количество просмотров: 2.5k
Количество комментариев: 0
Размер файла: 953.0 Kb
Рейтинг материала: 0.0 / 0
Анимированный выдвижной блок с меню при клике (Animated Sidebar)
БЕСПЛАТНО
Скачать файл с сервера
рейтинг 0.0
/
голосов 0
Анимированный выдвижной блок со списком меню. Функциональность данной реализации заключается в том, что при клике по иконке, будет выдвигаться скрытый блок. Вместо списка меню, вы можете использовать что угодно, выводить там любую информацию которую вы пожелаете.
Вы можете изменить нужный вам стиль блока и кнопки, а также изменить цветовую гамму (смотрите видеообзор)

Установка Animated Sidebar


1. Загрузить папку /anim_sidebar/ ( вместе с ее содержимым ) в файловый менеджер сайта. Можно или даже нужно использовать FTP клиент (например: FileZilla)

2. Между тегами
Код
<head>

...

</head>
нужно подключить стили

Вставляем данный код:
Код
<link href="/anim_sidebar/font.css" rel="stylesheet">
<link href="/anim_sidebar/font-awesome.min.css" rel="stylesheet">
<link href="/anim_sidebar/animate.css" rel="stylesheet">
<link href="/anim_sidebar/style.css" rel="stylesheet">


3. Теперь в верхней части (или там где у вас находится меню), вставляем код для вывода этого меню.
Код
<div class="ea-sidebar ea-left-side ea-color-blue ea-animate-0 ea-round-corner-0">
  <a href="#" class="ea-icon"><i class="fa fa-bars"></i></a>
  <div class="ea-logo">
  <div class="nav_name">Меню навигации</div>
  </div>
  <div class="ea-list-item">
  <ul>
  <li class="active"><a href="#"><i class="fa fa-bell"></i>Панель управления</a></li>
  <li><a href="#"><i class="fa fa-book"></i>Профиль</a></li>
  <li><a href="#"><i class="fa fa-cogs"></i>Установки</a></li>
  <li><a href="#"><i class="fa fa-bug"></i>Портфолио</a></li>
  <li><a href="#"><i class="fa fa-users"></i>О нас</a></li>
  <li><a href="#"><i class="fa fa-laptop"></i>Обратная связь</a></li>
  <li><a href="#"><i class="fa fa-code"></i>Art-uCoz.ru</a></li>
  </ul>
  </div>
</div>


4. Сохраняем и радуемся, вам остается только его настроить под себя.

Смотрите Видео по настройке

Ниже перечисленные параметры, изменяются в коде в данной строке.
Код
<div class="ea-sidebar ea-left-side ea-color-blue ea-animate-0 ea-round-corner-0">

Параметры для настроек.


Расположение:
  • ea-left-side
  • ea-right-side

Цветовая гамма:
  • ea-color-blue
  • ea-color-red
  • ea-color-green
  • ea-color-pink
  • ea-color-plum
  • ea-color-orange

Анимация:
  • ea-animate-0
  • ea-animate-1
  • ea-animate-2
  • ea-animate-3
  • ea-animate-4
  • ea-animate-5
  • ea-animate-6
  • ea-animate-7
  • ea-animate-8

Иконка меню:
  • ea-round-corner-1
  • ea-round-corner-2
  • ea-round-corner-3
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: