1 Отредактировано Илья (02.02.2018 12:30:43)

Тема: Меню [Решено]

Всем привет. Есть меню 3х уровненое. Выводиться следующим образом

        {foreach $dirlist as $dir}
        <li class="{if !empty($dir.child)} node{/if}" {$dir.fields->getDebugAttributes()}>
            <a href="{$dir.fields->getUrl()}">{$dir.fields.name}</a><i></i>
            {if !empty($dir.child)}
                {* Второй уровень *}
                <ul>
                    {foreach $dir.child as $subdir}
                    <li class="dropdown"><a href="{$subdir.fields->getUrl()}">{$subdir.fields.name}</a>
                        {if !empty($subdir.child)}
                        {* Третий уровень *}
                        <ul>
                            {foreach $subdir.child as $subdir2}
                            <li><a href="{$subdir2.fields->getUrl()}">{$subdir2.fields.name}</a></li>
                            {/foreach}
                        </ul>
                        {/if}
                    </li>
                    {/foreach}
                </ul>
            {/if}
        </li>
        {/foreach}


Вот что получается в итоге: http://joxi.ru/4Akl8xotM4kwDr

Как сделать, что бы второй уровень у которого нет, дочерних элементов, встал друг под дружку?
Вот так: http://priscree.ru/img/1a423f63d19e57.jpg

https://jsfiddle.net/9L008q8r/2/

Повысить оценку Понизить оценку

2

Re: Меню [Решено]

Ну здесь только очень костыльные решения приходят на ум. Прошу прощения, но код писать не буду.
Типа предварительно обойти уровень (foreach) и составить массив элементов имеющих детей и не имеющих, затем их вывести в разных дивах.

В одном диве у вас будут элементы второго уровня и третьего, в другом диве элементы второго уровня без детей, далее уже с помощью CSS можно эти два дива вывести друг за другом.

Или просто хард.кодом, если $subdir.fields.name == 'Детские лосины', то перед вывести <li class="nochild"><ul>,
если  $subdir.fields.name == 'Гольфы и носки', то после вывести </ul></li>, далее стилями приведите в порядок внешний вид, зацепка на класс .nochild - есть.

Повысить оценку Понизить оценку

3

Re: Меню [Решено]

Понял, что то оба варианта не особо радужные. А если сделать по примеру как сделано, в теме молодежная? Как там реализовано, что без дочерней категории уходит под категорию? http://joxi.ru/p274bd9i0XKvWA

Повысить оценку Понизить оценку

4

Re: Меню [Решено]

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

Повысить оценку Понизить оценку

Re: Меню [Решено]

Разработчики, можно ли сделать видео урок для  весртальщиков, как интегрировать многоуровневое меню, допустим вертикально с подкатегориями .
Вот пример http://www.sotmarket.ru/  каталог. 
Постоянно все спрашивают.

Повысить оценку Понизить оценку

6

Re: Меню [Решено]

Сделал следующим образом, решение взял из темы Современная
стили

/* Категории */
.catContainer {
    background: #6a7077;
    height: 0px!important;
}
/*.newcategory {
    float: left;
    margin: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}*/
ul.newcategory > li {
/*    margin-bottom: 0;*/
    position: static;
    transition: ease-in-out 0.2s;
}
/*.t-dropdown.open {
    background-color: rgba(0, 0, 0, 0.5);
}*/
@media (min-width: 768px) {
.newcategory>li {
    float: left;
}
}
.newcategory>li {
    position: relative;
    display: block;
}
.t-dropdown {
    transition: 0.3s;
}
ul.newcategory > li > a {
    background-color: #6a7077;
    color: #fff;
    letter-spacing: -0.05px;
    line-height: 28px;
    padding: 15px 20px 0px 0px;
    z-index: 21;
}
.newcategory .open>a, .newcategory .open>a:hover, .newcategory .open>a:focus {
/*    background-color: #eee;
    border-color: #337ab7;*/
    color: #77e0c3;
}
@media (min-width: 768px) {
  .newcategory>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}
.newcategory>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}
.newcategory>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
}
.open>a {
    outline: 0;
}
.t-dropdown.open > .t-dropdown-menu {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    display: block;
}
.t-dropdown-menu {
    display: none;
    background-color: #6a7077;
    box-shadow: none;
    top: 20px;
    left: 0;
    position: absolute;
    width: 100%;
    -webkit-transform: translateY(-115%);
    -moz-transform: translateY(-115%);
    -ms-transform: translateY(-115%);
    transform: translateY(-115%);
    transition: 0.3s;
    overflow: hidden;
    z-index: 20;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-left: -10px;
}
/*.container-fluid {
    max-width: 1540px;
}
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}*/
.t-nav-catalog-list__inner {
    margin: 30px 0;
}
.t-nav-catalog-list__scene {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}
.t-nav-catalog-list-block {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: block;
}
.t-nav-catalog-list-block {
    padding: 0px 10px;
/*    display: inline-block;*/
    margin: 0 0 10px;
    width: 100%;
}
.t-nav-catalog-list-block__header {
    color: #77e0c3;
    display: block;
    font-size: 18px;
    padding: 5px !important;
    transition: ease-in-out 0.1s;
}
.t-nav-catalog-list-block__list {
    list-style: none;
    padding: 0;
}
.t-nav-catalog-list-block__link {
    color: #ffffff;
    display: block;
        font-size: 14px;
    padding: 5px !important;
    transition: ease-in-out 0.1s;
}

Выод категорий

<div style="position: relative;">
    <ul class="newcategory">
        {hook name="catalog-blocks-category-category:list-item" title="{t}Доплнительные пункты меню, в меню каталога{/t}"}
        {foreach $dirlist as $dir}
        <li class="{if !empty($dir.child)} t-dropdown{/if}" {$dir.fields->getDebugAttributes()}>
            {* Первый уровень *}
            <a {$dir.fields->getDebugAttributes()} href="{$dir.fields->getUrl()}">{$dir.fields.name}</a>

            {if !empty($dir.child)}
                {* Второй уровень *}
                <div class="t-dropdown-menu">
                        <div class="t-nav-catalog-list__inner">
                            <div class="t-nav-catalog-list__scene">

                                {foreach $dir.child as $subdir}
                                    <div class="t-nav-catalog-list-block">
                                        <a {$subdir.fields->getDebugAttributes()} href="{$subdir.fields->getUrl()}" class="t-nav-catalog-list-block__header">{$subdir.fields.name}</a>

                                        {* Третий уровень *}
                                        {if !empty($subdir.child)}
                                        <ul class="t-nav-catalog-list-block__list">
                                            {foreach $subdir.child as $subdir2}
                                                <li><a {$subdir2.fields->getDebugAttributes()} href="{$subdir2.fields->getUrl()}" class="t-nav-catalog-list-block__link">{$subdir2.fields.name}</a></li>
                                            {/foreach}
                                        </ul>
                                        {/if}
                                    </div>
                                {/foreach}

                        </div>
                    </div>
                </div>
            {/if}
        </li>
        {/foreach}
        {/hook}
    </ul>
</div>

навешиваем класс

<script>
    $('.t-dropdown').hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
)
    </script>

Повысить оценку +1 Понизить оценку

Re: Меню [Решено]

Дмитрий пишет:

Разработчики, можно ли сделать видео урок для  весртальщиков, как интегрировать многоуровневое меню, допустим вертикально с подкатегориями .
Вот пример http://www.sotmarket.ru/  каталог. 
Постоянно все спрашивают.

В Маркетплейсе есть готовая тема, где такое меню реализовано. Яркая называется.

Повысить оценку Понизить оценку