时间戳

首页 > 解决方案 > 页面中有多个滑动菜单

html - 页面中有多个滑动菜单

问题描述

我设法制作了一个滑动菜单链接，但是当我尝试制作另一个时，它不像第一个那样工作。

这是我想要实现的线框图：

线框

/*HOME MENU*/

#home {
  position: fixed;
  left: -8.5em;
  top: 20px;
  width: 8em;
  background: black;
  color: white;
  margin: -1em 0 0 0;
  padding: 0.5em 0.5em 0.5em 2.5em;
  transition: 0.2s
}

#home:hover {
  left: 0
}

#home a {
  position: relative;
  left: 0;
  transition: 0.2s
}

#home a:link {
  color: white;
  text-decoration: none;
}

#home a:visited {
  color: green;
}

#home a:hover {
  color: gray;
}

#home a:active {
  left: -7em;
  background: hsla(80, 90%, 40%, 0.7);
  color: white;
}

#home a:focus {
  left: -7em;
  background: hsla(80, 90%, 40%, 0.7);
}

/*3D MENU*/

#3D {
  position: fixed;
  left: -8.5em;
  top: 20px;
  width: 8em;
  background: black;
  color: white;
  margin: -4em 0 0 0;
  padding: 0.5em 0.5em 0.5em 2.5em;
  transition: 0.2s
}

#3D:hover {
  left: 0
}

#3D a {
  position: relative;
  left: 0;
  transition: 0.2s
}

#3D a:link {
  color: white;
  text-decoration: none;
}

#3D a:visited {
  color: green;
}

#3D a:hover {
  color: gray;
}

#3D a:active {
  left: -7em;
  background: black;
  color: white;
}

#3D a:focus {
  left: -7em;
  background: black;
}
<ul id="home">
  <a href="#home">PERFIL<img src="menu/home.png" style="max-width:32px; height:auto;" align="right"></a>
</ul>
<ul id="3D">
  <a href="#3D">GRAFICA 3D<img src="menu/3d.jpg" style="max-width:32px;height:auto;" align="right"></a>
</ul>

（小提琴）

标签： htmlcssmenuslidingmenu

解决方案

所以，你的语义似乎有点混乱。您应该避免内联脚本和没有“li”的“ul”标签。您的 css 策略很好，但是您在重复信息，这不利于维护。我把你的代码写成了更好的语义和 CSS。

为了实现您的滑块，我正在使用 CSS 转换属性。

.wrapper * {
  overflow:hidden;
  list-style:none;
  margin:0;
  padding:0;
}
.wrapper ul li {
  display:flex;
  margin-bottom:4px;
}
.wrapper ul li a {
  background:black;
  color:white;
  padding:5px 10px;
  transform: translateX(calc(-100% + 32px));
  transition: transform 0.2s ease;
  
}
.wrapper img {
  max-width:32px;
  margin-left:5px;
}
.wrapper ul li a:hover {
  background:black;
  color:white;
  padding:5px 10px;
  transform: translateX(0);
  
}
<div class="wrapper">
  <ul id="home">
    <li id="item1">
      <a href="#home">TEST1<img src="menu/home1.png"></a>
    </li>
    
    <li id="item2">
      <a href="#home">TEST2<img src="menu/home2.png"></a>
    </li>
  </ul>
</div>

推荐阅读