База знаний Weberia.ru

Скрыть категорию товаров из меню

Тюкин Владимир
1
Последнее обновление: 8 января 2019

Добрый день! Подскажите пожалуйста, возможно ли как-то скрывать меню второго уровня в определенных пунктах меню?

6 ответов

  • 1

    Если вы хотите для каждого элемента меню прописывать свой код, то вот инструкции (но помните, что код нужно переписывать, при каждом изменении порядка меню):

    Всё нужно прописывать в блок flatty.user_style
    КОД:

    /* 
      Скрыть всплывающее меню ВТОРОГО ЭЛЕМЕНТА МЕНЮ 
      data-count начинается с нуля, поэтому учитывайте это смещение
    */
    @media only screen and (min-width: 1024px) {
     .nav.navbar-nav.onlyCatsWide li[data-count="1"]:hover a:before,
     .nav.navbar-nav.onlyCatsWide li[data-count="1"]:hover a:after,
     .nav.navbar-nav.onlyCatsWide li[data-count="1"]:hover > ul { display:none !important; }
    }

    Но на тач устройствах (ширина начинается с 1024 (ipad в ландшафтной ориентации)) его нужно всё равно показать, т.к. родительская категория не "кликабельная"
    Поэтому оборачиваем код в media query

  • 1

    В настройках необходимых категорий отметьте галочку Скрытая категория.

  • 1

    Нет Владимир, Вы меня не верно поняли. Мне нужно отображение категории. Но что бы в меню она не отображалась.

  • 1

    Это единственный способ скрыть категорию из меню. =(

  • 1

    Владимир, прошу прощения за назойливость :) Посмотрите пожалуйста, средствами css не получится решить мою проблему?

    С помощью средств CSS можно обратится к любому элементу по его порядковому номеру в списке

    например Вы хотите изменить отображение дочерних элементов 2-го пункта меню

    это обратившись к "селекторам"

    ul.base-menu.tree > li:nth-child(2)

    * Элемент li второй в списке (в Вашем случае это пункт меню "обои по бренду")

    ul.base-menu.tree > li:nth-child(2)>a

    * дочерний элемент второго пункта - ссылка

    ul.base-menu.tree > li:nth-child(2)>ul

    * дочерний элемент второго пункта - блок содержащий пункты 2-го уровня

    ul.base-menu.tree > li:nth-child(2)>ul>li

    * пункты 2-го уровня вложенности

    ul.base-menu.tree > li:nth-child(2)>ul>li>ul

    * контейнер для пунктов 3-го уровня вложенности


    что бы изменить отображение контейнера и его содержания для 2-го пункта меню пропишите в пользовательских стилях следующее

    @media only screen and (min-width: 993px){

    ul.base-menu.tree{
    position:relative;
    /*изменяем позиционирование контейнера горизонтальных пунктов меню*/
    }
    ul.base-menu.tree > li:nth-child(2){
    position:static;
    /*изменяем позиционирование 2-го пункта меню, что бы вложенный блок с пунктами 2-го уровня не наследовал ширину*/
    }
    ul.base-menu.tree > li:nth-child(2)>ul{
    width:100%;
    /*задаем ширину контейнеру для пунктов 2-го уровня в 100%*/
    }
    ul.base-menu.tree > li:nth-child(2)>ul>li{
    width:25%;
    /*ширину каждого пункта в 25% что бы получилось 4 колонки*/
    display:inline-block;
    /*изменяем тип отображения - что бы пункты разместились друг рядом с другом по горизонтали*/
    }
    ul.base-menu.tree > li:nth-child(2)>ul>li>ul{
    display:none;
    /*скрываем контейнер с элементами 3-го уровня*/
    }

    }


    * таких условий (псевдо-класс) может содержаться несколько в сеекторе

    например на скриншоте видно что есть дочерняя категория "Atlas" которая является 3-й по порядку. К ней можно обратится с помощью следующего селектора

    ul.base-menu.tree > li:nth-child(2)>ul>li:nth-child(3)>a{
    color:red;

    }

    тут я изменял в старом шаблоне вид дочерних подкатегорий. Не подойдет данный способ для шаблона "Формула успеха"?

  • 1

    О! Владимир, то что нужно! Только как скрыть подкатегории второго уровня?

    • @media only screen and (min-width: 1024px) {
      .nav.navbar-nav.onlyCatsWide li[data-count="1"] > ul a:before,
      .nav.navbar-nav.onlyCatsWide li[data-count="1"] > ul a:after,
      .nav.navbar-nav.onlyCatsWide li[data-count="1"] > ul > li > ul.dropdown-menu { display:none !important; }
      }
      1

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите
Вверх