我正尝试用CSS实现一个多级的下拉导航菜单,但有一个小部分我似乎无法正常工作。
应该发生的情况是:
1)当鼠标悬停在菜单项上时,应使用不同的图像突出显示该菜单项(这很好用)。2)当鼠标悬停在子菜单项上时,父菜单项应突出显示。
Point2可以很好地工作,直到我在父菜单项上有一个类.bottom (这个类用于图像的细微差别)。如果父菜单项具有.bottom类,则不会发生高亮显示。
可以在此处查看演示:
演示显示,当鼠标悬停在Menu 1> Sub Menu 3> Sub Sub Menu X上时,Sub Menu 3高亮显示。但是,将鼠标悬停在菜单2>子菜单3>子菜单X上
好的,标题可能有点难理解,我会试着解释一下。
所以我使用的是
我总共有9个部分: Home about (大约有6个"undersections“,这是第一个about部分的延续)
菜单中只有3个导航选项Home、about、contact。我已经制作了菜单,以便在相应部分添加活动类-就像简单地使用现成的选项一样。当我滚动并离开第一个about部分时,激活的类是remove,菜单项没有突出显示。所以这是我希望活动类保留在about的所有“下半部分”上的东西。因此菜单项"About“被高亮显示,直到”contact“部分。
我想我应该让它与一些“外部”JS一起工作,这样根据url
在我的项目中,我有左侧菜单(像一个侧面导航),这是使用垫-树和右侧显示的内容,当我们选择或单击左侧的菜单。这里,黄色高亮显示是使用mat-tree sideNav and contents构建的如果我们从左侧选择任何选项,例如,如果我选择"checkbox“,如给定的链接Content on selection of menu,则右侧应加载内容而无需刷新并保留左侧导航。用于参考的示例链接,https://material.angular.io/components/checkbox/overview 注意:我的app.component.html中已经有了。左侧导航和右侧内容是在di