Навигационные ссылки в меню изменены с помощью logi c. Каждая ссылка разного цвета - PullRequest
Новая
       54

Навигационные ссылки в меню изменены с помощью logi c. Каждая ссылка разного цвета

0 голосов
/ 29 апреля 2020

Я надеюсь, что кто-то может помочь мне с этим.

Я строю магазин в Shopify, так что мой вопрос будет с жидкостью и SASS.

Я пытаюсь изменить цвет наведения текста на каждом из моих вложенных дочерних элементов меню навигации на свой цвет, поэтому при наведении указателя мыши на категорию (например, «Мексика») она меняется на зеленый, но если Категория "США" меняется на синий.

Мой клиент, дистрибьютор чая, действительно радует c цветовыми кодами, так как все в его магазине имеет цветовую кодировку, поэтому он специально попросил об этом (их не так много, и они никогда не изменятся, так что это не будет проблемой, чтобы жестко их кодировать). Я знаю, как изменить CSS и сделать так, чтобы все они были одного класса и одного цвета, но это не сработает, и я не могу сделать это с помощью logi c.

Магазин не пока не опубликовано c, но https://tomas-te.myshopify.com/ пароль tomas

Я безуспешно пробовал пару вещей:

Если l oop вызывать разные классы в зависимости от на дескрипторе коллекции (но это не будет работать, так как код находится в разделе HEADER, а не в шаблоне коллекции). Модифицируя каждый S CSS следующим образом:

header.site-header nav.site-nav__link ul > li > a[href="/collections/china"]{ color:#f397cc }

И пару других способов без успеха. Я уверен, что должен быть способ! И я не против, если это жестко закодировано или нет, если каждый из них имеет разный цвет:)

Спасибо !!!

Ответы [ 3 ]

0 голосов
/ 29 апреля 2020

Вы можете использовать handle фильтр , чтобы использовать заголовок ссылки как часть класса для ваших навигационных ссылок. Например: 

<a href="{{ link.url }}" class="site-nav__dropdown-link nav-{{ link.title | handle }}">{{ link.title }}</a>

Затем вы можете использовать классы .nav-china и .nav-india в вашем основном файле S CSS для настройки этих элементов.

Вы также можете проверить link возразите, является ли это коллекцией, и используйте collection.handle или даже collection.id как часть классов ссылок. Зависит от того, насколько жестко это может быть.

0 голосов
/ 29 апреля 2020

Ниже приведен SCSS код для вашего выпадающего меню. 

header{
    &.site-header{
        .site-nav{
            .inner-nav-containers{
                .site-nav__item{
                    &.site-nav--has-dropdown{
                        .site-nav__dropdown{
                            li{
                                a{
                                    transition: color 0.3s linear;
                                    &:hover{
                                        &[href="/collections/china"]{
                                            color: #f397cc;
                                        }
                                        &[href="/collections/india"]{
                                            color: green;
                                        }
                                        &[href="/collections/usa"]{
                                            color: red;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Поместите вышеуказанный код в файл theme.scss.liquid, он будет работать.

0 голосов
/ 29 апреля 2020

Следующее должно работать, если я что-то упустил: 

header.site-header .site-nav__dropdown  a[href="/collections/china"]:hover {
  color:#f397cc;
}

header.site-header .site-nav__dropdown  a[href="/collections/india"]:hover {
  color:#17cc39;
}

Код, который вы указали, находится на правильном пути, но я чувствую, что специфичность слишком высока.

...