1. 首页
  2. css

CSS使用导航栏中的子菜单定位菜单元素

以下是雷·梅西纳的客串帖子。雷有兴趣分享这项技术作为一种方式,以支付他从这个网站在过去学到的东西,这是可怕的。您可能知道jQuery.has方法,该方法允许您选择一个元素(如果它有另一个选择器作为后代)。遗憾的是,CSS中还没有这样的选择器。但是,如果您对HTML结构稍有了解,可以使用位置选择器的组合来模拟它。Ray会解释的。
最近,我正在开发一个下拉式导航栏,希望能够区分包含子菜单的菜单项和不包含子菜单的菜单项。我希望能够自动执行此操作,而无需依赖JavaScript或向标记中添加类。我只是想让它工作起来,就好像项目知道它是否有子菜单一样。需要导航提示
正如你可能知道的,菜单是链接列表,因此,将它们标记为s是标准做法,下拉菜单仅仅是嵌套的s.下拉菜单是现代(但不是那么现代)网页设计的常见组件。使用纯CSS,你可以以任何方式设计导航菜单的上层,并隐藏子层,以便只有当访问者停留在适当的区域时,才能显示它们。
许多设计师都满意这样离开。然而,从UX/UI的角度来看,这是缺乏的,因为它让用户不得不浏览整个菜单,以找到哪些部分包含额外的导航链接。这意味着访问者要么浪费他们的时间看,并为此感到沮丧,或错过你的网站所有地区一起!这一点都不好。
解决这个问题的常用方法是,只需在包含的中添加一个类(子菜单),这样我们就可以将这些项的样式与不包含子导航的项的样式区分开来。相当简单,但也相当乏味,也不是特别优雅。
另一种方法,假设上层项目不是编码为链接,则使用标记中的差异作为杠杆。也就是说,创建假链接:样式是的直接子项,以指示后面有更多链接,相反,样式锚定标记没有附加的子项。如果您的下拉列表很简单,并且您可以用这种方式具体地构造它,那么这是很方便的。它更简洁,因为您不必在标记中添加\”子菜单\”类,但与以前一样,它仍然要求您手动构建列表的内容,或者您的CMS可以预测哪些列表项将包含其他作为子菜单。自动执行!
我曾遇到过其他自动设置包含其他列表的列表项样式的方法,但它们使用绝对定位和子对象的伪元素。虽然很聪明,但是CSS的计算有时很复杂,或者这个方法完全不可能实现,这取决于您使用了哪些其他技术来布局菜单和/或定位子菜单,或者您希望达到的总体效果。
,如果有一个CSS选择器可以让我们查询一个元素是否包含另一种元素作为直接子元素,类似于jQuery的.has()方法。
我们可以用li a:first-child:nth-last-child(x) { }实现几乎相同的事情。
关键是要有一个预期的子元素计数(HTML元素计划生育?)。最有可能的是两个元素:锚定元素和,不过可以调整此技术以适用于任何数量或子元素,只要您有一个规则模式。
下面是一个快速示例。标记只是您的标准嵌套UL,但是请注意,我在HTML中只使用了一个类,在根上。自己测试一下,在任何级别添加任意数量的嵌套列表!创建一个下拉演示
让我们来测试一下这个想法!HTML:保持它的干净,然后魔法发生了:
.nav li a:first-child:nth-last-child(2):before {content: \”\”;position: absolute;height: 0;width: 0;border: 5px solid transparent;top: 50% ;right:5px;}
这是这项技术的主要活性成分。在本例中,我使用锚元素之外的:before伪元素来绘制箭头。伪元素对该技术是不必要的。我可以很容易地改变锚点本身的背景;一旦你瞄准了元素,你可以让它做任何你想做的事情。
最后,只是为了磨光它,一些定位和箭头样式的CSS代码。
/* submenu positioning*/.nav ul {position: absolute;white-space: nowrap;border-bottom: 5px solidorange;z-index: 1;left: -99999em;}.nav > li:hover > ul {left: auto;margin-top: 5px;min-width: 100%;}.nav > li li:hover > ul {left: 100%;margin-left: 1px;top: -1px;}/* arrow hover styling */.nav > li > a:first-child:nth-last-child(2):before {border-top-color: #aaa; }.nav > li:hover > a:first-child:nth-last-child(2):before {border: 5px solid transparent;border-bottom-color: orange;margin-top:-5px}.nav li li > a:first-child:nth-last-child(2):before {border-left-color: #aaa;margin-top: -5px}.nav li li:hover > a:first-child:nth-last-child(2):before {border: 5px solid transparent;border-right-color: orange;right: 10px; }
这是在CodePen上的全部操作:
正如您可能猜到的,您还可以使用其他选择器/选择器组合,如:only-child、:first-child:last-child、:first-child:not(:last-child)等。但我发现*

CSS使用导航栏中的子菜单定位菜单元素 为WP2原创文章,链接:https://www.wp2.cn/css/css%e4%bd%bf%e7%94%a8%e5%af%bc%e8%88%aa%e6%a0%8f%e4%b8%ad%e7%9a%84%e5%ad%90%e8%8f%9c%e5%8d%95%e5%ae%9a%e4%bd%8d%e8%8f%9c%e5%8d%95%e5%85%83%e7%b4%a0/