javascript - 显示位置的导航按钮

Question

出于某种原因，我无法使导航位置出现和消失。我不擅长 java 脚本，但我认为这就是问题所在。我正在尝试使位置:WebDesign、摄影、SketchUp、Photoshop、关于、主页在我按下 3 个栏时出现。条形可以变成十字形没问题。

function rotatebar(x) {
            x.classList.toggle("rotate");
        }

.navigation {
    display: inline-block;
    float: right;
    cursor: pointer;
    margin-top: 80px;
    margin-right: 120px;
}
.stripes {
    float: right;
}
.bar1, .bar2, .bar3 {
    width: 30px;
    height: 2px;
    background-color: #fff;
    transition: 0.2S;
}

/* nav button movement */
.bar2, .bar3 {
    margin-top: 7px;
}
.rotate .bar1 {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg) translate( -5px, 7px);
}
.rotate .bar3 {
   -webkit-transform: rotate(45deg);
    transform: rotate(45deg) translate( -6px, -7px); 
}
.rotate .bar2 {
    opacity: 0;
}

/* nav locations */
.navloc {
    display: inline;
    color: #fff;
    font-family: Open sans;
    text-align: center;
    cursor: pointer;
    margin-right: 30px;
    transition: 0.2S;
}
.loc {
    margin: 0;
    padding: 0;
    float: left;
    margin-left: 30px;
    cursor: pointer;
}
.loc:hover {
    color: #ff0000;
    border-bottom: 2px solid;
    margin-bottom: -2px;
}

/* nav locations movement */

.rotate .navloc {
    opacity: 1;
}

<div class="navigation" onclick="rotatebar(this)">
    <div class="navloc"> 
        <p class="loc">WebDesign</p>
        <p class="loc">Photography</p>
        <p class="loc">SketchUp</p>
        <p class="loc">Photoshop</p>
        <p class="loc">About</p>
        <p class="loc">Home</p>
    </div>                     
    <div class="stripes">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
</div>  

Answer 1

您需要在 css 中添加 .navlov 作为 opacity:0 和 display: inline-block。我添加了工作片段看看它。

 function rotatebar(x) {
            x.classList.toggle("rotate");
        
        }

body {
  background: #000;
} 
.navigation {
                display: inline-block;
                float: right;
                cursor: pointer;
                margin-top: 80px;
                margin-right: 120px;
            }
            .stripes {
                float: right;
            }
            .bar1, .bar2, .bar3 {
                width: 30px;
                height: 2px;
                background-color: #fff;
                transition: 0.2S;
            }

            /* nav button movement */
            .bar2, .bar3 {
                margin-top: 7px;
            }
            .rotate .bar1 {
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg) translate( -5px, 7px);
            }
            .rotate .bar3 {
               -webkit-transform: rotate(45deg);
                transform: rotate(45deg) translate( -6px, -7px); 
            }
            .rotate .bar2 {
                opacity: 0;
            }

            /* nav locations */
            .navloc {
                display: inline-block;
                color: #fff;
                font-family: Open sans;
                text-align: center;
                cursor: pointer;
                margin-right: 30px;
                transition: 0.2S;
            }
            .loc {
                margin: 0;
                padding: 0;
                float: left;
                margin-left: 30px;
                cursor: pointer;
            }
            .loc:hover {
                color: #ff0000;
                border-bottom: 2px solid;
                margin-bottom: -2px;
            }

            /* nav locations movement */

.navloc {
                opacity: 0;
            }

            .rotate .navloc {
                opacity: 1;
            }

  <div class="navigation" onclick="rotatebar(this)">
                <div class="navloc"> 
                    <p class="loc">WebDesign</p>
                    <p class="loc">Photography</p>
                    <p class="loc">SketchUp</p>
                    <p class="loc">Photoshop</p>
                    <p class="loc">About</p>
                    <p class="loc">Home</p>
                </div>                     
                <div class="stripes">
                    <div class="bar1"></div>
                    <div class="bar2"></div>
                    <div class="bar3"></div>
                </div>
            </div>