Javascript 更容易做到这一点CSS/JS

我制作了一个简单的菜单，其中的悬停效果随着光标移动，但感觉应该有一种方法可以更加自动化这个过程。现在，我在说悬停效果应该有多大，应该在哪里，这取决于菜单中有多少文本，手动将像素放入宽度和左边距

HTML

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

例如：

---

如果我在菜单上再添加一个a标签，它就会完全混乱。对于这样一个简单的菜单，似乎需要做很多工作。

首先，关于html结构：一个只接受子元素，你不能向它添加元素，因为这是一个错误，每个浏览器都会尝试计算距离，并以自己的方式修复它。所以你必须把它放在外面，在列表之后

---

然后，关于.box动画：您不能使用css静态百分比度量来计算其位置，您可以使用相对元素offsetLeft javascript属性来计算.box位置

您可以使所有菜单选项具有相同的宽度；可能需要重新标记长的。

.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;
}

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