Jak schować słowa menu ?

Question

Menu mi się wysuwa i chowa :)  Niestety słowa menu nie :....(  Jak temu zaradzić w Javascripcie ? ) 

---

    <nav class="button_with_menu">


    <div class="menu_in_left">
        <div class="button_menu" onclick="wysun()">
                <div></div>
                <div></div>
                <div></div>
                
        
        </div>

    </div>    

            <ul id="menu">




                    <li><a href="about">O MNIE</a>      
                    
                     
                    <li><a href="galeria">GALERIA</a></li> 
                      
                    <li><a href="kontakt"">KONTAKT</a></li> 
                       
                    <li><a href="szukaj">SZUKAJ</a></li> 

                    <li><a href="about">OFERTA</a></li> 
                      
                    <li><a href="galeria">KONTAKT</a></li> 
                
                    <li onclick="cofnij()" >ZAMKNIJ</li> 
            </ul>

    </nav>

---

html>body{
overflow: hidden;
    margin:0;
    padding: 0;
   background:rgb(15, 128, 156);
}
.menu_in_left{

position: absolute;
top:2vh;
right:2vh; 
}

.button_menu>div{
 
    width: 5vh;
    height: 0.7vh;
    opacity:0.8;
    background-size: 100% 100%;
    background: black;
    margin-top:0.8vh;
    margin-right:1vh;
}




.close{
font-size:3.3vh;
z-index: 1;
width:0vh;
height:0vh;
display:none;
color:white;
background: rgb(248, 93, 3);
left:91%;
top:-1.7vh ;
position: absolute;

}



#menu{
position:absolute;
top:24vh;
margin:0;
padding:0;
text-align: center;
height: 56vh;
width:0;
transition-duration:0.3s;
background: rgb(19, 185, 214);

}

li{
    padding: 0.5vh;
    font-size: 3vh;
    font-family: 'Karla', sans-serif;
    font-family: 'Noto Sans TC', sans-serif;
    font-family: 'Fjalla One', sans-serif;
    color:white;
    list-style-type: none;
    border-bottom:solid #000000 0px;
    height: 7vh;
    line-height: 7vh;
    letter-spacing: 0.5vh;
   
}

a{

text-decoration:none;
color:white;

}


#menu>li:hover{
    
    background: rgb(11, 152, 207);
    font-family: 'Karla', sans-serif;
    font-family: 'Noto Sans TC', sans-serif;
    font-family: 'Fjalla One', sans-serif;





}

---

function wysun() {
var x= document.querySelector("#menu");
x.style.width="30%";

var y=document.querySelector(".close");
y.style.display="block";


}


function cofnij() {

var x= document.querySelector("#menu");
x.style.width="0%"; 

var y=document.querySelector(".close");
y.style.display="none";
}

 

Answer 1

Przepraszam, ale nie byłem w stanie połapać się w Twoim kodzie, więc napisałem Ci prosty przykład na szybko ;P

Link do Codepen: https://codepen.io/Danrox/pen/roGbWq

Cały skrypt w tym linku jest oparty na odbieraniu i nadawaniu klasy dla elementu #nav. Za każdym razem, kiedy użyjesz przycisku element #nav schowa się lub pokaże (odpowiada za to funkcja toggle)

W swoim kodzie używasz onclick, lecz lepszą decyzją byłoby przypisanie wydarzenia w pliku z js (addEventListener) Tym samym rozdzielasz html od js :)

Miałeś dobry pomysł i dobrze główkowałeś.

Mam nadzieje, że jakoś pomogłem :)

Comments

Bardzo Ci dziękuję :D też już wpadłem na pomysł :)  

 

function wysun() {
var x= document.querySelector("#menu");
x.style.width="30%";
x.style.fontSize="3vh";
var y=document.querySelector(".close");
y.style.display="block";


}


function cofnij() {

var x= document.querySelector("#menu");
x.style.width="0%"; 
x.style.fontSize="0vh";
var y=document.querySelector(".close");
y.style.display="none";
}

dołączyłem fontSize wcześniej pisałem font.size :D 

Answer 2

Generalnie można identyfikatory dla każdego elementu "a" przypisać....Ale mi chodziło o document.getElementsTagByName (ten nie działa w ogóle)