Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Анимированный выдвижной блок с меню при клике (Animated Sidebar)
Дата добавления: 15.05.2017 - 06:26
Категория: Переключатели / Навигация
Добавил: Buger
Количество просмотров: 290
Количество комментариев: 0
Размер файла: 953.0Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Анимированный выдвижной блок со списком меню. Функциональность данной реализации заключается в том, что при клике по иконке, будет выдвигаться скрытый блок. Вместо списка меню, вы можете использовать что угодно, выводить там любую информацию которую вы пожелаете.
Вы можете изменить нужный вам стиль блока и кнопки, а также изменить цветовую гамму (смотрите видеообзор)
1. Загрузить папку /anim_sidebar/ ( вместе с ее содержимым ) в файловый менеджер сайта. Можно или даже нужно использовать FTP клиент (например: FileZilla)
2. Между тегами нужно подключить стили
Вставляем данный код:
3. Теперь в верхней части (или там где у вас находится меню), вставляем код для вывода этого меню.
4. Сохраняем и радуемся, вам остается только его настроить под себя.
Смотрите Видео по настройке
Ниже перечисленные параметры, изменяются в коде в данной строке.
Расположение:
Цветовая гамма:
Анимация:
Иконка меню:
Вы можете изменить нужный вам стиль блока и кнопки, а также изменить цветовую гамму (смотрите видеообзор)
Установка Animated Sidebar
1. Загрузить папку /anim_sidebar/ ( вместе с ее содержимым ) в файловый менеджер сайта. Можно или даже нужно использовать FTP клиент (например: FileZilla)
2. Между тегами
Код
<head>
...
</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">
<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>
<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
