Скрипт для выпадающего меню при наведении.

[amaymon]

Вот рабочий код. если на странице в инструментах прописать display:block для .submenu отображается подменю.

Подскажите пожалуйста скрипт с помощью которого будет выводиться при наведении.

Скорее всего надо использовать mouseover/mouseout и задавать для .submenu hide/show, но у меня не вышло :с

<ul class="mainmenu" id="catalog_menu" data-behavior="menuModule">

{function name=categories_tree}
{if $categories}
{foreach $categories as $c}
    {if $c->visible}
        {if $c->level==1}
        <li data-handle="opensubmenu" class="mainmenu__item--sub">
            {* if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name|escape}">{/if *}
            <a class="mainmenu__link {if $category->id == $c->id}selected{/if}" href="catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape}</a>
            {if $c->subcategories}
                <div data-render="submenu" class="mainmenu__submenu">
                    <div class="mainmenu__submenu_column">
                        {categories_tree categories=$c->subcategories}
                    </div>
                </div>
            {/if}
        </li>
        {elseif $c->level==2}
            <span class="mainmenu__submenu_group {if $c@first}first{/if}">{$c->name|escape}</span>
            {if $c->subcategories}
                 <ul class="mainmenu__submenu_list">
                    {categories_tree categories=$c->subcategories}
                 </ul>
            {/if}
        {else}
            <li data="1" class="mainmenu__submenu_item">
                <a class="mainmenu__submenu_link" href="catalog/{$c->url}" >{$c->name|escape}</a>
            </li>
        {/if}
    {/if}
{/foreach}

{/if}
{/function}
{categories_tree categories=$categories}
</ul>

Есть такой вариант, но его надо подправить и подстроить под структуру меню на странице

{literal}
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script langugage="javascript" type="text/javascript">
    $(document).ready(function() {
    initMenu('.mainmenu ul');

function initMenu(id) {
    $(id + ' ul').hide().parent().addClass('subcat');
    if($(id).find('a.selected')) {
        $(id).find('a.selected').addClass('selected').parents('ul').show().parents('li').show();
    }
    else $(id + ' ul:first').show();
        $(id + ' a').click( function() {
        checkElement = $(this).next();
        /*if(checkElement.is('ul')) {
            if(!checkElement.is(':visible')) {
//                $(id + ' ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
            } else
                checkElement.slideUp('normal');
            return false;
        }*/
    });
}})
</script>
{/literal}

 

Изменено 16 октября, 2016 пользователем amaymon

[Kors]

Вариант Ваш странный и, скорее всего, кривой.

Например,  в нем видно сразу  бессмысленное действие  find('a.selected').addClass('selected').

 

Ищите в Сети примеры того, что нужно и пробуйте прикрутить к своему "варианту".

Если не выйдет,  просите специалистов (за денежку). Ибо вопрос не так прост, как может казаться. И к тому же у Вас, судя по {if $c->level==1}, какие-то свои доделки есть...

 

А вообще выглядит так, что накопировали что-то откуда-то без особого понимания...

[amaymon]

Вариант Ваш странный и, скорее всего, кривой.

Например,  в нем видно сразу  бессмысленное действие  find('a.selected').addClass('selected').

 

Ищите в Сети примеры того, что нужно и пробуйте прикрутить к своему "варианту".

Если не выйдет,  просите специалистов (за денежку). Ибо вопрос не так прост, как может казаться. И к тому же у Вас, судя по {if $c->level==1}, какие-то свои доделки есть...

 

А вообще выглядит так, что накопировали что-то откуда-то без особого понимания...

 

Благодарю Вас за ответ. В "варианте" есть бессмысленные действия потому что это просто пример целиком взятый из интернета.

А вот в верхнем коде ничего не накопировано, продуманно писала.. :с пока что мало опыта, буду стараться чтобы в будущем выглядело нормально

[chocolate_moles]

https://developer.mozilla.org/ru/docs/Web/CSS/:hover

[amaymon]

https://developer.mozilla.org/ru/docs/Web/CSS/:hover

Пробовала так

.mainmenu__item--sub:hover .mainmenu__submenu{
    display: block;
}

или же через скрипт

$(".mainmenu__item--sub").hover(function(){
    $(".mainmenu__submenu").css("display", "block");
});

но не вышло