导航栏切换很重要

Question

我想知道如何使用 jquery 创建响应式导航栏。 javascript 用于切换导航栏的动画，而不是导航链接。我怎样才能做到这一点？我想知道当 #nav-icon1 被切换时菜单下拉菜单是否只是动画。

Js

$(document).ready(function(){
    $('#nav-icon1').click(function(){
        $(this).toggleClass('open');
    });
});

Html

<header>
    <a href="index.html" class="logo"><img src="images/logo/logo.svg" alt=""  width="250px"></a>

    <nav>
        <ul class="nav-links open">

            <li><a href="index.html" class="a1" >Explore</a></li>
            <li><a href="index.html" class="a1" >About</a></li>
            <li><a href="index.html" class="a1" >Pricing</a></li>
            <li><a href="index.html" class="a1" >Login</a></li>
            <li id="line-1">
                <div class="line"></div>
            </li>
            <li><a href="index.html" class="register">
                <button>Register</button>
            </a></li>
        </ul>
    </nav>

    <div id="nav-icon1">
        <span></span>
        <span></span>
        <span></span>
    </div>
</header>

Css

@media (max-width: 1200px) {

    header {
        flex-direction: column;
    }
    #line-1{
        padding: 0;
    }
    .line{
        display: none;
    }
    .logo{
        padding-bottom: 30px;
    }
    nav ul {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    .nav-links{
        display: none;
        width: 100%;
    }
    nav ul li a{
        padding: 50px;
        font-size: 35px;
    }
    .nav-links li .a1:hover {
        background-color: white;
        border: none;
        color: black;
        font-size: 50px;
        overflow: hidden;
        padding: 10px 25px 40px;

    }
    .register button{
        font-size: 25px;
        border-radius: 45px;
        padding: 15px 30px;
        margin-left: 5px;
    }
    .open{
        display: flex;
    }

}

Answer 1

我对你的问题有点困惑。我应该相信你想要这样的东西。

或者在我创建的 Codepen 上试试这个 https://codepen.io/Preygremmer15/pen/LYLbdmq

$(document).ready(function(){
    $('#nav-icon1').click(function(){
        //target myNav id to toggle class 'open'

        $("#myNav").toggleClass('open');
    });
});

body {
  font-family: Lato;
  background-color: #f5f5f5;
  margin: 0;
}

header {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  background-color: grey;
}

header img {
  padding: 0 10px;
  height: 40px;
  object-fit: cover;
}

#nav-icon1 {
  position: absolute;
  right: 15px;
  display: none; 
  align-items: center;
  justify-content: center;
  font-size: 20px;
  height: 40px;
}

#nav-icon1:hover {
cursor: pointer;
}

#nav-icon1 span {
  height: 6px;
}

#myNav ul {
  display: flex;
  gap: 10px;
}

#myNav ul li {
  list-style: none;
 
}

#myNav ul li a {
  text-decoration: none;
  color: #fff;
}

.open {
 display: flex !important;
  width: 200px;
}

@media (max-width: 1200px) {
    #nav-icon1 {
        display: flex;
    }
    
    #myNav {
        display: none;
        position: absolute;
        background-color: white;
        top: 60px;
        right: 0;
        height: auto;
        width: 200px;
    }
    
    #myNav ul {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     width: 100%;
     height: 100%;
     padding: 15px 15px;
    }
    
    #myNav ul li a {
      color: #000;
      font-size: 20px;
    }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <a href="index.html" class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/1280px-Stack_Overflow_logo.svg.png" alt="">
      
    </a>

    <nav id="myNav">
        <ul class="nav-links">

            <li><a href="index.html" class="a1" >Explore</a></li>
            <li><a href="index.html" class="a1" >About</a></li>
            <li><a href="index.html" class="a1" >Pricing</a></li>
            <li><a href="index.html" class="a1" >Login</a></li>
            <li id="line-1">
                <div class="line"></div>
            </li>
            <li><a href="index.html" class="register">
                <button>Register</button>
            </a></li>
        </ul>
    </nav>
    
    <div id="nav-icon1">
      <i class="fa fa-bars"></i>
        <!--<span>-</span>
        <span>-</span>
        <span>-</span>-->
    </div>
    
    
</header>

导航栏切换很重要

Nav-bar toggle matters

html

javascript

css

jquery

navbar