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

Jak zrobić, żeby menu się chowało razem z panelem bocznym ?

0 głosów
110 wizyt
pytanie zadane 25 grudnia 2018 w HTML i CSS przez Dariusz Hozer Użytkownik (790 p.)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <link href="./index.css" rel="stylesheet" type="text/css" >
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
   
   <div class="menu">
        <a href="javascript:void(0)" class="closebtn" onclick="cofnij()">&times;</a>

                <ul>
                <li><a href="default.asp">Home</a></li>
                <li><a href="news.asp">News</a></li>
                <li><a href="contact.asp">Contact</a></li>
                <li><a href="about.asp">About</a></li>
                </ul>

                                                            </div>






   <div class="button" onclick="wysun()"></div>

</body>
</html>

body{

margin: 0;
padding: 0;


}


.button{
width: 5vh;
height: 5vh;
background-image: url("./icon.png");
background-size: 100% 100%;
position:absolute;
right:1vh;
top:1vh;

}

.menu{
    width: 0%;
    height:100vh;
    background-color: black;
    position: absolute;
    left:0%;
    transition: 0.5s;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
        background-color: #f1f1f1;
        text-align:center;
        font-size:2vh;
      }
      
      li a  {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
      }
      
      /* Change the link color on hover */
      li a:hover {
        background-color: #555;
        color: white;
      }

function wysun(){

var x=document.querySelector(".menu");

x.style.width="10%";

}
function cofnij(){

var y=document.querySelector('.menu');

y.style.width="0%";



}

 

1 odpowiedź

0 głosów
odpowiedź 25 grudnia 2018 przez Paweł123 Nałogowiec (33,580 p.)
komentarz 25 grudnia 2018 przez Dariusz Hozer Użytkownik (790 p.)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <link href="./index.css" rel="stylesheet" type="text/css" >
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
   
   <div class="menu">
        <a href="javascript:void(0)" class="closebtn" onclick="cofnij()">&times;</a>

                
                   <div class="one">
                       <a href="default.asp">Home</a><br>
                       <a href="news.asp">Projects</a><br>
                       <a href="contact.asp">Contact</a><br>
                       <a href="about.asp">About</a></div>
                                                        </div>






   <div class="button" onclick="wysun()"></div>

</body>
</html>

{

margin: 0;
padding: 0;


}


.button{
width: 5vh;
height: 5vh;
background-image: url("./icon.png");
background-size: 100% 100%;
position:absolute;
right:1vh;
top:1vh;

}

.menu{
    width: 0%;
    height:100vh;
    background-color: black;
    position: relative;
    left:0%;
    transition: 0.3s;
    }

  .one{
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
        background-color: #f1f1f1;
        text-align:center;
        font-size:2vh;
        float:both;
        display:none;
        
    }
      
   

function wysun(){
var y=document.querySelector(".one");
var x=document.querySelector(".menu");

x.style.width="10%";
y.style.display="block";
}

function cofnij(){
var y=document.querySelector(".one");
var z=document.querySelector('.menu');

z.style.width="0%";
y.style.display="none";


}

 Takie najprostsze rozwiązanie jakie może być wg mnie :)

Podobne pytania

–1 głos
0 odpowiedzi 33 wizyt
0 głosów
1 odpowiedź 101 wizyt
pytanie zadane 12 listopada 2019 w Nasze projekty przez KrzysztofKord Nowicjusz (120 p.)
+2 głosów
2 odpowiedzi 260 wizyt
pytanie zadane 22 lutego 2021 w HTML i CSS przez Adusiek Użytkownik (660 p.)

88,677 zapytań

137,288 odpowiedzi

306,652 komentarzy

58,873 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...