Публикации
Не указал
Отправлено
При создании дополнительных меню указываем обязательно имя переменной в шаблоне так как оно необходимо в коде.
Будем делать по моему примеру.
Я сделаю 3 дополнительных меню с переменными: header1, header2, header3.
Далее мы заходим в шаблон редактора тем - HTML, в нем находим сл.блок:
<!-- Верхний блок навигации -->
<div class="containerin" id="top-menu">
<ul class="pad-box cont620" id="mainmenu">
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
<div class="clr"></div>
</div>
<!-- end Верхний блок навигации -->
и изменяем до сл.вида(не забываем что у меня 3 доп.меню, у вас кол-во может быть другим):
<!-- Верхний блок навигации -->
<div class="containerin" id="top-menu">
<ul class="pad-box cont620" id="mainmenu">
<li><a href="ссылка" title="На главную">Главная</a>
<ul>
{% FOR menu %}
{% FOR header1 %}
{% FOR links %}
<li><a href="{menu.header1.links.URL}" {% IF menu.header1.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header1.links.TITLE %}title="{menu.header1.links.TITLE}"{% ENDIF %}>{menu.header1.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
</li>
<li><a href="ссылка" title="На главную">Инфа</a>
<ul>
{% FOR menu %}
{% FOR header2 %}
{% FOR links %}
<li><a href="{menu.header2.links.URL}" {% IF menu.header2.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %}>{menu.header2.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
</li>
<li><a href="ссылка" title="На главную">О нас</a>
<ul>
{% FOR menu %}
{% FOR header3 %}
{% FOR links %}
<li><a href="{menu.header3.links.URL}" {% IF menu.header3.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header3.links.TITLE %}title="{menu.header3.links.TITLE}"{% ENDIF %}>{menu.header3.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
</li>
</ul>
<div class="clr"></div>
</div>
<!-- end Верхний блок навигации -->
далее заходим в шаблон maincsstemplate.css и в самом низу добавляем код сл.вида:
#mainmenu{
position:relative;
}
#mainmenu li{
display: block !important;
float: left;
}
#mainmenu li ul {
display: none;
left: 0;
width:200px;
position: absolute;
top: 39px;
z-index:99;
}
#mainmenu li:hover ul{display:block;}
#mainmenu li ul li{
width:200px;
padding:10px;
border-bottom:1px solid #000;
background:#999;
}
#mainmenu li ul li a{
font: bold 12px/20px Helvetica,Tahoma,Arial,sans-serif;
padding: 0px;
background:none;
}
#mainmenu li ul li a:hover{
background:none;
}
далее находим в том же шаблоне:
#top-menu {
height: 40px;
overflow: hidden;
}
и меняем на:
#top-menu {
height: 40px;
}
Итого у нас получается 3 пункта меню у каждого из них имеется выпадающий список из дополнительных блоков меню.
Далее уже можете стилизовать пункты меню и сам список как вам необходимо, инфу по стилям читаем и изучаем тут: http://htmlbook.ru/css
Отправлено
Отправлено
Дерзайте, штука полезная, многим пригодится.
Отправлено
Отправлено
Отправлено
Отправлено
