Форум пользователей Impera CMS
Impera CMS - отличный движок для лёгкого создания интернет магазина.
Обладает невероятным количеством функций, необходимых в онлайн торговле.

Выпадающее меню the1988net как на aquaria

Следить
Главная
03:58
26 янв
#
?
Максим написал:

Подскажите, как нужно модифицировать модуль the1988net Catalog tabs, чтоб он работал как сейчас на aquaria.net.ua. Интересно именно выпадание diva с категориями 2го и 3го уровня вложенности при клике на родительскую категорию (а еще лучше при наведении мышью).

Очень модное нынче меню для больших каталогов. А ля розетка.

18:19
26 янв
#
?
Андрей написал:

Меню а ля розетка. Юзайте модуль categories.htm. Поможет корневые категории побить на строки. Типа меню, под ним еще строка меню, под ним еще строка и т.д. Числом категорий в строке меню управляет параметр listing_separator_capacity. Listing_separator разметку как закрыть верхнюю строку и открыть следующую.

Вложенные категории поможет побить на колонки псевдо таблицы. Числом подкатегорий в колонке управляет sublisting_separator_capacity. Sublisting_separator содержит разметку как закрыть колонку слева и открыть следующую справа.

{include file = '../../common_parts/AIMatrix/categories.htm'

         items = $categories|default:false

         namepath = ''
         maxlevel = 2
         maxcount = 256

         filter = []

         opentag = '<div id="categories">'

             box_opentag = ''

                 listing_opentag = '<div class="row">
                                        <ul>'

                     link_opentag = '<li>'

                         a_id = ''
                         a_class = ''
                         a_active_class = 'active'
                         a_highlighted_class = 'highlight'
                         a_target = ''
                         a_text_maxsize = 256
                         a_text_top_maxsize = 256

                         sublisting_opentag = '<div class="table">
                                                   <div class="column">
                                                       <ul>'

                             sublink_opentag = '<li>'
                             sublink_closetag = '</li>'

                             sublisting_separator_capacity = 15
                             sublisting_separator = '</ul>
                                                 </div>
                                                 <div class="column">
                                                     <ul>'

                         sublisting_closetag = '</ul>
                                            </div>
                                        </div>'

                     link_closetag = '</li>'

                     listing_separator_capacity = 7
                     listing_separator = '</ul>
                                      </div>
                                      <div class="row">
                                          <ul>'

                 listing_closetag = '</ul>
                                 </div>'

             box_closetag = ''

         closetag = '</div>'}

Если меню бить на строки не нужно, то listing_separator = '' и все.

Стили колонок пример

/* сброс */

#categories * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: relative;
}

/* категории в строку */

#categories li {
    display: block;
    float: left;
    line-height: 40px;
    padding: 0 10px;
}

/* подкатегории построчно */

#categories .table li {
    float: none;
    line-height: normal;
    padding: 0;
}

/* псевдо таблицы */

#categories .table {
    display: none;
    left: 0;
    position: absolute;
    width: 1200px;
}

/* таблицы появляются под мышью */

#categories li:hover .table {
    display: block;
}

/* колонки */

#categories .column {
    float: left;
    padding: 10px;
    width: 200px;
}

/* колонки разделим полосой */

#categories .column + .column {
    border-left: 1px solid silver;
}

/* активная категория */

#categories .active {
    color: red;
}

/* подсвеченная категория */

#categories .highlight {
    background: lime;
}

Короче стилист настроит если что.

18:40
26 янв
#
?
Андрей написал:

OK. Спасибо что выровняли. То боялся код криво выглядеть будет. На форуме очень плохо устроено редактирование сырцов. Только html кнопкой нормально можно сделать и руками много копипастить нужно.

Хотел еще раскрасить не нашел где это делается.

19:08
26 янв
#
Разработчик написал:

Раскрасил. Цветами попытался выделить уровни так, чтобы люди поняли, как (из каких тегов) формируется конечная разметка меню категорий согласно иерархии.

