Хаки и Скрипты Next Generation CMS

Выводим интересный вариант меню для вашего сайта

irbees2008 irbees2008 Опубликовано - 16 - декабря Меню и навигация
3664 - 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.Вот и все пишем,спрашиваем если что не понятно.

Можешь почитать и вот эту статейку "Выводим название категории через TWIG но не через news.table.tpl"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 4452 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 668
  • Онлайн всего: [4]
  • Гости: [3]
  • Поисковики: [1] Google
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 2.663сек
  • Потребление памяти: 5.164 Mb 
  •   Яндекс.Метрика