Привет ,сегодня я присмотрел интересное меню для сайта.и сейчас мы поставим его себе на сайт.
Итак приступим.
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>Можешь почитать и вот эту статейку "Красивая реализация стилей для ссылок в тексте"
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
