请使此侧边菜单动态化

Question

Whosebug 的好心人今天向大家问好！

请帮助我！！！

我在 HTML 和 CSS 中写了一段代码，我卡在了这里...

下面是 HTML...

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="../fontawesome-free-5.13.0-web/css/all.min.css" />
    <link rel="stylesheet" href="./style.css" />
    <title>dashboard</title>
</head>

<body>
    <aside class="sidebar">
        <span class="fas fa-chevron-right"></span>
        <menu>
            <li><a href=""><span class="fas fa-user"></span><span>dashboard</span></a></li>
            <li>
                <a href=""><span class="fas fa-user"></span><span>posts</span><span class="fas fa-chevron-up"></span></a>
                <menu>
                    <li><a href="">category posts</a></li>
                    <li><a href="">subcategory posts</a></li>
                    <li><a href="">minicategory posts</a></li>
                </menu>
            </li>
            <li>
                <a href=""><span class="fas fa-user"></span><span>sections extra</span><span class="fas fa-chevron-up"></span></a>
                <menu>
                    <li><a href="">debate</a></li>
                    <li><a href="">extensions</a></li>
                </menu>
            </li>
            <li>
                <a href=""><span class="fas fa-user"></span><span>users</span><span class="fas fa-chevron-up"></span></a>
                <menu>
                    <li><a href="">banned users</a></li>
                    <li><a href="">queried users</a></li>
                    <li><a href="">all users</a></li>
                </menu>
            </li>
            <li>
                <a href=""><span class="fas fa-user"></span><span>media</span><span class="fas fa-chevron-up"></span></a>
                <menu>
                    <li><a href="">big picture</a></li>
                    <li><a href="">add new page</a></li>
                </menu>
            </li>
            <li><a href=""><span class="fas fa-user"></span><span>inbox</span></a></li>
            <li>system</li>
            <li><a href=""><span class="fas fa-user"></span><span>broadcast</span></a></li>
            <li><a href=""><span class="fas fa-user"></span><span>view traffic board</span></a></li>
            <li>
                <a href=""><span class="fas fa-user"></span><span>mini admin</span><span class="fas fa-chevron-up"></span></a>
                <menu>
                    <li><a href="">view mini admin</a></li>
                    <li><a href="">register mini admin</a></li>
                    <li><a href="">remove mini admin</a></li>
                </menu>
            </li>
            <li>
                <a href=""><span class="fas fa-user"></span><span>moderators</span><span class="fas fa-chevron-up"></span></a>
                <menu>
                    <li><a href="">view moderators</a></li>
                    <li><a href="">register moderators</a></li>
                    <li><a href="">remove moderators</a></li>
                </menu>
            </li>
            <li><a href=""><span class="fas fa-user"></span><span>ads management</span></a></li>
            <li><a href=""><span class="fas fa-user"></span><span>settings</span></a></li>
        </menu>
    </aside>
</body>

</html>

最后，这是 CSS...

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

aside{
    font-family: 'Helvetica';
    background-color: #ecf0f3;
    width: 200px;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    height: 100vh;
    box-shadow: -3px -3px 7px #ffffff,3px 3px 5px #ceced1,inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1;
}

aside::-webkit-scrollbar{
    width: 5px;
    /* helps remove scrollbar which resizes or shifts list items - webkit browsers only */
    display: none;
}


aside menu{
    white-space: nowrap;
    width: 100%;
    text-transform: capitalize;
    font-size: 14px;
}

aside > span.fa-chevron-right{
    font-size: 25px;
    padding-left: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
    cursor: pointer;
}

aside menu li{
    /* BLOCK AVAILABLE FOR ENTRY */
}

aside menu li:not(aside menu li menu li){
    width: 100%;
    margin-top: 10px;
    padding-right: 10px;
}

aside menu li:not(:last-of-type){
    /* BLOCK AVAILABLE FOR ENTRY */
}

aside menu li a{
    display: block;
    width: 100%;
    position: relative;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
}

aside menu li a:not(aside menu li menu li a){
    box-shadow: -3px -3px 7px #ffffff,3px 3px 5px #ceced1;
    position: relative;
}

