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