• 1587
  • 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Привет ,сегодня я присмотрел интересное меню для сайта.и сейчас мы поставим его себе на сайт.
Итак приступим.
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>
3.Добавляем в тело нашей страницы само меню
Код:
<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>
4.И последнее перед закрытием тега body добавляем скрипты
Код:
<script src="{{ tpl_url }}/js/classie.js"></script>
<script src="{{ tpl_url }}/js/main4.js"></script>
5.Вот и все пишем,спрашиваем если что не понятно.

Можешь почитать и вот эту статейку "Не много о таблицах"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element