aside menu li a:not(aside menu li menu li a):hover::before,
aside menu li a:not(aside menu li menu li a):focus::before{
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1;
}

aside menu li a:not(aside menu li menu li a):hover::before,
aside menu li a:not(aside menu li menu li a):focus::before{
    border-radius: 6px;
}

aside menu li a:not(aside menu li menu li a):hover{
    color: #3498db;
}

aside menu li a span.fas{
    padding: 0 10px 0 0;
}

aside menu li menu{
    width: 100%;
}

aside menu li menu li{
    /* BLOCK AVAILABLE FOR ENTRY */
}

aside menu li menu li a{
    width: 100%;
    padding-left: 30px;
}

aside menu li menu li a:hover{
    background-color: #dfdfdf;
    color: #444;
}

aside span.fa-chevron-up{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

它看起来像是一个完成的作品，而实际上我需要我认为可以使用 JavaScript 部署的特定动态功能。所以这就是我想要实现的目标...

首先：

我希望每个子菜单默认隐藏或关闭。

其次：

我希望所选菜单link显示子菜单（以平滑的滑动下拉格式），而且它旁边的箭头图标应该向下旋转（表示子菜单处于活动状态或打开状态） .当再次单击相同的 link 时，它应该关闭子菜单（也以平滑格式）并且箭头图标应该 return 正常。

第三：（现在是有趣的部分。）

一次只能打开一个子菜单！！！也就是说，一个子菜单打开后，只有在;

时才必须关闭

再次单击相同的菜单 link 或者
单击另一个菜单 link（- 在当前菜单关闭时打开）

（有点像 SMOOTH TRANSITIONING ACCORDION 一次只显示一个内容，现在你明白了。）

另请注意：

活动或打开的子菜单的箭头图标必须旋转，过渡，向下和
任何 INACTIVE 或 CLOSED 子菜单的箭头图标必须旋转，并过渡到正常状态

哦，我忘记说了！

当您将鼠标悬停在菜单 link 上时，您会注意到一种效果，即文本变为蓝色并且新形态样式有点类似于按下的按钮。对于活动菜单，也请让它与菜单 link 悬停时的状态完全相同。当菜单 link 处于非活动状态或关闭时，让它 return 恢复到正常状态。

提前致谢！！！

P.S。我使用 FontAwesome 作为图标 :D

Answer 1

我相信这就是您要找的。

有点javascript和css。 Js 删除所有 li 元素 .active class 并仅在事件触发时切换到单击的元素。

在 Css 中仅添加了旋转和高度动画的过渡。

const menuItems = document.querySelectorAll('aside > menu > li > a');

const deactivate = target => target.parentNode.classList.remove('active');
const toggle =  target => target.parentNode.classList.toggle('active');

menuItems.forEach(menu => {
  menu.addEventListener('click', function(e){
    e.preventDefault();
    menuItems.forEach(element => element.isEqualNode(menu)? toggle(element): deactivate(element));
  });
});

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

aside{
    font-family: 'Helvetica';
    background-color: #ecf0f3;
    width: 200px;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    height: 100vh;
    box-shadow: -3px -3px 7px #ffffff,3px 3px 5px #ceced1,inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1;
}

aside::-webkit-scrollbar{
    width: 5px;
    /* helps remove scrollbar which resizes or shifts list items - webkit browsers only */
    display: none;
}


aside menu{
    white-space: nowrap;
    width: 100%;
    text-transform: capitalize;
    font-size: 14px;
}

aside > span.fa-chevron-right{
    font-size: 25px;
    padding-left: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
    cursor: pointer;
}

aside menu li{
    /* BLOCK AVAILABLE FOR ENTRY */
}

aside menu li:not(aside menu li menu li){
    width: 100%;
    margin-top: 10px;
    padding-right: 10px;
}

aside menu li:not(:last-of-type){
    /* BLOCK AVAILABLE FOR ENTRY */
}

aside menu li a{
    display: block;
    width: 100%;
    position: relative;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
}

aside menu li a:not(aside menu li menu li a){
    box-shadow: -3px -3px 7px #ffffff,3px 3px 5px #ceced1;
    position: relative;
}

aside menu li a:not(aside menu li menu li a):hover::before,
aside menu li a:not(aside menu li menu li a):focus::before{
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1;
}

aside menu li a:not(aside menu li menu li a):hover::before,
aside menu li a:not(aside menu li menu li a):focus::before{
    border-radius: 6px;
}

aside menu li.active a:not(aside menu li menu li a),
aside menu li a:not(aside menu li menu li a):hover{
    color: #3498db;
}

aside menu li a span.fas{
    padding: 0 10px 0 0;
}

aside menu li menu{
    width: 100%;
}

aside menu li menu li{
    /* BLOCK AVAILABLE FOR ENTRY */
}

aside menu li menu li a{
    width: 100%;
    padding-left: 30px;
}

aside menu li menu li a:hover{
    background-color: #dfdfdf;
    color: #444;
}

aside span.fa-chevron-right:not(aside > span.fa-chevron-right){
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}


/* extra style */


aside > menu > li > menu {
  transition: max-height 400ms;
  max-height: 0;
  overflow: hidden;
}

aside > menu > li.active > menu{
  max-height: 300px;
}

aside > menu > li > a > span:nth-child(2)::after{
  transition: transform 300ms ease-out;
  content: '▶';
  display: inline-block;
  transform: rotate(0);
}

aside > menu > li.active a > span:nth-child(2)::after{
  transform: rotate(90deg);
}

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="../fontawesome-free-5.13.0-web/css/all.min.css" />
    <link rel="stylesheet" href="./style.css" />
    <title>sidemenu</title>
</head>

<body>
    <aside class="sidebar">
        <span class="fas fa-chevron-right"></span>
        <menu>
            <li><a href="#"><span class="fas fa-user"></span><span>dashboard</span></a></li>
            <li>
                <a href="#"><span class="fas fa-user"></span><span>posts</span><span class="fas fa-chevron-right"></span></a>
                <menu>
                    <li><a href="#">category posts</a></li>
                    <li><a href="#">subcategory posts</a></li>
                    <li><a href="#">minicategory posts</a></li>
                </menu>
            </li>
            <li>
                <a href="#"><span class="fas fa-user"></span><span>sections extra</span><span class="fas fa-chevron-right"></span></a>
                <menu>
                    <li><a href="#">debate</a></li>
                    <li><a href="#">extensions</a></li>
                </menu>
            </li>
            <li>
                <a href="#"><span class="fas fa-user"></span><span>users</span><span class="fas fa-chevron-right"></span></a>
                <menu>
                    <li><a href="#">banned users</a></li>
                    <li><a href="#">queried users</a></li>
                    <li><a href="#">all users</a></li>
                </menu>
            </li>
            <li>
                <a href="#"><span class="fas fa-user"></span><span>media</span><span class="fas fa-chevron-right"></span></a>
                <menu>
                    <li><a href="#">big picture</a></li>
                    <li><a href="#">add new page</a></li>
                </menu>
            </li>
            <li><a href="#"><span class="fas fa-user"></span><span>inbox</span></a></li>
            <li>system</li>
            <li><a href="#"><span class="fas fa-user"></span><span>broadcast</span></a></li>
            <li><a href="#"><span class="fas fa-user"></span><span>view traffic board</span></a></li>
            <li>
                <a href="#"><span class="fas fa-user"></span><span>mini admin</span><span class="fas fa-chevron-right"></span></a>
                <menu>
                    <li><a href="#">view mini admin</a></li>
                    <li><a href="#">register mini admin</a></li>
                    <li><a href="#">remove mini admin</a></li>
                </menu>
            </li>
            <li>
                <a href="#"><span class="fas fa-user"></span><span>moderators</span><span class="fas fa-chevron-right"></span></a>
                <menu>
                    <li><a href="#">view moderators</a></li>
                    <li><a href="#">register moderators</a></li>
                    <li><a href="#">remove moderators</a></li>
                </menu>
            </li>
            <li><a href="#"><span class="fas fa-user"></span><span>ads management</span></a></li>
            <li><a href="#"><span class="fas fa-user"></span><span>settings</span></a></li>
            <strong>test</strong>
        </menu>
    </aside>
</body>

请使此侧边菜单动态化

Please make this side menu dynamic

html

javascript

css

menu

submenu