Today I will give you an example of the CSS overlay menu. I think you have seen overlay popup in many websites. Mostly you can see overlay screen effect in pop-up login form or sing up form.

Basically, this overlay technique is used for displaying a window, without leaving the existing page. And this is a pretty good effect. In other words, it seems very attractive to see. Many websites use this effect for responsive & mostly for small screen size. ( i.e. mobiles, tablet, etc.) If you ever used bootstrap then you know: bootstrap also uses this effect in default for the mobile version of web page.

Preview

If you have not yet understood which point in the conversation or what is overlay menu? then let’s see a preview of it:

CSS Overlay Menu Source Code

This is an overlay menu with pure CSS, no JavaScript or JQuery. I just used HTML & CSS to create this small program or effect. For creating the menu I used HTML list properties <ul> & <li> . For the front screen, I had just put an <h1> tag and paragraph <p> tag.