如何在顶部制作响应式导航

Question

I want to make a responsive navigation on my website.我想在我的网站上进行响应式导航。 i didn't use a grid I tried我没有使用我试过的网格

@media screen and (max-width: 600px) {
.menu{
    height: 100%;
    width: 15px;
    float: top;

}} }}

but that don't work I want it to get on the top of my website但这不起作用我希望它出现在我网站的顶部

Answer 1

There are many references available on the web you can take references from w3schools.com, bootstrap, codepen etc. web 上有很多参考资料，您可以从 w3schools.com、bootstrap、codepen 等获取参考资料。

try below one,尝试下面的一个，

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

References:参考：

Note: float:top is not working注意： float:top不起作用

Answer 2

So some suggestions: Send the html code or jsut some of it.所以一些建议：发送 html 代码或只是其中的一些。 You can also try adding margin: 0;您也可以尝试添加 margin: 0; to the body:对身体：

body{
 margin: 0;
}

You will also need to add a background - color:您还需要添加背景颜色：

.menu {
 background-color: red;
}

And more stuff could be added but you can check this: https://www.w3schools.com/howto/howto_css_style_header.asp This helps a lot可以添加更多的东西，但你可以检查这个： https://www.w3schools.com/howto/howto_css_style_header.asp这有很大帮助

Answer 3

You can use this codepen which I had made yesterday or may be before that, I don't remember:-您可以使用我昨天或之前制作的代码笔，我不记得了：-

https://codepen.io/CodingPencil/pen/abEWzXp https://codepen.io/CodingPencil/pen/abEWzXp

Or just copy my code here:-或者只是在这里复制我的代码：-

HTML - HTML -

 <nav>
  <div>
    <a href="#" class="logo">Something</a>
  </div>
  <div>
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="menu" id="menu">
    <span></span>
    <span></span>
    <span></span>
  </div>
</nav>

CSS - CSS -

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root {
  --nav-bg: #03000e;
  --main-clr: dodgerblue;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  width: 100%;
  background: #03000e;
}

nav .logo {
  color: #fff;
  text-decoration-color: var(--main-clr);
  font-size: 22px;
  font-family: "Playfair Display", serif;
  font-weight: 100;
}

nav ul {
  --padding: 20px;
  --font-size: 17px;

  list-style: none;
  display: flex;
  align-items: center;
  font-size: var(--font-size);
  overflow-y: hidden;
  transition: 1s ease;
}

nav ul li {
  padding: var(--padding);
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  position: relative;
}

nav ul li a::after {
  content: "";
  width: 0%;
  height: 2.5px;
  border-radius: 99px;
  background: var(--main-clr);
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 0.3s ease;
}

nav ul li a:hover::after {
  width: 100%;
}

nav .menu {
  width: 22px;
  height: 16px;
  cursor: pointer;
  display: none;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  margin: 20px;
}

nav .menu span {
  width: 100%;
  height: 2px;
  border-radius: 99px;
  background: #fff;
  transition: 0.3s ease;
  transform-origin: left;
}

nav .menu.active span {
  background: var(--main-clr);
}

nav .menu.active span:nth-child(1) {
  transform: rotate(40deg);
}

nav .menu span:nth-child(3) {
  transform-origin: left;
}

nav .menu.active span:nth-child(3) {
  transform: rotate(-40deg);
}

nav .menu.active span:nth-child(2) {
  transform: scale(0);
}

@media (max-width: 910px) {
  nav .menu {
    display: flex;
  }

  nav ul {
    --height: 0px;

    flex-direction: column;
    background: var(--nav-bg);
    position: absolute;
    width: 100%;
    left: 0;
    top: 56px;
    height: var(--height);
    transition: 1s ease;
  }

  nav ul.active {
    --height: calc(
      (((var(--padding) * 2) + (var(--font-size) * 1.5))) * var(--childenNumber)
    );
    transition: 1s ease;
  }

  nav ul li {
    width: 100%;
    text-align: center;
  }
  nav ul li a {
    width: 100%;
    text-transform: capitalize;
  }
}

And the JAVASCRIPT -和 JAVASCRIPT -

const navigation = document.getElementById("nav");
const menu = document.getElementById("menu");

menu.addEventListener("click", () => {
  navigation.style.setProperty("--childenNumber", navigation.children.length);

  navigation.classList.toggle("active");
  menu.classList.toggle("active");
});

如何在顶部制作响应式导航

问题描述

3 个解决方案

解决方案1
0 2022-03-28 13:33:17

解决方案2
0 2022-03-28 13:34:17

解决方案3
0 2022-03-28 14:00:24

如何在顶部制作响应式导航

问题描述

3 个解决方案

解决方案1 0 2022-03-28 13:33:17

解决方案2 0 2022-03-28 13:34:17

解决方案3 0 2022-03-28 14:00:24

解决方案1
0 2022-03-28 13:33:17

解决方案2
0 2022-03-28 13:34:17

解决方案3
0 2022-03-28 14:00:24