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

Много-уровневое адаптивное меню

irbees2008 irbees2008 Опубликовано - 25 - марта Меню и навигация
3271 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Сегодня показываю как поставить это меню на ваш сайт.Для мобильной версии добавлено несколько строчек javascript кода. Для лучшего юзабилити пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по - font-awesome.css - со шрифтами-иконками.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. , распаковываем и заливаем в папку с шаблоном.
2.Само меню представляет из себя неупорядоченный список его добавляем туда где хотим видеть,обычно это файл main.tpl:

Код:
<nav>
<ul class="menu">
<li>
<a href="#"><i class="icon-home"></i>Главная</a>
<ul class="sub-menu">
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
<li>
<a href="#"><i class="icon-user"></i>О нас</a>
</li>
<li>
<a href="#"><i class="icon-camera"></i>Портфолио</a>
<ul class="sub-menu">
<li>
<a href="#">Подменю 1</a>
</li>
<li>
<a href="#">Уровень 3 меню</a>
<ul>
<li><a href="#">Подменю 4</a></li>
<li><a href="#">Подменю 5</a></li>
<li><a href="#">Подменю 6</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#"><i class="icon-bullhorn"></i>Блог</a>
</li>
<li>
<a href="#"><i class="icon-envelope-alt"></i>Контакты</a>
</li>
</ul>
</nav>

3.В head файла main.tpl добавляем подключение стилей,шрифтов для иконок ну и скрипты
Код:
<link rel="stylesheet" href="{tpl_url}/css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="{tpl_url}/css/font-awesome.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>
<script src="{tpl_url}/js/menu.js" type="text/javascript"></script>
Если jquery уже подключен второй раз подключать не надо.
4.Вот и все, ничего сложного,смотрим демо,скачиваем и пользуемся,пишем комментарии.

Можешь почитать и вот эту статейку "Вертикальный Слайдер"

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

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

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

Обновленное

Теги

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

Статистика

  • Caйту: 3297 дней
  • Новостей: 539
  • Комменты: 252
  • Зарегистрированно : 569
  • Онлайн всего: [7]
  • Гости: [6]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 34
  • Генерация страницы: 0.206сек
  • Потребление памяти: 4.938 Mb 
  •   яндекс.ћетрика