Today we’d like to share some inspiration on fullscreen overlay styles and effects with you. Like with any UI component, there are new trends and styles emerging and we’d like to try out some subtle, as well as fancy effects for overlays. The special thing about these overlays is that they don’t have a fixed size like modals but they occupy all the screen, so when creating effects one has to take that into account and not overdo it. But that does not mean that we can’t go crazy and use some fresh and interesting effects, like, for example, morphing SVG shapes.
Note that these effects were created with modern browsers in mind so they might not show the desired effect in older ones. You should, of course, provide some kind of fallback for older browsers.
This article explains to develop a fullscreen overlay navigation menu with css and jquery.
LIVE DEMO
SOURCE CODE
Create the below three major elements
1. Wrapper Element: Use a div tag to create a wrapper object which holds the menu and places on page by covering the entire page.
2. Close Icon: Use a div tag to display close icon and bind a script function to close the menut.
3. Menu List: Use ul tag to create the actual menu list.
HTML source code
01 |
<div class="overlay overlay-hugeinc">
|
02 |
<button type="button" class="overlay-close">Close</button>
|
03 |
<nav>
|
04 |
<ul>
|
05 |
<li><a href="http://tympanus.net/Development/FullscreenOverlayStyles/#">Home</a></li>
|
06 |
<li><a href="http://tympanus.net/Development/FullscreenOverlayStyles/#">CSS</a></li>
|
07 |
<li><a href="http://tympanus.net/Development/FullscreenOverlayStyles/#">Javascript</a></li>
|
08 |
<li><a href="http://tympanus.net/Development/FullscreenOverlayStyles/#">jQuery</a></li>
|
09 |
<li><a href="http://tympanus.net/Development/FullscreenOverlayStyles/#">Webcenter Sites</a></li>
|
10 |
</ul>
|
11 |
</nav>
|
12 |
</div> |
Styling the elements
Write style sheets for the above three elements. Wrapper element should cover the entire page or document with proper background color. Close icon should be displayed at any corner or anywhere you want. I created css classes to display menu vertically by covering 70% of the height of the document. By default the wrapper class is with display:none property.
You can take a look at the style sheets i created in the demo.
Script to show & hide the menu
Below is the code i wrote for menu functionality with the help of modernizer.
01 |
(function() {
|
02 |
var triggerBttn = document.getElementById( 'trigger-overlay' ),
|
03 |
overlay = document.querySelector( 'div.overlay' ),
|
04 |
closeBttn = overlay.querySelector( 'button.overlay-close' );
|
05 |
transEndEventNames = {
|
06 |
'WebkitTransition': 'webkitTransitionEnd',
|
07 |
'MozTransition': 'transitionend',
|
08 |
'OTransition': 'oTransitionEnd',
|
09 |
'msTransition': 'MSTransitionEnd',
|
10 |
'transition': 'transitionend'
|
11 |
},
|
12 |
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
|
13 |
support = { transitions : Modernizr.csstransitions };
|
14 |
15 |
function toggleOverlay() {
|
16 |
if( classie.has( overlay, 'open' ) ) {
|
17 |
classie.remove( overlay, 'open' );
|
18 |
classie.add( overlay, 'close' );
|
19 |
var onEndTransitionFn = function( ev ) {
|
20 |
if( support.transitions ) {
|
21 |
if( ev.propertyName !== 'visibility' ) return;
|
22 |
this.removeEventListener( transEndEventName, onEndTransitionFn );
|
23 |
}
|
24 |
classie.remove( overlay, 'close' );
|
25 |
};
|
26 |
if( support.transitions ) {
|
27 |
overlay.addEventListener( transEndEventName, onEndTransitionFn );
|
28 |
}
|
29 |
else {
|
30 |
onEndTransitionFn();
|
31 |
}
|
32 |
}
|
33 |
else if( !classie.has( overlay, 'close' ) ) {
|
34 |
classie.add( overlay, 'open' );
|
35 |
}
|
36 |
}
|
37 |
38 |
triggerBttn.addEventListener( 'click', toggleOverlay );
|
39 |
closeBttn.addEventListener( 'click', toggleOverlay );
|
40 |
})(); |
