Fullscreen Navigation With Background Image Switching
File Size: | 1.81 KB |
---|---|
Views Total: | 951 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A pretty cool fullscreen navigation that dynamically switches between background images when hovering over menu items.
Built with plain HTML/CSS and a little bit of JavaScript (jQuery).
How to use it:
1. Create a nav list and assign images to each menu items using the data-image
attribute:
<ul class="navi"> <li data-image="1.jpg"> <a href="#" data-text="JQUERY">JQUERY</a> </li> <li data-image="2.jpg"> <a href="#" data-text="SCRIPT">SCRIPT</a> </li> <li data-image="3.jpg"> <a href="#" data-text="NET">NET</a> </li> </ul>
2. Create an empty container to hold the background images.
<div class="photo"></div>
3. The required CSS styles for the navigation.
.navi { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); list-style: none; margin: 0; padding: 0; z-index: 100; } .navi li a { font-size: 4em; color: #fff; position: relative; } .navi li a:before { position: absolute; color: yellowgreen; top: 0; left: 0; width: 0; overflow: hidden; content: attr(data-text); transition: 0.6s; } .navi li a:hover:before { width: 100%; }
4. Apply CSS styles to the background images.
.photo { background-color: #ddd; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(initial.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; transition: 0.5s; }
5. The main JavaScript (jQuery script) to swich background images when hovering over menu items.
$('.navi li').mouseenter(function () { var changeImage = $(this).attr('data-image') $('.photo').css({ 'background-image': 'url(' + changeImage + ')' }) }) $('.navi li').mouseleave(function () { $('.photo').css({ 'background-image': '' }) })
This awesome jQuery plugin is developed by Amber-Kim. For more Advanced Usages, please check the demo page or visit the official website.