Спасибо вам за подготовку хорошего примера.

Кстати, у Розетки maxlevel = 3, но тогда стилисту придется доделать стили для #categories .table .table, чтобы категории третьего уровня вложенности были списком, но не колонками.

И кстати еще, на третий уровень невозможно задать другой sublisting_separator_capacity, тоже будет разделять по 15 штук в "колонке". Просто колонки здесь будут (должны быть) стилями "склеены" в один список.

19:34
26 янв
#
?
Андрей написал:

Спасибо.

По третьему уровню ну и что стоит ограничить длину списка с помощью css? Например не более 7 категорий.

/* убираем абсолютные позиции с таблиц */

#categories .table .table {
    position: relative;
    width: auto;
}

/* колонки не плавают */

#categories .table .table .column {
    float: none;
    width: auto;
}

/* видна только первая колонка */

#categories .table .table .column + .column {
    display: none;
}

/* категории от 8 и далее скрываем */

#categories .table .table .column > li + li + li + li + li + li + li + li {
    display: none;
}
17:20
27 янв
#
?
Максим написал:

Ребята, я просто удивлен! Огромное спасибо за готовое решение. Нигде я не встречал подобной поддержки!

Осталось стили нарисовать. Дело для меня не сложное.

Сказка!

23:01
27 янв
#
?
Александр написал:

В этом и фигня Имперы. Они нахаляву раздают готовые решения. Поэтому с ними не работает ни один фрилансер. Где уж тут заработать?

Меню в стиле розетки как пить дать от 70$ сверстать стоит. Ан нет слили тему даром.

23:27
27 янв
#
?
Барбус написал:

# Александр
# как пить дать от 70$ сверстать стоит. Ан нет слили тему даром.

Ну не хотят работать и не надо. Хороший заказчик всегда заплатит за работу. А фрилансеру, выжидающему момент и потому не озвучивающему цену да желание сделать, наверно остается мусолить о паленой теме.

# Андрей
# Поможет корневые категории побить на строки. Типа меню, под ним еще строка меню, под ним еще строка и т.д.

А что это за меню такое, побитое на строки? Пример в студию.

23:37
27 янв
#
?
Александр написал:

Смотри какой умный. Я первый раз здесь что ли? Хоть озвучивай хоть польку спляши. Следом всё равно появится перл какого-нибудь идиота альтруиста. И все озвучки накроются тазом.

00:27
28 янв
#
Разработчик написал:

Барбус, вы просили пример - 100bud.com - смотрите, 12 корневых категорий выставлены в 3 строки по 4 категории в каждой. Здесь было использовано listing_separator_capacity = 4. Параметр sublisting_separator был равен пустой строке, так как не стояла задача деления вложенных ветвей на части (колонки). Также использовался параметр maxlevel = 3, чтобы вывести меню категорий не глубже третьего уровня.

Максим, всегда пожалуйста. Будут еще вопросы - обращайтесь.

Андрею еще раз спасибо за хороший пример и подсказки по CSS.

13:38
04 фев
#
?
Максим написал:

В итоге сделал отдельный горизонтальный блок с выводом ссылок на категории 1го уровня и подключил к ним отдельные выводы категорий 2го и 3го уровня с применением отдельных стилей к каждому из них. Причина - например крайнее правое выпадающее меню уезжает за границы окна. Таким образом отдельными стилями получил возможность смещать и отдельно настраивать вывод каждого выпадающего списка. Кстати на том же 100bud.com присутствует эта проблема. Крайнее правое нижнее меню при выпадании уезжает за пределы окна.

11:09
04 апр
#
?
Руслан написал:

Сделал нечто похожее на мегаменю только с помощью CSS, используя стандартный вывод категорий из шаблона (без подключения модулей из common_parts).

Теперь при наведении курсора на верхний уровень меню (который виден всегда), появляется слой, в котором отображаются все подкатегории в виде дерева.

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

