ナビゲーションボタンの位置をapear

Question

何らかの理由で私はナビゲーション位置apearとdisapearを作ることができません。私はJavaのスクリプトでは良くないが、私はそれが問題だと思う。私は3つのバーを押すとWebDesign、写真、SketchUp、Photoshop、About、Home apearのような場所を作ろうとしています。バーは問題なくクロスに変わることができます。

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

あなたはopacity:0とCSSでdisplay: inline-blockとして.navlovを追加する必要があります。私はそれに作業スニペットを追加しました。

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>