• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak schować słowa menu ?

VPS Starter Arubacloud
0 głosów
150 wizyt
pytanie zadane 29 grudnia 2018 w HTML i CSS przez Dariusz Hozer Użytkownik (920 p.)

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";
}

 

2 odpowiedzi

+2 głosów
odpowiedź 29 grudnia 2018 przez Danrox Bywalec (2,370 p.)

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 :)

komentarz 29 grudnia 2018 przez Dariusz Hozer Użytkownik (920 p.)

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 

0 głosów
odpowiedź 29 grudnia 2018 przez Dariusz Hozer Użytkownik (920 p.)
Generalnie można identyfikatory dla każdego elementu "a" przypisać....Ale mi chodziło o document.getElementsTagByName (ten nie działa w ogóle)

Podobne pytania

0 głosów
0 odpowiedzi 478 wizyt
pytanie zadane 14 lipca 2016 w C i C++ przez TheSadSmile Użytkownik (870 p.)
0 głosów
1 odpowiedź 88 wizyt
pytanie zadane 20 października 2018 w JavaScript przez `Krzychuu Stary wyjadacz (13,940 p.)
0 głosów
1 odpowiedź 673 wizyt
pytanie zadane 24 marca 2016 w HTML i CSS przez kacper1445 Mądrala (5,030 p.)

92,775 zapytań

141,703 odpowiedzi

320,570 komentarzy

62,109 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...