Подскажите, плиз, как можно модифицировать код вывода категорий, чтобы класс "selected" назначался сразу двум элементам списка: текущему и его родителю верхнего уровня?

Вот мой код:

<!-- Меню каталога ==============================================/ -->
<div id="catalog_menu">
    {strip}

        {* <!-- если есть массив категорий --> *}
        {if !empty($categories)}

            {* <!-- объявляем функцию вывода дерева категорий --> *}
            {function name="categories_tree"}
                <ul class="topnav">
                    {foreach $categories as $c}

                        {* <!-- если непустая или в настройках разрешено показывать и пустые --> *}
                        {if !empty($c->products_count) || empty($settings->catalog_menu_noempty)}

                            {* <!-- если разрешена и не закрыта от чужих или это авторизованный пользователь --> *}
                            {if !empty($c->enabled) && (empty($c->hidden) || !empty($user->user_id))}

                                <li>
                                    {if !empty($c->image)}
                                        <img src="{$c->image|escape}" alt="{$c->name|default:''|escape}">
                                    {/if}

                                    {* <!-- ссылка (категория может быть выделена в админке) --> *}
                                    <a {if !empty($c->highlighted) && ($category->category_id|default:0 == $c->category_id|default:'')}
                                              class="selected highlighted"
                                          {elseif !empty($c->highlighted)}
                                              class="highlighted"
                                          {elseif $category->category_id|default:0 == $c->category_id|default:''}
                                              class="selected"
                                          {/if} href="{$site}{$c->url_path}{$c->url}" {if $smarty.session.admin|default:"" == "admin"}
                                                                                                {if !empty($settings->catalog_menu_adminedit)}
                                                                                                    tooltip="category" category_id="{$c->category_id}"
                                                                                                {/if}
                                                                                            {/if}>
                                        {$c->name|default:'Без названия!'}
                                    </a>

                                    {* <!-- если имеет вложенные категории --> *}
                                    {if !empty($c->subcategories)}
                                        {categories_tree categories = $c->subcategories}
                                    {/if}
                                </li>
                            {/if}
                        {/if}
                    {/foreach}
                </ul>
            {/function}

            {* <!-- вызываем функцию вывода дерева категорий --> *}
            {categories_tree categories = $categories}
        {/if}
    {/strip}
</div>
17:58
29 апр
#
?
Максим написал:

Подскажите пожалуйста как сделать меню что бы категории были активны как здесь cop.com.ua/catalog/Videoregistratory-i-platy т.е. не постоянно все раскрыты а только раскрыта основная подкатегория

18:20
29 апр
#
?
Максим написал:

Извинияюсь что спамлю, подскажите как сделать такое же меню слева в колонке (с минусами разварачивающимися в заголовке) ??? aquaria.net.ua/morskaya-akvariumistika/morskaya-sol

18:55
29 апр
#
Разработчик написал:

Меню плюс-минусом В стандартный код вывода дерева категорий над рекурсивной прорисовкой вложенных категорий добавляем кликабельные якоря (теги <a class="switch plus" onclick=""></a>), на них вешаем некий скрипт switchBranch, скрывающий-открывающий ul контейнер категории, ближайшей к этому якорю. В дополнительных стилях все ul контейнеры вложенных категорий по умолчанию делаем скрытыми и стилизуем кнопочку якоря, чтобы смотрелась как нам нужно.

Пример кода дерева категорий с внесенными изменениями:

<div id="categories">
    {function name = 'categoriesTree'}
        <ul>
            {foreach $cats as $item}
                <li>
                    <a href="{$site}{$item->url_path}{$item->url}">
                        {$item->name}
                    </a>
                    {if !empty($item->subcategories)}
                        <a class="switch plus" onclick="return switchBranch(this)"></a>
                        {categoriesTree cats = $item->subcategories}
                    {/if}
                </li>
            {/foreach}
        </ul>
    {/function}
    {categoriesTree cats = $categories}
</div>


