Jump to content

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


Recommended Posts

Вот рабочий код. если на странице в инструментах прописать 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}

 

Edited by amaymon
Link to post
Share on other sites

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

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

 

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

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

 

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

Link to post
Share on other sites

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

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

 

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

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

 

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

 

Благодарю Вас за ответ. В "варианте" есть бессмысленные действия потому что это просто пример целиком взятый из интернета.
А вот в верхнем коде ничего не накопировано, продуманно писала.. :с пока что мало опыта, буду стараться чтобы в будущем выглядело нормально
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...