Простой способ сделать это? - CSS/JS

Question

Я сделал простое меню, где эффект наведения движется с помощью курсора, но похоже, что должен быть способ автоматизировать процесс больше. Прямо сейчас, я говорю, насколько большой и где должен быть эффект наведения, в зависимости от того, сколько текста в меню, вручную помещая пиксели в ширину и левое поле.

HTML

<div class="sticky"> 
<nav class="top-bar" data-topbar role="navigation" > 
    <ul class="title-area"> 
    <li class="name"> 
     <a class="th logoconfig" href="#"> 
     <img src="http://placehold.it/220x60&text=[Logo]" /> 
     </a> 
    </li> 
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
    </ul> 
    <section class="top-bar-section"> 
    <!-- Left Nav Section --> 
    <ul class="right"> 
     <li class="one"><a href="#">Forside</a></li> 
     <li class="two"><a href="#">Bartender</a></li> 
     <li class="three"><a href="#">Deejay</a></li> 
     <li class="four"><a href="#">Pakkeløsninger</a></li> 
     <li class="five"><a href="#">Kontakt</a></li> 
     <div class="box"></div> 
    </ul> 
    </section> 
</nav> 

CSS

.top-bar { 
    background-color: #3e6979; 
    height: 80px; 
    text-align: center; 
    transition: all 0.4s ease; 
    width: 100%; 
    z-index: 1; 
    background-position: center; 
    position: absolute; 
} 

.box { 
    background-color: #265364; 
    height: 5rem; 
    margin-left: 0.5%; 
    width: 6.3rem; 
} 

.activelinkone { 
    margin-left: 0.5%; 
    width: 6.3rem; 
    transition: all 0.2s 0.1s ease; 
} 

.activelinktwo { 
    margin-left: 17.2%; 
    width: 8rem; 
    transition: all 0.2s 0.1s ease; 
} 

.activelinkthree { 
    margin-left: 38.5%; 
    width: 5.5rem; 
    transition: all 0.2s 0.1s ease; 
} 

.activelinkfour { 
    margin-left: 53.5%; 
    width: 11.5rem; 
    transition: all 0.2s 0.1s ease; 
} 

.activelinkfive { 
    margin-left: 81.7%; 
    width: 8rem; 
    transition: all 0.2s 0.1s ease; 
} 

.one:hover ~ .box { 
    margin-left: 0.5%; 
    transition: all 0.4s ease; 
    width: 6.3rem; 
} 

.two:hover ~ .box { 
    margin-left: 17.2%; 
    transition: all 0.4s ease; 
    width: 8rem; 
} 

.three:hover ~ .box { 
    margin-left: 38.5%; 
    transition: all 0.4s ease; 
    width: 5.5rem; 
} 

.four:hover ~ .box { 
    margin-left: 53.5%; 
    transition: all 0.4s ease; 
    width: 11.5rem; 
} 

.five:hover ~ .box { 
    margin-left: 81.7%; 
    transition: all 0.4s ease; 
    width: 8rem; 
} 

.top-bar-section ul { 
    margin-right: 5.5rem; 
} 

.top-bar-section ul li { 
    background: none; 
} 

.top-bar-section ul li > a { 
    font-size: 18px; 
    font-weight: 500; 
    font-family: 'Raleway', sans-serif; 
    text-transform: uppercase; 
    color: #000; 
} 

.top-bar-section ul li:not(.has-form) > a { 
    background: none; 
} 

.top-bar-section ul li:hover:not(.has-form) > a { 
    color: #fff; 
    transition: all 0.4s ease; 
} 

.top-bar-section li:not(.has-form) a:not(.button) { 
    padding-top: 1rem; 
    padding-bottom: 1.16rem; 
    background: none; 
} 

.top-bar-section li:not(.has-form) a:not(.button):hover { 
    background: none; 
} 

.activelink { 
    background-color: #3e6979; 
    margin-left: 0%; 
} 

.stick { 
    font-size: 24px; 
    height: 60px; 
    padding-top: 0rem; 
    text-align: left; 
    padding-left: 20px; 
    margin-top: 0rem; 
} 

.logoconfig { 
    margin-left: 20px; 
    margin-top: 10px; 
    border: none; 
    transition: all 0.4s ease; 
} 

.logoconfigsmall { 
    margin-top: 0px; 
} 

.logoconfigsmall img { 
    height: 58px; 
    transition: all 0.4s ease; 
} 

JavaScript

$(window).scroll(function() { 
    if ($(this).scrollTop() > 1) { 
     $('.logoconfig').addClass("logoconfigsmall"); 
    } else { 
     $('.logoconfig').removeClass("logoconfigsmall"); 
    } 

    if ($(this).scrollTop() > 1) { 
     $('.toppen').removeClass("topdesign"); 
    } else { 
     $('.toppen').addClass("topdesign"); 
    } 

    if ($(this).scrollTop() > 1) { 
     $('.top-bar').addClass("stick"); 
    } else { 
     $('.top-bar').removeClass("stick"); 
    } 

    if ($(this).scrollTop() > 1) { 
     $('.box').css({ 
      "height": "3.73rem" 
     }); 

    } else { 
     $('.box').css({ 
      "height": "5rem" 
     }); 

    } 

}); 


function getUrlParameter(sParam) { 
    var sPageURL = window.location.search.substring(1); 
    var sURLVariables = sPageURL.split('&'); 
    for (var i = 0; i < sURLVariables.length; i++) { 
     var sParameterName = sURLVariables[i].split('='); 
     if (sParameterName[0] == sParam) { 
      return sParameterName[1]; 
     } 
    } 
} 

var page = getUrlParameter('page'); 


if (page == "nav1") { 
    $('.box').addClass("activelinkone"); 
} 

if (page == "nav2") { 
    $('.box').addClass("activelinktwo"); 
} 

if (page == "nav3") { 
    $('.box').addClass("activelinkthree"); 
} 

if (page == "nav4") { 
    $('.box').addClass("activelinkfour"); 
} 

if (page == "nav5") { 
    $('.box').addClass("activelinkfive"); 
} 

Пример: CodePen link

Если я добавлю еще один тег a в меню, он будет полностью испорчен. Похоже, что для такого простого меню очень много работы.

Answer 1

первую очередь, о HTML структуры: <ul> принимает только <li> элементы, как дети, вы не можете добавить <div> элемент к нему, потому, что его ошибка, и каждый браузер будет пытаться вычислять расстояния и зафиксировать его в своем роде , Таким образом, вы должны выставить его снаружи, после списка.

то, о .box анимации: вы не можете использовать CSS статического percentual меры, чтобы вычислить его положение, можно вычислить .box позиции, используя относительный <a> элемент offsetLeft Javascript свойства