如何将 div 添加到导航菜单中的父元素？

Question

我有一个导航菜单，名称为 class：“custom-menu-class”。 它在 Wordpress 中。

我想创建一个活动的 class ，这意味着当链接处于活动状态（网址匹配）和/或鼠标悬停链接时，会在父元素中插入一个 div（文本顶部的白色圆圈）。

在此处输入图像描述

玩转检查元素，我发现添加：

 <div style=" border: 6px solid white; border-radius: 50px; width: 12px; position: absolute; top: -15%; left: 33%; "> </div>

到父元素给了我我需要的东西。

我也只需要它用于活动菜单项。

有人能帮我吗？ 试图实现这一目标：

在此处输入图像描述

Answer 1

我不会插入div — 我会使用::before伪元素。 在此处阅读更多信息。

如果您使用的是WordPress 菜单wp_nav_menu() ，WP 将自动将.current-menu-item添加到当前菜单项li ——这意味着如果你在www.example.com/contact ——联系人菜单项将被赋予.current-menu-item class。 这是标记的屏幕截图：

对于任何悬停样式，您只需使用:hover —在这里阅读更多

使用二十二十主题的菜单标记，这就是我要做的——我在引导程序中添加只是为了演示目的。

 /* For demo purposes */ ul { background-color: #999; list-style: none; padding-bottom: 20px; padding-top: 20px; } ul li a { color: #fff; } ul li a:hover { color: #fff; text-decoration: none; } /* Start custom styles */ ul li { position: relative; } ul li.current-menu-item a::before, ul li a:hover::before { background-color: #fff; border-radius: 100%; content: ' '; display: block; height: 10px; left: 50%; position: absolute; top: -10px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 10px; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation"> <ul class="primary-menu reset-list-style row"> <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-90 col-auto"> <a href="https://twentytwentydemo.wordpress.com/?demo">Home</a> </li> <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75 col-auto"> <a href="https://twentytwentydemo.wordpress.com/exhibitions/?demo">Exhibitions</a> </li> <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-69 current_page_item menu-item-has-children menu-item-73 col-auto"> <a href="https://twentytwentydemo.wordpress.com/about/?demo" aria-current="page">About Us</a> </li> <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74 col-auto"> <a href="https://twentytwentydemo.wordpress.com/blog/?demo">News</a> </li> </ul> </nav>

Answer 2

这有效

 /* For demo purposes */ ul { background-color: #999; list-style: none; padding-bottom: 20px; padding-top: 20px; } ul li a { color: #fff; } ul li a:hover { color: #fff; text-decoration: none; } /* Start custom styles */ ul li { position: relative; } ul li.current-menu-item a::before, ul li a:hover::before { background-color: #fff; border-radius: 100%; content: ' '; display: block; height: 10px; left: 50%; position: absolute; top: -10px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 10px; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation"> <ul class="primary-menu reset-list-style row"> <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-90 col-auto"> <a href="https://twentytwentydemo.wordpress.com/?demo">Home</a> </li> <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75 col-auto"> <a href="https://twentytwentydemo.wordpress.com/exhibitions/?demo">Exhibitions</a> </li> <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-69 current_page_item menu-item-has-children menu-item-73 col-auto"> <a href="https://twentytwentydemo.wordpress.com/about/?demo" aria-current="page">About Us</a> </li> <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74 col-auto"> <a href="https://twentytwentydemo.wordpress.com/blog/?demo">News</a> </li> </ul> </nav>

Answer 3

正是你所期望的。 我已经编写了小 js function 来在活动 class 之间切换。

 var btns = document.querySelectorAll(".menu-box li a"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function(e) { for (var j = 0; j < btns.length; j++) { btns[j].classList.remove('active') } e.target.classList.add('active') }); }

 * { margin: 0; padding: 0 }.menu-container { width: 100%; background: red; }.menu-box { display: flex; justify-content: space-evenly; padding: 15px }.menu-box li { text-decoration: none; list-style-type: none; }.menu-box li a { text-decoration: none; color: #fff; display: flex; flex-direction: column; justify-content: center; }.menu-box li a:hover:before { opacity: 1; }.menu-box li a.active:before { opacity: 1; }.menu-box li a:before { opacity: 0; content: ''; display: inline-block; width: 11px; height: 11px; -moz-border-radius: 7.5px; -webkit-border-radius: 7.5px; border-radius: 7.5px; background-color: #fff; margin: 0 auto; transition: .3s }

 <nav class="menu-container"> <ul class="menu-box"> <li><a class="active" href="#home">Home</a></li> <li><a href="#emissione">Emisione</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#about">About us</a></li> </ul> </nav>