ANIMATED SIDEBAR
Опубликовано 09.12.2017 в 00:12
Анимированный выдвижной блок со списком меню. Функциональность данной реализации заключается в том, что при клике по иконке, будет выдвигаться скрытый блок. Вместо списка меню, вы можете использовать что угодно, выводить там любую информацию которую вы пожелаете.
Вы можете изменить нужный вам стиль блока и кнопки, а также изменить цветовую гамму (смотрите видеообзор)
Установка 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. Сохраняем и радуемся, вам остается только его настроить под себя.