1

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

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

Суть вопроса: помогите реализовать такой, интересный hover эффект. При наведении на другой элемент навигации, нижняя линия должна увеличиваться в размере чтобы точка медленно передвинулась под элемент под hover. Например: Наводим на пункт Семья получаем: длина линия увеличена, позиция точки ровно в центре под пунктом Семья. Ниже приведен javascript код, пытался переделать код MagicLine плагина под себя. Но работает неправильно

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")
        });    
    });
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>

1 ответ 1

2

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.