小贝子编程

请将此侧菜单设置为动态菜单



StackOverflow的好人们，今天我向大家问候！

请帮帮我！！！

我用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进行部署。这就是我想要实现的。。。

第一：

我希望每个子菜单在默认情况下都被隐藏或关闭。

第二：

我希望所选的菜单链接显示子菜单(以平滑滑动下拉格式(，并且旁边的箭头图标应该向下旋转(表示子菜单处于活动状态或打开状态(。当再次单击同一链接时，它应该关闭子菜单(同样以平滑格式(，箭头图标应该恢复正常。

第三：(现在这是有趣的部分。(

一次只能打开一个子菜单！！！换句话说，在一个子菜单打开后，它必须仅在以下情况下关闭：；

  1. 再次单击相同的菜单链接或
  2. 单击另一个菜单链接(-在当前菜单关闭时打开(

(有点像一个平滑的过渡顺序，一次只显示一个内容，现在你明白了。(

还要注意：

  1. 活动或打开子菜单的箭头图标必须向下旋转，并进行转换以及
  2. 任何INACTIVE(无效(或CLOSED(关闭(子菜单的箭头图标必须随着转换而旋转回正常

哦，我忘了提了！

当你把鼠标悬停在菜单链接上时，你会注意到文本变成蓝色的效果，变形风格有点像按钮。对于活动菜单，请使其与菜单链接悬停时的状态完全相同。当菜单链接处于非活动状态或关闭状态时，请使它恢复到正常状态。

提前感谢！！！

第页。S我使用FontAwesome图标：D

我相信这就是您想要的。

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

在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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium