CODEWITHSUNDEEP
javascriptphphtmlcssresponsive
Zwei Rad
Zwei Rad

Reputation: 15

Curved Menu Responsive possible?

a client wants his old menu in his website re-design I should make for him. It looks like this:

Curved Menu

I tried some code with svg etc but I didn't get it to work.

Is it even possible to make a navigation/menu like this responsive?

Maybe you can help me out with a little hint or something. Would be glad about it!

Thanks in advance.

Upvotes: 0

Views: 68

Answers (1)

Henfs
Henfs

Reputation: 5411

Yes, you could use the SVG. Then, you could set its z-index higher, this way you will bring it to front in page. The menu will have a z-index lower than the SVG. Each item of menu will have a transform: translateY() moving it up. So you will position each of them differently. Lastly, you will modify the height of each item in order to compensate the transform displacement.

Like this:

.item1 {
  transform: translate(-20px);
  height: 100px;
}
.item2 {
  transform: translate(-40px);
  height: 120px;
}
.item3 {
  transform: translate(-60px);
  height: 140px;
}

Hope it helps.

Upvotes: 2

Related Questions