Question

我正在为我的第一个官方网站创建一个新的导航菜单，但我遇到了一个问题。使用JQuery更改CSS时，导航菜单会移动位置。有人可以向我解释一个更好的方法来定位菜单，以便它绝对保持中心，并解释思考过程吗？谢谢！

**澄清 - 通过居中我正在改进导航菜单在角落里的方式。我不。当悬停时填充变化时需要任何填充。

以下是我目前的代码。

$(document).ready(function() {

  $('#logo').mouseenter(function() {
    $('#logofade').attr("src", "csweblogoblack.png");
  });

  $('#logo').mouseleave(function() {
    $('#logofade').attr("src", "csweblogo.png");
  });

  $('.menu-item a').mouseenter(function() {
    $(this).css("padding-top", "30px");
    $(this).css("padding-bottom", "30px");
  });

  $('.menu-item a').mouseleave(function() {
    $(this).css("padding-top", "20px");
    $(this).css("padding-bottom", "20px");
  });

});

/* color scheme: #000000 #263248 #7E8AA2 #FFFFFF #FF9800 */

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

nav {
  position: absolute;
  text-align: center;
  width: 900px;
  box-shadow: 10px 10px 20px #888888;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: -70px;
  left: -310px;
}

.menu-item a {
  color: white;
  text-transform: uppercase;
  font-family: 'Inconsolata', monospace;
  font-size: 40px;
  font-weight: bold;
  display: table-cell;
  padding: 20px;
  display: inline-block;
}

.logo a {
  color: white;
  text-transform: uppercase;
  font-family: 'Inconsolata', monospace;
  font-size: 40px;
  font-weight: bold;
  display: table-cell;
  padding: 20px;
  display: inline-block;
}

.menu-item a:hover {
  color: black;
}

#logo img {
  width: 100px;
  height: 100px;
}

#logo a {
  padding: 70px 20% 10px;
  background-color: black;
}

#logo a:hover {
  background-color: #FFFFFF;
}

#home a {
  background-color: #263248;
  padding-left: 30%;
  padding-right: 30%;
}

#contact a {
  background-color: #7E8AA2;
  padding-left: 40%;
  padding-right: 40%;
}

#about a {
  background-color: #FF9800;
  padding-left: 45%;
  padding-right: 45%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Chris Scalzi Portfolio</title>
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <nav>
    <div class="logo" id="logo">
      <a><img id="logofade" src="csweblogo.png" alt="LOGO" /></a>
    </div>
    <div class="menu-item" id="home"><a href="*">Home</a></div>
    <div class="menu-item" id="contact"><a href="*">Contact</a></div>
    <div class="menu-item" id="about"><a href="*">About</a></div>
  </nav>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="script.js"></script>

</body>

</html>

Answer 1

好的，通过将导航高度更改为0px解决了这个问题。不确定为什么这样做......但似乎工作得很好。

如何用css有效地定位我的导航菜单

1 个答案: