javascript - 动画顶部三角形的左侧与所选菜单元素的左侧对齐

Question

我正在自己的网站上工作，但我不知道如何解决这个动画部分。

我有一个常规菜单，右上角有一个三角形，一个白色三角形，绝对位置，右侧为 0。三角形的点朝向左侧。

我想对其进行动画处理（增加左侧的大小）并到达菜单选定元素的左侧。

你可以在下一张图片中看到我在说什么

[![示例][1]][1]

另外，我想在悬停而不是单击时对其进行动画处理，如果您停止悬停一个元素，我希望它回到初始位置。我有 html/css 结构，但不确定如何对其进行动画处理以准确到达菜单元素的左角。

HTML

<div id="sectionHeader">

    <div id="sectionHeaderTriangle"></div>

    <div id="sectionHeaderCentralizer">

        <img id="sectionHeaderLogo" src="images/logo.svg"/>

        <nav>
            <ul>
                <li><a href="#">How it Works?</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Subscribe</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </nav>

        <div id="sectionHeaderContentBox">
            <div class="text1">PAGE TEST</div>
            <div class="text2">Some Temporal Text goes here...</div>
        </div>

    </div>

</div>

CSS

body {
margin: 0 auto;
background-color: #fff;
text-align: center;
}

/*  Section Header  */

#sectionHeader {
position: relative;
width: 100%;
height: auto;
background-color: #29251f;
}

#sectionHeaderCentralizer {
position: relative;
width: 1200px;
height: 450px;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: ;
}

#sectionHeaderLogo {
position: absolute;
left: 30px;
top: 30px;
}

#sectionHeaderContentBox {
position: absolute;
width: auto;
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: ;
}

#sectionHeaderTriangle {
width: 0;
height: 0;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
border-right: 40px solid white;
position: absolute;
right: 0;
top: 20px;
}

/*primero en el móvil (mobile first)*/

nav {
position: absolute;
right: 30px;
top: 45px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: auto;
}

nav ul {
list-style: none;
padding: 0;
margin: 0;
}

nav li a {
color: white;
display: block;
text-decoration: none;
padding: .5em 1em;
}

nav li a:hover {
color: #13baff;
transition: all 0.2s ease-in-out;
}

.text1 {
font-family: 'Fjalla One', sans-serif;
font-size: 65px;
color: #fff;
}

.text2 {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
color: #fff;
width: 650px;
}

/* @media-query */

@media screen and (min-width: 480px) {
nav ul {
display: flex;
}

nav li{
/*la caja puede crecer para ocupar todo el espacio disponible */
flex-grow:1; 
text-align:center;
}
}

有人可以指导我吗？：） 谢谢！

 [1]: https://i.stack.imgur.com/NOyQa.png

标签： javascripthtmlcss