fiverr menu "categories" design

[rashidhmoud]

Hi everyone,
Can someone please teach how us how to design a menu the “category” menu in fiverr website fiverr.com in css.

thanks.

[Atelierbram]

What is it about this menu that you want to learn about?

[rashidhmoud]

The hover effect and each category has vertical line between sub categories

This might be very easy but I’m a beginner

[Atelierbram]

Do you use, and/or know how to use (Chrome)DevTools? When you can then the following can be seen by opening up DevTools and inspect element (looking at the DOM – rendered source code).

The hover effect comes from this absolute positioned wrapping div that is revealed on hovering the parent list-item.

/* line 70 of demo: */
.main-cat-list>li .menu-cont {
  background-color: #fff;
  position: absolute;
  left: -1px;
  top: 100%;
  z-index: 10;
  display: none;
  width: 0;
  border: 1px #dddddd solid;
  padding: 15px 0;
  box-sizing: border-box;
  border-radius: 0 3px 3px 3px;
}

/* line 152 of demo: */
.main-cat-list>li:hover .menu-cont {
  display: block;
  width: auto;
}

“vertical line between sub categories” is just a 1px width border:

.main-cat-list>li .menu-cont ul:first-child {
  border-right: 1px #dddddd solid;
}

http://codepen.io/atelierbram/pen/rLgBqp

Menu in itself is not responsive. The entire menu is inserted with javaScript, that is: different menu’s for different platforms (like on mobile).

[Atelierbram]

Also, when you do a search for “mega drop-down menu css” you can find lot’s of other examples and tutorials. Keep in mind though that these can be difficult to implement on touch devices (no hover there).

[Author]

Posts