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

pytanie zadane 25 grudnia 2018 w HTML i CSS przez Dariusz Hozer Użytkownik (920 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ź

odpowiedź 25 grudnia 2018 przez Paweł123 Nałogowiec (33,500 p.)

Może weźmiesz coś z tego https://devcorner.pl/10-niesamowitych-alternatyw-dla-hamburgerowego-menu/

komentarz 25 grudnia 2018 przez Dariusz Hozer Użytkownik (920 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 :)