导航菜单 link 修改了逻辑。每个 link 一种不同的颜色

Question

我希望有人能帮助我。

我在 Shopify 中建了一家商店，所以我的问题是液体和 SASS。

我正在尝试将每个嵌套导航菜单子项上的文本悬停颜色更改为不同的颜色，因此当您将鼠标悬停在类别上时（比方说）"Mexico" 它会变为绿色，但是如果类别 "USA" 变为蓝色。

我的客户是茶叶经销商，他对颜色代码非常着迷，因为他店里的所有东西都是颜色代码，所以他特意要求这个（数量不多，而且永远不会改变，所以不会对它们进行硬编码的问题）。我知道如何修改 CSS 并让它们全部成为一种 class 和一种颜色，但这不会削减它，我似乎无法用逻辑来做到这一点。

商店还不是 public，而是 https://tomas-te.myshopify.com/ password tomas

我试过几件事都没有成功：

根据集合句柄调用不同 classes 的 IF 循环（但这不会起作用，因为代码位于 HEADER 部分而不是集合模板中）。像这样修改每个 SCSS：

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

还有其他几种方法都没有成功。我确定一定有办法！而且我不介意它是否硬编码，只要每个 em 都是不同的颜色:)

谢谢！！！

Answer 1

以下内容应该有效，除非我遗漏了什么：

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;
}

你提供的代码是对的，但我觉得特异性太高了。

Answer 2

您可以使用 handle filter 将 link 标题用作导航 link 的 class 的一部分。例如：

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

然后您可以在主 SCSS 文件中使用 classes .nav-china 和 .nav-india 来自定义这些项目。

您还可以检查 link object 是否是 collection 并使用 collection.handle 甚至 collection.id 作为 [=27= 的一部分] classes。取决于多少hard-coded。

Answer 3

下面是导航栏下拉菜单的 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 文件中即可。

导航菜单 link 修改了逻辑。每个 link 一种不同的颜色

Nav Menu links modified with logic. Each link a different color

sass

liquid-layout

liquid

shopify