手机端导航栏html自适应,js+css3电脑手机端自适应响应式导航菜单代码

下面是一个简单的例子，展示如何使用HTML、CSS和JavaScript来创建一个响应式导航菜单。该菜单会在电脑和手机端自动适应。

首先，我们需要一个HTML结构，包含一个导航栏和一个菜单按钮。代码如下：

<nav>
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>
</nav>

接下来，我们需要使用CSS来设置导航栏和菜单按钮的样式。代码如下：

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: white;
  position: relative;
  z-index: 1;
}

.logo {
  font-size: 1.5rem;
  margin-left: 1rem;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 50%;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
}

.burger {
  display: none;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px;
}

现在，我们需要使用JavaScript来处理菜单按钮的点击事件，并根据屏幕宽度来切换菜单的显示和隐藏。代码如下：

const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');

burger.addEventListener('click', () => {
  nav.classList.toggle('nav-active');
  burger.classList.toggle('toggle');
});

window.addEventListener('resize', () => {
  if (window.innerWidth > 768) {
    nav.classList.remove('nav-active');
    burger.classList.remove('toggle');
  }
});

最后，我们需要使用CSS来设置响应式菜单的样式。代码如下：

@media screen and (max-width: 768px) {
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }

  .nav-links li {
    opacity: 0;
  }

  .burger {
    display: block;
    position: absolute;
    top: 3vh;
    right: 5vw;
  }

  .nav-active {
    transform: translateX(0%);
  }

  .nav-links li {
    opacity: 1;
    transition: opacity 0.5s ease-in;
  }
}

这些代码将创建一个响应式导航菜单，可以在电脑和手机端自动适应。