DEV Community

Crafting a mobile menu with Tailwind CSS without JavaScript

Seppe Gadeyne on April 28, 2023

Welcome to this blog post, where I'll walk you through building a mobile menu using only Tailwind CSS and HTML, without JavaScript. This approach i...
Collapse
 
stankukucka profile image
Stan Kukučka

@seppegadeyne great tutorial. I was looking for a non-js solution in Tailwind. Is it possible to modify the menu the way it will act the same as here: web3templates.com/preview/astroshi...?

Collapse
 
seppegadeyne profile image
Seppe Gadeyne

Hi @stankukucka, thank you for your feedback. It is also possible. I will make an example and add it to the tutorial later.

Collapse
 
seppegadeyne profile image
Seppe Gadeyne

Hi @stankukucka, Thanks for working together to create a vertical dropdown menu like on web3templates.com. You can view the demo and source on Github.

Thread Thread
 
stankukucka profile image
Stan Kukučka

Thanks @seppegadeyne it was a great experience to work together on such a "small project".

Collapse
 
godfreymutebi profile image
Mutebi Godfrey

if i want to change the background color from black to white . I want it to be white before and black after click.

Collapse
 
seppegadeyne profile image
Seppe Gadeyne

Hi @godfreymutebi, If you have three lines, you can do so by adjusting the background color of the before and after content + background color. So before the click, white = before:bg-white bg-white after:bg-white and then black after click = before:peer-checked:bg-black peer-checked:bg-black after:peer-checked:bg-black. I hope this can help you.

Collapse
 
godfreymutebi profile image
Mutebi Godfrey

thanks, its what i deed

Collapse
 
andberry profile image
Andrea Berardi

Thank you so much for sharing this, great post!

Collapse
 
vtuz profile image
Valeriy

Very nice solution. I'm thinking of use similar not only for menu but to separate screens of content in mobile devices.

Collapse
 
thrasher profile image
Enrico Monzeglio

Great! thanks for sharing.

Collapse
 
iliya1385 profile image
Blue boii

hi
its amazing
but i want when i click on any links in menu, menu be closed
ty