Magic Line Navigation Effect With jQuery And CSS3
File Size: | 1.29 KB |
---|---|
Views Total: | 5177 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A small jQuery script that takes advantage of CSS3 transitions to create a magic line effect on your navigation menu on hover.
Alternatives:
- Pure CSS3 Animated Sliding Menu
- Responsive Lava Lamp Style Navigation Plugin With jQuery
- jQuery Plugin for Creating a Navigation Menu with Sliding Lines
- jQuery Plugin For LavaLamp-Like Menu Hover Effect - Lavazi
- jQuery Animated Navigation with Sliding Background - Lava Lamp
How to use it:
1. Create a regular navigation menu on the page.
<div class="menu"> <div class="menu-item current-menu-item"> <h6>Home</h6> <div class="wee"></div> </div> <div class="menu-item"> <h6>Contact</h6> </div> <div class="menu-item"> <h6>About</h6> </div> <div class="menu-item"> <h6>Blog</h6> </div> <div class="menu-item"> <h6>Jobs</h6> </div> </div>
2. The necessary CSS/CSS3 styles.
.menu { width: 100%; display: flex; align-items: center; justify-content: center; } .menu .menu-item { position: relative; cursor: pointer; } .menu .menu-item .wee { height: 2px; width: 100%; background-color: #002b75; position: absolute; left: 0; bottom: 0; transition: 0.75s; } .menu .menu-item h6 { margin: 0; padding: 0 1rem 1.5rem; font-size: 1rem; color: #232323; transition: 0.75s; } .menu .menu-item:hover h6 { color: #002b75; } .menu .current-menu-item h6 { color: #002b75; }
3. Load the latest jQuery JavaScript library in the document.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script>
4. The main JavaScript to activate the magic line effect.
$(document).ready(function() { $(window).on('load resize', function() { var $thisnav = $('.current-menu-item').offset().left; $('.menu-item').hover(function() { var $left = $(this).offset().left - $thisnav; var $width = $(this).outerWidth(); var $start = 0; $('.wee').css({ 'left': $left , 'width': $width }); }, function() { var $initwidth = $('.current-menu-item').width(); $('.wee').css({ 'left': '0' , 'width': $initwidth }); }); }); });
This awesome jQuery plugin is developed by Collin Smith. For more Advanced Usages, please check the demo page or visit the official website.