Создание адаптивного меню

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 1.X
#1 21 февраля 2017 в 13:53
Привет, подскажите пожалуйста как сделать адаптивное меню для шаблона. Никак не могу разобраься.

Есть например код для вывода меню
<nav class="nav">
<ul>
<li class="current"><a href="">меню 1</a></li>
<li><a href="#">меню 2</a></li>
<li><a href="#">меню 3/a></li>
<li><a href="#">меню 4 Услуги</a></li>
<li><a href="#">меню 5</a></li>
</ul>
</nav>

К данному коду использую стили

/* меню */
.nav {
margin: 20px 0;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
*display:inline; /* ie7 */
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
}
.nav a:hover {
color: #000;
}
.nav .current a {
background: #999;
color: #fff;
border-radius: 3px;
}
/* меню справа */
.nav.right ul {
text-align: right;
}

/* меню по центру */
.nav.center ul {
text-align: center;
}
@media screen and (max-width: 600px) {
.nav {
position: relative;
min-height: 40px;
}
.nav ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #FAFAFA url(images/icon-menu.png) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.nav li {
display: none; /* скрыть все <li> пункты */
margin: 0;
}
.nav .current {
display: block; /* показывать только текущие активные <li> пункты */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
.nav .current a {
background: none;
color: #666;
}

/* при наведении на пункты меню */
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(images/icon-check.png) no-repeat 10px 7px;
}

/* адаптивное меню справа */
.nav.right ul {
left: auto;
right: 0;
}

/* адаптивное меню по центру */
.nav.center ul {
left: 50%;
margin-left: -90px;
}

}

Создаю шаблон — module_hmenu.tpl для меню, в него пишу вышенаписанный html код.


Но мне нужно вывести стандартное меню от инстант А не меню 1, меню 2, меню 3 и так далее.

Нашел документацию docs.instantcms.ru/manual/menu/special Но так и не смог вникнуть как ее применить к своему меню..

В стандартном шаблоне в шаблоне для меню есть только код -
<div>
{$mod.body}
</div>


Как его прицепить к моему меню, и прошу показать небольшой вывода меню с помощью моего кода, ато вообще ничего не понимаю)))
#2 21 февраля 2017 в 13:57
Наверно для начала надо
  1. <nav class="nav">
поменять на
  1. <div class="nav">
Потом можно тому меню что в коробке сделать стили Вашего меню а как по уму, пока не знаю, надо смотреть (ибо я нуб)
#3 21 февраля 2017 в 14:02


Наверно для начала надо
поменять на
Потом можно тому меню что в коробке сделать стили Вашего меню а как по уму, пока не знаю, надо смотреть (ибо я нуб)

Jestik

Да все равно ен понятно, может кто еще поможет. Класс то поменял, но сам вывод непонятен. scratch
#4 21 февраля 2017 в 14:08
Вам же на 1 ветку? А то ссылку на документацию второй привели
#5 21 февраля 2017 в 14:11


Вам же на 1 ветку? А то ссылку на документацию второй привели

Jestik

Да на 1, я на первую не нашел ссылку это как пример просто. laugh
#7 22 февраля 2017 в 02:17
\templates\_default_\modules\mod_menu.tpl вот файл вывода меню, здесь вам и нужно сделать изменения
#8 22 февраля 2017 в 09:31


\templates\_default_\modules\mod_menu.tpl вот файл вывода меню, здесь вам и нужно сделать изменения

Atid — Gorec

спасибо юужу смотреть))
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.