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

Можешь почитать и вот эту статейку "теги и атрибуты HTML5"

mistakes

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

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

Ваше мнение

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

----