更简单的方法来做到这一点？ - 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的措施来计算它的位置，你可以使用相对<a>元素offsetLeft JavaScript属性