Хаки и Скрипты Next Generation CMS : Меню и навигация, HTML5 : Много-уровневое адаптивное меню

irbees2008 Опубликовано - 25 - марта Меню и навигация

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

Можешь почитать и вот эту статейку "Теги colgroup"

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

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