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

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

irbees2008 irbees2008 Опубликовано - 25 - марта Меню и навигация
3326 - 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йту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [9]
  • Гости: [9]
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 32
  • Генерация страницы: 0.313сек
  • Потребление памяти: 4.939 Mb 
  •   яндекс.ћетрика