Magic Line Navigation Effect With jQuery And CSS3

File Size: 1.29 KB
Views Total: 5201
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Magic Line Navigation Effect With jQuery And CSS3

A small jQuery script that takes advantage of CSS3 transitions to create a magic line effect on your navigation menu on hover.


How to use it:

1. Create a regular navigation menu on the page.

<div class="menu">
  <div class="menu-item current-menu-item">
    <div class="wee"></div>
  <div class="menu-item">
  <div class="menu-item">
  <div class="menu-item">
  <div class="menu-item">

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="" 

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.