Implementing a W3.css overlay effect
My design template for this website started off using a template taken from the W3 Schools W3.css Framework. The overlay efffect can be seen when my pages are viewed on a mobile device (small screen). The effect is not as obvious when a page is viewed on a large screen. The overlay displays the menu when the menu button is pressed.
My design template is highly modified and I am not suggesting that it is copied for your own use.
I use w3-overlay class from the Portfolio Template is not documented well it is assumed that you either know about it or know how to find it.
The Overlay Effect is a W3.css Framework class, "w3-overlay". It is also animated using the class "w3-animate-opacity". Even so, there is a requirement for a couple of JavaScript functions to open and close the effect.
See my page on how the evolution of the design for my pages for an example on how this overlay technique works.
The non w3-overlay display - what you see on a large screen
The example on the W3 Schools website shows how you can configure an overlay effect from scratch.
The Documentation:
The HTML for an overlay
<!-- Overlay effect when opening sidebar on small screens -->
div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" onkeypress="w3_close()"
style="cursor:pointer"
title="close side menu" id="myOverlay"></div>
<!-- PAGE CONTENT -->
div class="w3-main" style="margin-left:300px">
The rest of the main page content.......
and
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;"
id="mySidebar">
..... the rest of the navigation menu