CODEWITHSUNDEEP
htmlcssmenu
Māris L
Māris L

Reputation: 37

How to make 3 dimension vertical menu using CSS

Looking for some ideas of vertical menus and found this example in picture. How to make it fold like that and look 3D?

Maybe anyone knows where and how to find real life example of similar menu with code? That website don't work anymore with that menu. Already tried.

Thanks

Example :

enter image description here

Upvotes: 0

Views: 85

Answers (1)

Bhuwan
Bhuwan

Reputation: 16855

Try to make use of position: absolute and transform: skew combination

Stack Snippet

ul.menu {
  font: 13px Verdana;
  list-style: none;
  padding: 20px 0 0 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

ul.menu>li {
  position: relative;
  margin-bottom: 5px;
  padding: 10px;
  background: #808080c4;
  color: #fff;
}

ul.menu>li:before {
  content: "";
  position: absolute;
  width: 40px;
  left: -40px;
  top: 0;
  bottom: 0;
  background: grey;
  transform: skewY(30deg);
  transform-origin: right;
}

ul.menu>li:hover,
ul.menu>li:hover:before {
  background: red;
  cursor: pointer;
}
<ul class="menu">
  <li>Menu One</li>
  <li>Menu Two</li>
  <li>Menu Three</li>
  <li>Menu Four</li>
  <li>Menu Five</li>
  <li>Menu Six</li>
</ul>

Upvotes: 4

Related Questions