Форум ReadyScript — Меню [Решено]

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

null@example.com (Владимир 1916) — Fri, 02 Feb 2018 10:26:10 +0000

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

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

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

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

null@example.com (Илья) — Fri, 02 Feb 2018 08:30:20 +0000

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

/* Категории */
.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;
}

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


    
        {hook name="catalog-blocks-category-category:list-item" title="{t}Доплнительные пункты меню, в меню каталога{/t}"}
        {foreach $dirlist as $dir}
        getDebugAttributes()}>
            {* Первый уровень *}
            getDebugAttributes()} href="{$dir.fields->getUrl()}">{$dir.fields.name}

            {if !empty($dir.child)}
                {* Второй уровень *}
                
                        
                            

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

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

                        
                    
                
            {/if}
        
        {/foreach}
        {/hook}

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

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

null@example.com (Дмитрий) — Thu, 01 Feb 2018 15:44:18 +0000

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

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

null@example.com (admin) — Thu, 01 Feb 2018 12:00:26 +0000

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

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

null@example.com (Илья) — Thu, 01 Feb 2018 05:29:07 +0000

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

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

null@example.com (admin) — Wed, 31 Jan 2018 13:53:10 +0000

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

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

Или просто хард.кодом, если $subdir.fields.name == 'Детские лосины', то перед вывести

, далее стилями приведите в порядок внешний вид, зацепка на класс .nochild - есть.

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

null@example.com (Илья) — Wed, 31 Jan 2018 07:18:08 +0000

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

        {foreach $dirlist as $dir}
        getDebugAttributes()}>
            {$dir.fields.name}
            {if !empty($dir.child)}
                {* Второй уровень *}
                
                    {foreach $dir.child as $subdir}
                    {$subdir.fields.name}
                        {if !empty($subdir.child)}
                        {* Третий уровень *}
                        
                            {foreach $subdir.child as $subdir2}
                            {$subdir2.fields.name}
                            {/foreach}
                        
                        {/if}
                    
                    {/foreach}
                
            {/if}
        
        {/foreach}

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

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

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