javascript - 需要为我的导航创建一个移动版本不成功

Question

我在打开移动版导航栏时遇到了问题。在不知道我的问题是什么的情况下，我尝试了各种可能的方法，但都没有成功! 我尝试使用媒体，但我不知道该怎么做才能让它看起来像来来去去的汉堡包风格。我不得不提到我使用纯 css，所以我缺乏 JS 知识。 如果有人愿意帮助我，我将不胜感激，因为现在我卡住了，我不知道该怎么办。

<nav class="navi" id="target">
<div class="menu">
    <a class="link-1" href="#">home</a>
    <a class="link-1" href="#">info</a>
    <a class="link-1" href="#">contact</a>
    <div class="logo">
    <a href="#"><img alt="Brand" src="logo2.png" height="40px" width="60px"></a>
    </div>
</div>

</nav>

这是导航的CSS:

width:100%;
margin-top: 0;
padding: 10px;
text-align: center;
font-family: arial;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
position:fixed;

text-align:right;
z-index:10;


}
.navi{
background: rgba(0,0, 0, 0.5);


}
.navi:hover{
background-color: rgba(0,0,0, 1);
}

.link-1 {
transition: 0.3s ease;
color: #fff;
font-size: 16px;
text-decoration: none;
border-top: 1px solid ;
text-align:right;
padding: 20px 0px;
margin: 0 20px;
font-weight: italic;
letter-spacing:2px;
}
.link-1:hover {
border-top: 2px solid #fff;

text-decoration: none;
color:#fff;

padding: 3px 6px;

}


.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;

非常感谢!

Answer 1

我建议使用 Bootstrap 3。转到 getbootstrap.com 确保将 bootstrap 的 css 和 javascript 页面包含到您的元素中。汉堡风格导航栏的代码应如下所示:

<div class="container" id="main">
<div class="container">
    <div class="navbar navbar-fixed-top navbar-default">
        <ul class="nav nav-pills unstyled">
            <li class=""><a href="#skills">Skills</a></li>
             <li><a href="#projects">Projects</a></li>
                 <li><a href="#footer">Contact </a></li>
        </ul>


<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>

注意:如果您将浏览器窗口的大小调整到断点以下，您将只能看到汉堡包样式。