使用Flexbox在下拉菜单上开始需要帮助

Question

我需要帮助与开始或如何启动我的下拉菜单使用flexbox与代码我已经。我已经从我看过的一个教程开始了普通的导航栏，但是教程中没有下拉菜单，所以我自己加了一个。

• 主页
• 关于
• 投资组合
• 平面设计
• 数字肖像
• 插图
• 服务
• 联系我

null

const toggleButton = document.getElementsByClassName('toggleButton')[0]
const navbarLinks = document.getElementsByClassName('navbarLinks')[0]

toggleButton.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
})

.navBar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #91CEC9;
    color: #FFF;    
}

.navbarLinks ul{
    margin: 0;
    padding: 0;
    display: flex;
}

.navbarLinks li{
    list-style: none;
}

.navbarLinks li a{
    text-decoration: none;
    color: #FFF;
    padding: 42px;
    display: block;
    font-size: 20px;
}

.navbarLinks li a:hover{
    background-color: #163640;
}

<nav class="navBar">
        
        <div class="logo">
            <!--Jackie Gray-->
            <img src="images/Logo2.png" alt="jgray logo">
        </div>
        
        <a href="#" class="toggleButton">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        
        <div class="navbarLinks">
            
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a>
                        <li><a href="#">Graphic Design</a></li>
                <li><a href="#">Digital Portrait</a></li>
                <li><a href="#">Illustrations</a></li>
                </li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact Me</a></li>
            </ul>
        
        </div>
    
    </nav>

null

Answer 1

当屏幕尺寸低于1400px时，这个额外的CSS代码将创建一个移动切换按钮汉堡。您还需要为mobile nav菜单添加html代码和css，以及几行javascript来使切换工作。

null

.navBar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #91CEC9;
    color: #FFF;    
}

.navbarLinks ul{
    margin: 0;
    padding: 0;
    display: flex;
}

.navbarLinks li{
    list-style: none;
}

.navbarLinks li a{
    text-decoration: none;
    color: #FFF;
    padding: 42px;
    display: block;
    font-size: 20px;
}

.navbarLinks li a:hover{
    background-color: #163640;
}


#nav-icon3{width:40px;height:45px;position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer;position:absolute;top:25px;right:25px;}
#nav-icon3 span{display:block;position:absolute;height:5.5px;width:100%;background:#000;border-radius:7px;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out;}
#nav-icon3 span:nth-child(1){top:0px;}
#nav-icon3 span:nth-child(2){top:12px;}
#nav-icon3 span:nth-child(2){width:50%!important;}
@media screen and (min-width:1379px){
#nav-icon3{display:none;}
}
@media screen and (max-width:1390px){
  
#nav-icon3{
  display:block!important;}
  .navbarLinks {display:none;}
}

.logo img {
  height:50px;width:50px;
}

html lang-html prettyprint-override"><nav class="navBar">
        
        <div class="logo">
            <!--Jackie Gray-->
            <img src="https://global-uploads.webflow.com/5e157547d6f791d34ea4e2bf/5e17558f848f82e664c09d67_logo-dark.svg" alt="jgray logo">
        </div>
        
        <a href="#" id="nav-icon3">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        
        <div class="navbarLinks">
            
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a>
                        <li><a href="#">Graphic Design</a></li>
                <li><a href="#">Digital Portrait</a></li>
                <li><a href="#">Illustrations</a></li>
                </li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact Me</a></li>
            </ul>
        
        </div>
    
    </nav>