Implementing a W3.css overlay effect
My design template for this website uses 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. The effect is not as obvious on a large screen. The overlay displays the menu when the menu button is pressed.
It is highly modified and I am not suggesting that it is copied for your own use.
I use w3-overlay class in the Portfolio Template is not documented and assumed that you either know about it or know how to find out.
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.
The non-W3 overlay
The example on the W3 Schools website shows how you can configure an overlay effect from scratch.
The overlay effect is documented by W3 Schools and seems to turn up on websites that appear to have hijacked the W3 pages???
search finding this page: "css w3 schools"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