Помощь Simpla CMS Помогите сделать разворачивающиеся меню категории

Добрый день! Подскажите код для наведения на категорию чтобы выезжали под категории Simpla 2.2.4 тема Infinity?
Вот, мой
<!-- Меню каталога -->

{* Рекурсивная функция вывода дерева категорий *}
{function name=categories_treetop}
{if $categories}
<ul class="nav">
{foreach $categories as $c}
{* Показываем только видимые категории *}
{if $c->visible}
<li{if $category->id == $c->id} class="current"{/if}>
<a href="catalog/{$c->url}" data-category="{$c->id}">{if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name}"> <span>{/if}{$c->name}</span></a>
</li>
{/if}
{/foreach}
</ul>
{/if}
{/function}
{categories_treetop categories=$categories}

<!-- Меню каталога (The End)-->
 
у меня тоже не получается меню сделать=(
 
могу скинуть меню на css чисто, ссылки сами прописывать будете
 
Посмотрите в теме Шаблоны я выкладывал модуль разворачивающего меню на аяксе (без перегрузки страницы)
 
Подскажите пожалуйста уважаемые Господа!
Сделал меню, но при наведении на невидимые части, они становятся видимыми(подкатегории и каткгории). т.е. если навести курсор справа на область, где должна появляться подкатегория, то она всё равно появится!
Как это исправить?
нужно чтобы выезжала подкатегория при наведении на родительскую категорию!
Вот ссылка:

Для просмотра ссылки Войди или Зарегистрируйся


Вот код:

<!-- Меню каталога -->
<div id="cssmenu">

{* Рекурсивная функция вывода дерева категорий *}
{function name=categories_tree}
{if $categories}
<ul>
{foreach $categories as $c}
{* Показываем только видимые категории *}
{if $c->visible}
<li>
{if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name}">{/if}
<a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a>
{categories_tree categories=$c->subcategories}
</li>
{/if}
{/foreach}
</ul>
{/if}
{/function}
{categories_tree categories=$categories}
</div>
<!-- Меню каталога (The End)-->

брал по моему с этого форума! извините, если что не так.
 
Последнее редактирование:
ВОТ CSS

/* Сброс стилей */
#cssmenu > ul {
list-style: none;
margin: 10px 0 0 0 ;
padding: 0;
vertical-align: baseline;
line-height: 1;
}
/* Контейнер меню */
#cssmenu > ul {
display: block;
position: relative;
width: 250px;
-moz-box-shadow: 0 0 0px rgba(0,0,0,0.5); /* Для Firefox */
-webkit-box-shadow: 0 0 0px rgba(0,0,0,0.5); /* Для Safari и Chrome */
box-shadow: 0 0 0px rgba(0,0,0,0.5); /* Параметры тени */
}
/* Элементы списка содержащие ссылки */
#cssmenu > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 100%;
}
/* Основные стили ссылок */
#cssmenu > ul li a {

/* Позиционирование */
display: block;
position: relative;
margin: 0;
border-top: thick #fff;
border-bottom: thick #ffffff;
padding: 11px 20px;

/* Типографика */
font-family: Helvetica, Arial, sans-serif;
color: #1B1B1B;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
font-size: 16px;
font-weight: 300;
text-shadow: 2px 2px 2px #FFFFFF;

/* Фон и эффекты */
background: url(../images/aqua.png) ;

}
/* Скругление углов первой ссылки меню и субменю */
#cssmenu > ul li:first-child > a {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: 0;
}
/* Скругление углов последней ссылки меню и субменю */
#cssmenu > ul li:last-child > a {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
}
/* Стили ссылок при наведении */
#cssmenu > ul li a:hover,
#cssmenu > ul li:hover > a {
color: #ffffff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
background: #3b7cff;
background: -webkit-linear-gradient(#3b7cff, #085aff);
background: -moz-linear-gradient(#3b7cff, #085aff);
background: linear-gradient(#3b7cff, #085aff);
border-color: transparent;
}
/* Индикатор наличия субменю */
#cssmenu > ul .has-sub > a::after {
content: '';
position: absolute;
top: 0px;
top: 16px;
right: 10px;
height: 0px;
/* Создаём стрелки используя свойство border */

border: 4px solid transparent;
border-left: 4px solid #292929;
}
/* Такая же стрелка, только темнее для создания эффекта тени */
#cssmenu > ul .has-sub > a::before {
content: '';
position: absolute;
top: 17px;
right: 10px;
width: 0px;
height: 0px;
/* Создаём стрелку используя свойство border */

border: 4px solid transparent;
border-left: 4px solid #292929;
}
/* Меняем цвет стрелки при наведении курсора */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
border-left: 4px solid #fff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
border-left: 4px solid rgba(0, 0, 0, 0.25);
}
/* Субменю */
#cssmenu > ul ul {
position: absolute;
left: 100%;
top: 0px;
padding-left: 5px;
opacity: 0;
width: 200px;
-moz-box-shadow: 0 0 0px rgba(0,0,0,0.5); /* Для Firefox */
-webkit-box-shadow: 0 0 0px rgba(0,0,0,0.5); /* Для Safari и Chrome */
box-shadow: 0 0 0px rgba(0,0,0,0.5); /* Параметры тени */
/* Эффект затухания */

-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
#cssmenu > ul ul li a {
font-size: 16px;
}
/* Показываем субменю при наведении курсора на родительскую ссылку */
#cssmenu > ul li:hover > ul {
top: 0;
opacity: 1;
z-index: 0.4;
}
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху