Menu
I have been given a file by a designer that I'm required to develop. They're asking me to do a curved/arching menu:
Is this possible to create? I've never come across something like this before and am baffled as to approach this.
469
CSS Based Approaches: We can use ::before or ::after pseudo element to create this shape. Steps to create this are given below: Create a layer with ::before OR ::after pseudo element having width and height more than its parent. Add border-radius to create the rounded shape.
With the help of HTML, CSS, and JavaScript, it is possible to create a navigation menu with a curved active tab. This can be done by using the ::before and ::after pseudo-elements to create the desired shape, and then using JavaScript to add the active class to the element.
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a . tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class . tab-content .
You might be able to do it with canvas. See the answer to Is there a way to curve / arc text using CSS3 / Canvas for a sample. Note that canvas is not supported by IE8 and earlier, but it is otherwise pretty widely supported in modern browsers.
You might also want to look at this tutorial on drawing a sine wave with canvas since the menu in your image is somewhat sine wave shaped.
That's a lot of work though for something like this, though. Instead, you can just make it a big image and use a map element to make an image map.
You could also consturct it out of a series of small images.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
