4094
- 0
Привет ,сегодня я присмотрел интересное меню для сайта.и сейчас мы поставим его себе на сайт.
Итак приступим.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
,распаковываем и заливаем папки css,js и font в папку вашего шаблона.
2.Открываем файл main.tpl и в хеад добавляем скрипты и стили нашего меню,а также подключаем шрифт.
Код:
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/menu_bubble.css" />
<script src="{{ tpl_url }}/js/snap.svg-min.js"></script>Код:
<div class="menu-wrap">
<nav class="menu">
<div class="icon-list">
<a href="#"><i class="fa fa-fw fa-star-o"></i><span>Закладки</span></a>
<a href="#"><i class="fa fa-fw fa-bell-o"></i><span>Оповещения</span></a>
<a href="#"><i class="fa fa-fw fa-envelope-o"></i><span>Сообщения</span></a>
<a href="#"><i class="fa fa-fw fa-comment-o"></i><span>Комментарии</span></a>
<a href="#"><i class="fa fa-fw fa-bar-chart-o"></i><span>Аналитика</span></a>
<a href="#"><i class="fa fa-fw fa-newspaper-o"></i><span>Просмотр</span></a>
</div>
</nav>
<button class="close-button" id="close-button">Закрыть меню</button>
<div class="morph-shape" id="morph-shape" data-morph-open="M-7.312,0H15c0,0,66,113.339,66,399.5C81,664.006,15,800,15,800H-7.312V0z;M-7.312,0H100c0,0,0,113.839,0,400c0,264.506,0,400,0,400H-7.312V0z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 800" preserveAspectRatio="none">
<path d="M-7.312,0H0c0,0,0,113.839,0,400c0,264.506,0,400,0,400h-7.312V0z"/>
</svg>
</div>
</div>
<button class="menu-button" id="open-button">Открыть меню</button>
Код:
<script src="{{ tpl_url }}/js/classie.js"></script>
<script src="{{ tpl_url }}/js/main4.js"></script>Можешь почитать и вот эту статейку "jQuery самый популярный javascript фрэймворк — это факт"
