DEV Community

Cover image for Mobile menu bottom slide
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Posted on • Updated on

Mobile menu bottom slide

Hello dear folks,

Today i will explain you how to make a mobile menu which look like this.

Mobile menu

So lets create this eye catchy mobile menu


First of all create a index.html file with your favorite code editor and write create container class for button and menu.

after that create menu and button with the following codes.

mobile menu html

hurrrrrey, you have completed the HTML part of the mobile menu.


CSS course eduonix


Now let's move to CSS part of the mobile menu create CSS file.

Write the following code to design HTML document and container class.

Mobile menu document styling


And then we will give an attractive look to our button and menu.

write the following code

Mobile menu button styling


Now we will design our menu

To give a nice look let's write this CSS code.

Mobile menu styling


Now it's time to write a JQuery code to add toggle effect on button.

Mobile menu jquery

In this jquery code, we are just targeting button click on click, jquery will override menu-close class for menu. Same with button and button close


OK so you have just created a nice looking mobile menu.

And this is how it looks in real.

Thanks a lot for interest, Hope you have enjoyed to invent this mobile menu.

Share your opinion an feedback in comment section.

And if possible

Atul - Buy Me A Coffee

Top comments (0)