Nav菜单链接已用逻辑修改。每个链接使用不同的颜色

问题描述 投票:0回答:3

我希望有人可以帮助我。

我正在Shopify中建立商店,所以我的问题是液体和SASS。

我正在尝试将每个嵌套导航菜单子项上的文本悬停颜色更改为不同的颜色,因此,当您将鼠标悬停在类别上时(例如说),“墨西哥”将变为绿色,但是如果类别是“美国”变为蓝色。

我的客户是一位茶商,真的很喜欢颜色编码,因为他商店里的所有东西都是颜色编码的,所以他特别要求这样做(数量不多,而且永远都不会改变,因此对于硬编码)。我知道如何修改CSS并将它们全部变成一种类和一种颜色,但是那样就不会削减它,而且我似乎无法做到逻辑。

该商店尚未公开,但https://tomas-te.myshopify.com/密码为密码

我尝试了几次失败:

一个IF循环,它根据收集句柄来调用不同的类,(但这无法工作,因为代码在HEADER部分而不是在收集模板中)。像这样修改每个SCSS:

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

以及其他几种没有成功的方法。我确定一定有办法!而且我不介意是否对其进行了硬编码,只要每个em都是不同的颜色:)

谢谢!

sass shopify liquid liquid-layout wp-nav-menu-item
3个回答
0
投票

您可以使用handle filter将链接标题用作导航链接的类的一部分。例如:

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

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

您还可以检查link对象是否是集合,并使用collection.handle或什至collection.id作为链接类的一部分。取决于它可以进行多少次硬编码。


0
投票

下面是导航栏下拉菜单的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
投票

除非我缺少某些内容,否则以下内容应该起作用:

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

您提供的代码在正确的轨道上,但是我觉得特异性太高。

© www.soinside.com 2019 - 2024. All rights reserved.