Simple Mobile slide menu

Responsive Mobile menu with slide effect. when the user clicks on the menu bar button nav bar opens with a slide effect.it shows after 767px media query.

first i create navbar using ul & li tag,add menu bar(hamburger) icon in button.after in mobile view using position: absolute hide navbar using left property, then give transition property for smooth effect.

using jquery, on button click event add "open-nav" class in the header. for the show navigation bar.

• all the design & layout created in 1920 x 1080 screen size.
• all the design & layout is responsive in desktop,tablet & mobile view.
• all the content, fonts & image are free resources.

I use Fonts from Google font use Bootstrap cdn free stock images from pexels or unsplash

HTML

CSS

JS

Output