• 2167
  • 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.Вот и все, ничего сложного,смотрим демо,скачиваем и пользуемся,пишем комментарии.

Можешь почитать и вот эту статейку "Слайдер с функцией увеличения изображения"

mistakes

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

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

Ваше мнение

TWIG -что это?
Результаты

----