Hi,
Can anyone help me in creating a menu exactly like this -> https://www.marshall-tufflex.com/
On click on product tab the rest should open on hover in full width
Thanks in advance
1 Like
The concept you should search is “off-canvas”. The concept is that you move your menu off one of the viewport’s sides and change it’s visibility. Then, on an event, you transition the position and visibility into view. Now CSS has hover but I think on click is a Javascript DOM event. If you inspect FCC’s project test menu you’ll see that it uses “the checkbox hack”. Modern CSS allows you to style based on the checkbox’s state which requires a click to change.
1 Like
Hey,
Thanks a lot for your reply but it is still unclear
i am using vertical dropdown menu for this
1 Like
Learn the concept but change the details. Instead of changing the right position and width of vertical menu. You change the top position and height of a horizontal menu same concept different details.
off-canvas article: https://css-tricks.com/off-canvas-menu-with-css-target/
checkbox hack article: https://css-tricks.com/the-checkbox-hack/
video puts it all together: https://www.youtube.com/watch?v=d4P8s-mkMvs
1 Like
Thank you so much for your help .
Will try this tips
1 Like
I saw your link. It is nothing but Modal window coming up on the click of the menu item. You can easily create this feature by using bootstrap modal, check below link:
Hi How are you guyes.