Linked Questions

Popular Questions

More than one sliding menu in a page

Asked by At

I've managed to make a sliding menu link, but when I try to make another it doesn't work like the first one.

Here's a wireframe of what I'm trying to achieve:

Wireframe

/*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>

(fiddle)

Related Questions