Implement this hover the navigational effect



  • Пример ховер эффекта

    Пример ховер эффекта

    The essence of the question is: help to such an interesting hover effect. When applying to another navigation element, the lower line shall be increased to a point slowly shifting under the hover. For example, we get a family item: the length of the line is increased, the position of the point is sharply in the centre of the family. The following is javascript code, trying to redo MagicLine's code underneath itself. But it works wrong.

    var $el, leftPos, newWidth, rightPos,
            $mainNav = $("#magicLineNav");
    
    $mainNav.append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");
    
    $($magicLine)
        .width($(".nav-main").width()/2)
        .css("left", 0)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
    
    $("#magicLineNav li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos
        });
    }, function() {
        $magicLine.stop().animate({
          left: $magicLine.data("origLeft"),
          width: $magicLine.data("origWidth")
        });    
    });</code></pre><pre class="snippet-code-css lang-css prettyprint-override"><code>header .nav-main {
    

    display: inline-block;
    vertical-align: middle;
    position: relative;
    }
    header .nav-main ul {
    padding-left: 0;
    margin-left: 160px;
    margin-bottom: 0;
    float: left;
    margin-top: 18px;
    padding-bottom: 7px;
    }
    header .nav-main ul li {
    display: inline-block;
    list-style-type: none;
    margin-right: 20px;
    }
    header .nav-main ul li:last-child {
    margin-right: 0;
    }
    header .nav-main ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-size: 1rem;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
    position: relative;
    text-transform: uppercase;
    }
    header .nav-main ul li a:after {
    content: '';
    position: absolute;
    bottom: -9px;
    right: 0;
    height: 2px;
    width: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    }
    header #magic-line {
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 1px;
    background: #fff;
    }
    header #magic-line:after {
    width: 7px;
    height: 7px;
    position: absolute;
    background: #fff;
    content: "";
    right: 0;
    top: -3px;
    border-radius: 50%;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <header>
    <nav class="nav-main hidden-xs">
    <div class="h-name"><h1>Lorem Lorem lorem</h1></div>
    <ul class="clearfix" id="magicLineNav">
    <li class="active"><a href="index.html">О себе</a></li>
    <li><a href="family.html">СЕМЬЯ</a></li>
    <li><a href="gallery.html">Галерея</a></li>
    </ul>
    </nav>
    </header>



  • function menu() {
      var menu = jQuery('#magicLineNav'),
          line = jQuery('.line'),
          start = menu.offset().left;
      jQuery('li', menu).hover(function() {
        line.width(start + $(this).position().left + $(this).width() / 2);
      }, function() {
        line.width(0);
      })
    }
    

    jQuery(function($) {
    menu();
    })

    #magicLineNav {
    list-style: none;
    }
    .nav-main li {
    float: left;
    padding: 10px 20px;
    background: #ccc;
    }
    .line {
    position: absolute;
    left: 0;
    width: 0;
    border-bottom: 1px solid #000;
    transition: width .5s;
    margin-top: 20px;
    }
    .line:after {
    content: '';
    float: right;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    position: relative;
    top: 5px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <header>
    <nav class="nav-main hidden-xs">
    <div class="h-name"><h1>Lorem Lorem lorem</h1></div>
    <ul class="clearfix" id="magicLineNav">
    <li class="active"><a href="index.html">О себе</a></li>
    <li><a href="family.html">СЕМЬЯ</a></li>
    <li><a href="gallery.html">Галерея</a></li>
    </ul>
    <div class="line"></div>
    </nav>
    </header>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2