Теперь скрипт отработки кликов по якорю "плюс-минус".

<script type="text/javascript">
    function switchBranch ( el ) {
        if (jQuery(el).hasClass('plus')) {
            jQuery(el).removeClass('plus').next('ul').first().show();
        } else {
            jQuery(el).addClass('plus').next('ul').first().hide();
        }
        return false;
    }
</script>


Теперь дополнительные стили. Здесь кнопку делаем за счет текстовых символов + и -.

<style type="text/css">
    /* кнопка "плюс-минус" */
    #categories .switch {
        background: #eee;
        color: #080;
        content: '-';
        display: block;
        float: right;
        margin: 0 0 0 5px;
        padding: 0;
        line-height: 20px;
        height: 20px;
        width: 20px;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }

    /* кнопка когда в состоянии "плюс" */
    #categories .switch.plus {
        background: #eee;
        color: #800;
        content: '+';
    }

    /* по умолчанию вложенные категории скрыты */
    #categories ul ul {
        display: none;
    }
</style>


Если можете нарисовать иконки размером 20x20 пикселей, тогда дополнительные стили будут такими:

<style type="text/css">
    /* кнопка "плюс-минус" */
    #categories .switch {
        background: transparent url('../images/switch-minus.png') center center no-repeat;
        display: block;
        float: right;
        margin: 0 0 0 5px;
        padding: 0;
        height: 20px;
        width: 20px;
        text-decoration: none;
        cursor: pointer;
    }

    /* кнопка когда в состоянии "плюс" */
    #categories .switch.plus {
        background: transparent url('../images/switch-plus.png') center center no-repeat;
    }

    /* по умолчанию вложенные категории скрыты */
    #categories ul ul {
        display: none;
    }
</style>


Если "плюс-минус" должен быть только на самых верхних категориях, тогда добавим стиль:

<style type="text/css">
    /* скрываем кнопки подкатегорий */
    #categories ul ul .switch {
        display: none;
    }
</style>


Или в коде вывода дерева категорий сделать вывод кнопок только для категорий верхнего уровня, для чего в функция вывода ввести контрольный параметр например level. Тогда код станет таким:

<div id="categories">
    {function name = 'categoriesTree' level = 1}
        <ul>
            {foreach $cats as $item}
                <li>
                    <a href="{$site}{$item->url_path}{$item->url}">
                        {$item->name}
                    </a>
                    {if !empty($item->subcategories)}
                        {if $level == 1}
                            <a class="switch plus" onclick="return switchBranch(this)"></a>
                        {/if}
                        {categoriesTree cats = $item->subcategories level = $level + 1}
                    {/if}
                </li>
            {/foreach}
        </ul>
    {/function}
    {categoriesTree cats = $categories}
</div>

Написание ответа

Перед публикацией рекомендуется использовать Предпросмотр, чтобы увидеть конечный вид сообщения.


Обратите внимание! Для противодействия спаму новые посты форума проявляются с задержкой от нескольких минут, пока не пройдут модерацию.


Хостинг для сайта

Хостинг для интернет магазина

Svai.net

Украина
г. Черкассы
5+ Заказать

TutHost.ua

Украина
г. Киев
Заказать

Mirohost.net

Украина
г. Киев
? Заказать

HyperHosting.com.ua

Украина
г. Винница
i подробнее Заказать

Agava.ru

Россия
г. Москва
Заказать

Ukraine.com.ua

Украина
г. Киев
5 Заказать
Импераготовасотрудничатьс провайдерами Важно Учтите Этот список перечисляет лишь некоторых хостинг-провайдеров, у которых существуют специальные тарифные планы для интернет магазинов, а сам список не означает, что другие провайдеры чем-то хуже.

Существующие в списке оценки по 5-бальной шкале не должны учитываться при выборе, так как носят субъективный характер и касаются соотношения цена-качество-скорость только для самых дорогих тарифных планов.

Демо Главная Хронология Соглашение Материалы Контакты