更简单的方法来做到这一点？ - 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静态百分比度量来计算它的位置，你可以使用相对<a>元素offsetLeftjavascript属性来计算.box位置