如何使菜单项向右滑动并在单击时添加一行?

Question

尝试使该行位于单词的右侧，当它未被选中并且左侧的新行滑出时，推动文本并删除右侧行。

这就是我试图复制的内容

• 如果您单击此站点上的菜单并单击菜单项，您将看到左侧行出现。

https://codepen.io/mattmcgilton/pen/bGEgWgQ

<nav class="col-12 primary__nav">
<ul id="Primary" class="menu">
<li id="menu-item-58" class="menu-item">
<a href="#" aria-current="page">Home —</a></li> 
<!--The right side line to slide away, and a new line on the left side to slide out when clicked-->
<li id="menu-item-106" class="menu-item">
<a href="#">Our Projects —</a>
</li>
<li id="menu-item-59" class="menu-item">
<a href="#">— About Us</a> <!--slides out from the left and appears like this when clicked-->
</li>
<li id="menu-item-112" class="menu-item">
<a href="#">News  —</a>
</li>
<li id="menu-item-157" class="menu-item">
<a href="#">Contact —</a>
</li>
</ul>                
</nav>

Answer 1

看看这段代码，如果你想点击它，你必须在我的示例中添加一个单独的类 instad:hover。

我正在为您的菜单链接使用包装器，并在伪元素之前和之后使用包装器来表示行，以及用于效果的 css 过渡。

[编辑]

在这里摆弄一下点击

.menu li{
list-style: none;
}
.menu a{
text-decoration: none;
color: black;
text-transform: uppercase;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
.menu .menu-link-wrapper{
position: relative;
transition: all 5s;
}
.menu .menu-link-wrapper::before{
width: 50px;
height: 10px;
border-bottom: solid thin black;
content: "";
display: inline-block;
transition: all 0.5s;
vertical-align: top;
}
.menu .menu-link-wrapper::after{
width: 0;
height: 10px;
border-bottom: solid thin black;
content: "";
display: inline-block;
transition: all 0.5s;
vertical-align: top;
}
.menu .menu-link-wrapper:hover{
padding-left: 0;
}
.menu .menu-link-wrapper:hover::before{
width: 0;
}
.menu .menu-link-wrapper:hover::after{
width: 60px;
}

<nav class="col-12 primary__nav">
<ul id="Primary" class="menu">
<li id="menu-item-58" class="menu-item">
<div class="menu-link-wrapper">
<a href="#" aria-current="page">Home</a> 
</div>
</li>
<!--The right side line to slide away, and a new line on the left side to slide out when clicked-->
<li id="menu-item-106" class="menu-item">
<div class="menu-link-wrapper">
<a href="#">Our Projects</a>
</div>
</li>
<li id="menu-item-59" class="menu-item">
<div class="menu-link-wrapper">
<a href="#">About Us</a> <!--slides out from the left and appears like this when clicked-->
</div>
</li>
<li id="menu-item-112" class="menu-item">
<div class="menu-link-wrapper">
<a href="#">News</a>
</div>
</li>
<li id="menu-item-157" class="menu-item">
<div class="menu-link-wrapper">
<a href="#">Contact</a>
</div>
</li>
</ul>                
</nav>