サイドナビゲーションhtml/css/javascript

Question

私はドロップダウンリストでサイドナビゲーションを行いました。しかし、それは動作しません。 私はドロップダウンすべきものでリストを作成しましたが、リストの半分だけが実際にドロップダウンします。私はすべてがドロップダウンし、メニューが長くなりすぎないようにスクロールバーが表示されます。

誰かがこれを手伝ってくれますか？あなたの質問の私の理解では

html { 
 
    background-color: #CEF6F5; 
 
    width: auto; 
 
    height: auto; 
 
} 
 

 
p { 
 
    color: black; 
 
} 
 

 
h { 
 
    color: black; 
 
    font-size: 40px; 
 
    padding-left: 18px; 
 
    font-family: Castellar; 
 
} 
 

 
u1.img-list { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding 0; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 

 
ul.img-list li { 
 
    display: inline-block; 
 
    height: 150px; 
 
    margin: 0 1em 1em 0; 
 
    position: relative; 
 
    width: 150px; 
 
    text-decoration: none; 
 
} 
 

 
span { 
 
    font-size: 50px; 
 
} 
 

 
span.text-content { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    height: 150px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 150px; 
 
} 
 

 
span.text-content span { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
span.text-content { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    height: 150px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 150px; 
 
    opacity: 0; 
 
} 
 

 
ul.img-list li:hover span.text-content { 
 
    opacity: 1; 
 
} 
 

 
span.text-content { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    height: 150px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 150px; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
} 
 

 
#one { 
 
    background-color: #F3F781; 
 
    color: black; 
 
    width: 850px; 
 
    height: auto; 
 
    margin-top: 5px; 
 
    margin-left: 1; 
 
    padding: 5px 5px 5px 5px; 
 
    float: right; 
 
    border-style: double; 
 
} 
 

 
.a { 
 
    width: auto; 
 
    padding: 0px; 
 
} 
 

 
.sidenav { 
 
    height: 100%; 
 
    width: 313px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    padding-top: 60px; 
 
    transition: 0.5s; 
 
} 
 

 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
    font-family: Helvetica; 
 
} 
 

 
.sidenav a:hover, 
 
.offcanvas a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .sidenav { 
 
    padding-top: 15px; 
 
    } 
 
    .sidenav a { 
 
    font-size: 18px; 
 
    } 
 
} 
 

 
button.accordion { 
 
    background-color: #111; 
 
    color: #111; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    text-align: left; 
 
    border: none; 
 
    outline: none; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion.active, 
 
button.accordion:hover { 
 
    background-color: #111; 
 
} 
 

 
div.panel { 
 
    padding: 0 0px; 
 
    background-color: black; 
 
    display: none; 
 
} 
 

 
div.panel.show { 
 
    display: block; 
 
} 
 

 
div.panel { 
 
    padding: 0 0px; 
 
    background-color: black; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: 0.6s ease-in-out; 
 
    opacity: 0; 
 
} 
 

 
div.panel.show { 
 
    opacity: 1; 
 
    max-height: 500px; 
 
} 
 

 
button.accordion { 
 
    background-color: #111; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 0px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion.active, 
 
button.accordion:hover { 
 
    background-color: #111; 
 
} 
 

 
button.accordion:after { 
 
    content: '\02795'; 
 
    font-size: 13px; 
 
    color: #777; 
 
    float: right; 
 
    margin-right: 15px; 
 
} 
 

 
button.accordion.active:after { 
 
    content: "\2796"; 
 
} 
 

 
div.panel { 
 
    padding: 0 0px; 
 
    background-color: #111; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: 0.6s ease-in-out; 
 
    opacity: 0; 
 
} 
 

 
div.panel.show { 
 
    opacity: 1; 
 
    max-height: 500px; 
 
} 
 

 
li { 
 
    margin-left: 20px; 
 
    list-style: none; 
 
} 
 

 
footer { 
 
    margin-top: 100000px; 
 
} 
 

 
#left { 
 
    float: left; 
 
    margin-left: 0px; 
 
} 
 

 
#ten { 
 
    font-size: 45px; 
 
}

<!DOCTYPE html> 
 
<html lang="nl"> 
 

 
<head> 
 
    <title> 
 
    Latijnse geschiedenis 
 
    </title> 
 

 
    <meta charset="utf-8"> 
 

 
    <link rel="stylesheet" href="Home.css"> 
 

 
</head> 
 

 
<body> 
 
    <div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> 
 
    <a href="#">Home</a> 
 
    <button class="accordion"><a href="#">Informatie</a> </button> 
 
    <div class="panel"> 
 

 

 
     <tr id="two"> 
 
     <div id="left"> 
 
      <li> 
 
      <a href="115.000.html">115.000 v.C</a> 
 
      <a href="200.html">200</a> 
 
      <a href="plaatje3.html">1652</a> 
 
      <a href="plaatje4.html">1713</a> 
 
      <a href="plaatje5.html">1779</a> 
 
      <a href="plaatje6.html">1795</a> 
 
      <a href="plaatje7.html">1803</a> 
 
      <a href="1835.html">1835</a> 
 
      <a href="1849.html">1849</a> 
 
      <a href="1852.html">1852</a> 
 
      <a href="1855.html">1855</a> 
 
      <a href="1858.html">1858</a> 
 
      <a href="1859.html">1859</a> 
 
      <a href="1880.html">1880</a> 
 
      <a href="1912.html">1912</a> 
 
      <a href="1930.html">1930</a> 
 
      <a href="1948.html">1948</a> 
 
      <a href="1964.html">1964</a> 
 
      <a href="1983.html">1983</a> 
 
      <a href="1997.html">1997</a> 
 
      <a href="2013.html">2013</a> 
 
      </li> 
 
     </div> 
 
     </tr> 
 
    </div> 
 
    </div> 
 

 
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span> 
 

 
    <h>Tijdlijn van de geschiedenis van de Romeinen</h> 
 

 
    <script> 
 
    function openNav() { 
 
     document.getElementById("mySidenav").style.width = "313px"; 
 
    } 
 

 
    function closeNav() { 
 
     document.getElementById("mySidenav").style.width = "0"; 
 
    } 
 

 
    var acc = document.getElementsByClassName("accordion"); 
 
    var i; 
 

 
    for (i = 0; i < acc.length; i++) { 
 
     acc[i].onclick = function() { 
 
     this.classList.toggle("active"); 
 
     this.nextElementSibling.classList.toggle("show"); 
 
     } 
 
    } 
 
    </script> 
 

 
    <ul class="img-list"> 
 
    <li> 
 
     <a href="Aeneas.html"> 
 
     <img src="1.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span id= "ten">115.000 v.C</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="2.html"> 
 
     <img src="2.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>200</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="3.html"> 
 
     <img src="3.png" width="150" height="150" /> 
 
     <span class="text-content"><span>1652</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="4.html"> 
 
     <img src="4.png" width="150" height="150" /> 
 
     <span class="text-content"><span>1713</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="5.html"> 
 
     <img src="5.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1779</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="6.html"> 
 
     <img src="6.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1795</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="7.html"> 
 
     <img src="7.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1803</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="8.html"> 
 
     <img src="8.png" width="150" height="150" /> 
 
     <span class="text-content"><span>1835</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1849.html"> 
 
     <img src="1849.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1849</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1852.html"> 
 
     <img src="1852.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1852</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1855.html"> 
 
     <img src="1855.png" width="150" height="150" /> 
 
     <span class="text-content"><span>1855</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1858.html"> 
 
     <img src="1858.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1858</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1859.html"> 
 
     <img src="1859.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1859</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1880.html"> 
 
     <img src="1880.png" width="150" height="150" /> 
 
     <span class="text-content"><span>1880</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1912.html"> 
 
     <img src="1912.png" width="150" height="150" /> 
 
     <span class="text-content"><span>1912</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1930.html"> 
 
     <img src="1930goed.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1930</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1948.html"> 
 
     <img src="1948.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1948</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1964.html"> 
 
     <img src="1964.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1964</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1983.html"> 
 
     <img src="1983.png" width="150" height="150" /> 
 
     <span class="text-content"><span>1983</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1997.html"> 
 
     <img src="1997!.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1997</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="2013.html"> 
 
     <img src="2013.png" width="150" height="150" /> 
 
     <span class="text-content"><span>2013</span></span> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
    <footer> 
 

 
    </footer> 
 

 
</body> 
 

 
</html>

Answer 1

：

は、ここに私のコードです。

1）div that containing list itemsにはoverflow: scrollを追加する必要があります。

2）div that containing list itemsにはheight:400px;を追加する必要があります。

#left { 
    margin-left: 0px; 
    height:400px; 
    overflow: scroll; 
} 

その他の提案：あなただけに<ul id="#left">の代わりに、より優れた外観の変更については<div id="#left">

を使用することができます。

#left { 
     margin-left: 0px; 
     height:400px; 
     overflow: scroll; 
     clear: both; 
    } 

2を#leftするclear:bothを追加）

1）overflow-x: hiddenを削除します.sidenavから。

span { 
 
    font-size: 50px; 
 
} 
 
.sidenav { 
 
    height: 100%; 
 
    width: 313px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    padding-top: 60px; 
 
    transition: 0.5s; 
 
} 
 

 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
    font-family: Helvetica; 
 
} 
 

 
.sidenav a:hover, 
 
.offcanvas a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .sidenav { 
 
    padding-top: 15px; 
 
    } 
 
    .sidenav a { 
 
    font-size: 18px; 
 
    } 
 
} 
 

 
button.accordion { 
 
    background-color: #111; 
 
    color: #111; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    text-align: left; 
 
    border: none; 
 
    outline: none; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion.active, 
 
button.accordion:hover { 
 
    background-color: #111; 
 
} 
 

 
div.panel { 
 
    padding: 0 0px; 
 
    background-color: black; 
 
    display: none; 
 
} 
 

 
div.panel.show { 
 
    display: block; 
 
} 
 

 
div.panel { 
 
    padding: 0 0px; 
 
    background-color: black; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: 0.6s ease-in-out; 
 
    opacity: 0; 
 
} 
 

 
div.panel.show { 
 
    opacity: 1; 
 
    max-height: 500px; 
 
} 
 

 
button.accordion { 
 
    background-color: #111; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 0px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion.active, 
 
button.accordion:hover { 
 
    background-color: #111; 
 
} 
 

 
button.accordion:after { 
 
    content: '\02795'; 
 
    font-size: 13px; 
 
    color: #777; 
 
    float: right; 
 
    margin-right: 15px; 
 
} 
 

 
button.accordion.active:after { 
 
    content: "\2796"; 
 
} 
 

 
div.panel { 
 
    padding: 0 0px; 
 
    background-color: #111; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: 0.6s ease-in-out; 
 
    opacity: 0; 
 
} 
 

 
div.panel.show { 
 
    opacity: 1; 
 
    max-height: 500px; 
 
} 
 

 
li { 
 
    margin-left: 20px; 
 
    list-style: none; 
 
} 
 

 
#left { 
 
    margin-left: 0px; 
 
    height:400px; 
 
    overflow-y: scroll; 
 
    clear: both; 
 
} 
 

 
#ten { 
 
    font-size: 45px; 
 
}

<body> 
 
    <div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> 
 
    <a href="#">Home</a> 
 
    <button class="accordion"><a href="#">Informatie</a> </button> 
 
    <div class="panel"> 
 
     <tr id="two"> 
 
     <ul id="left"> 
 
      <li> 
 
      <a href="115.000.html">115.000 v.C</a> 
 
      <a href="200.html">200</a> 
 
      <a href="plaatje3.html">1652</a> 
 
      <a href="plaatje4.html">1713</a> 
 
      <a href="plaatje5.html">1779</a> 
 
      <a href="plaatje6.html">1795</a> 
 
      <a href="plaatje7.html">1803</a> 
 
      <a href="1835.html">1835</a> 
 
      <a href="1849.html">1849</a> 
 
      <a href="1852.html">1852</a> 
 
      <a href="1855.html">1855</a> 
 
      <a href="1858.html">1858</a> 
 
      <a href="1859.html">1859</a> 
 
      <a href="1880.html">1880</a> 
 
      <a href="1912.html">1912</a> 
 
      <a href="1930.html">1930</a> 
 
      <a href="1948.html">1948</a> 
 
      <a href="1964.html">1964</a> 
 
      <a href="1983.html">1983</a> 
 
      <a href="1997.html">1997</a> 
 
      <a href="2013.html">2013</a> 
 
      </li> 
 
     </ul> 
 
     </tr> 
 
    </div> 
 
    </div> 
 

 
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span> 
 
    <script> 
 
    function openNav() { 
 
     document.getElementById("mySidenav").style.width = "313px"; 
 
    } 
 

 
    function closeNav() { 
 
     document.getElementById("mySidenav").style.width = "0"; 
 
    } 
 

 
    var acc = document.getElementsByClassName("accordion"); 
 
    var i; 
 

 
    for (i = 0; i < acc.length; i++) { 
 
     acc[i].onclick = function() { 
 
     this.classList.toggle("active"); 
 
     this.nextElementSibling.classList.toggle("show"); 
 
     } 
 
    } 
 
    </script> 
 
</body>

Answer 2

多分これはあなたを助けることができる：https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidenav_shift

<!DOCTYPE html> 
 
<html> 
 
<title>W3.CSS</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="/lib/w3.css"> 
 
<body> 
 

 
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-left" style="display:none" id="mySidenav"> 
 
    <a href="javascript:void(0)" 
 
    onclick="w3_close()" 
 
    class="w3-closenav w3-large">Close &times;</a> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 4</a> 
 
    <a href="#">Link 5</a> 
 
</nav> 
 

 
<div id="main"> 
 

 
<header class="w3-container w3-teal"> 
 
    <span class="w3-opennav w3-xlarge" onclick="w3_open()" id="openNav">&#9776;</span> 
 
    <h1>My Header</h1> 
 
</header> 
 

 
<img src="img_car.jpg" alt="Car" style="width:100%"> 
 

 
<div class="w3-container"> 
 
    <p>In this example, the sidenav is hidden (style="display:none") and is only shown when you click on the menu icon in the top left corner. When it is opened, it shifts the page content to the right (we use JavaScript to add a 25% left margin to the div element with id="main" when this happens. The value "25%" matches the value used to set the width of the sidenav. Tip: If you change the left margin to 40%, you should change the width of the sidenav to 40% as well.</p> 
 
</div> 
 

 
<footer class="w3-container w3-teal"> 
 
    <h5>Footer</h5> 
 
    <p>Footer information goes here</p> 
 
</footer> 
 

 
</div> 
 

 
<script> 
 
function w3_open() { 
 
    document.getElementById("main").style.marginLeft = "25%"; 
 
    document.getElementById("mySidenav").style.width = "25%"; 
 
    document.getElementById("mySidenav").style.display = "block"; 
 
    document.getElementById("openNav").style.display = 'none'; 
 
} 
 
function w3_close() { 
 
    document.getElementById("main").style.marginLeft = "0%"; 
 
    document.getElementById("mySidenav").style.display = "none"; 
 
    document.getElementById("openNav").style.display = "inline-block"; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

Answer 3

div.panelとdiv.panel.showでmax-heightを削除します。変更されたdisplay: fixed。今はその仕事。コードを比較して見つけてください。

html { 
 
    background-color: #CEF6F5; 
 
    width: auto; 
 
    height: auto; 
 
} 
 

 
p { 
 
    color: black; 
 
} 
 

 
h { 
 
    color: black; 
 
    font-size: 40px; 
 
    padding-left: 18px; 
 
    font-family: Castellar; 
 
} 
 

 
u1.img-list { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding 0; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 

 
ul.img-list li { 
 
    display: inline-block; 
 
    height: 150px; 
 
    margin: 0 1em 1em 0; 
 
    position: relative; 
 
    width: 150px; 
 
    text-decoration: none; 
 
} 
 

 
span { 
 
    font-size: 50px; 
 
} 
 

 
span.text-content { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    height: 150px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 150px; 
 
} 
 

 
span.text-content span { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
span.text-content { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    height: 150px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 150px; 
 
    opacity: 0; 
 
} 
 

 
ul.img-list li:hover span.text-content { 
 
    opacity: 1; 
 
} 
 

 
span.text-content { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    height: 150px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 150px; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
} 
 

 
#one { 
 
    background-color: #F3F781; 
 
    color: black; 
 
    width: 850px; 
 
    height: auto; 
 
    margin-top: 5px; 
 
    margin-left: 1; 
 
    padding: 5px 5px 5px 5px; 
 
    float: right; 
 
    border-style: double; 
 
} 
 

 
.a { 
 
    width: auto; 
 
    padding: 0px; 
 
} 
 

 
.sidenav { 
 
    height: 100%; 
 
    width: 313px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    padding-top: 60px; 
 
    transition: 0.5s; 
 
} 
 

 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
    font-family: Helvetica; 
 
} 
 

 
.sidenav a:hover, 
 
.offcanvas a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .sidenav { 
 
    padding-top: 15px; 
 
    } 
 
    .sidenav a { 
 
    font-size: 18px; 
 
    } 
 
} 
 

 
button.accordion { 
 
    background-color: #111; 
 
    color: #111; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    text-align: left; 
 
    border: none; 
 
    outline: none; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion.active, 
 
button.accordion:hover { 
 
    background-color: #111; 
 
} 
 

 
div.panel { 
 
    padding: 0 0px; 
 
    background-color: black; 
 
    display: none; 
 
} 
 

 
div.panel.show { 
 
    display: block; 
 
} 
 

 
div.panel { 
 
    padding: 0 0px; 
 
    background-color: black; 
 
    transition: 0.6s ease-in-out; 
 
    opacity: 0; 
 
} 
 

 
div.panel.show { 
 
    opacity: 1; 
 
} 
 

 
button.accordion { 
 
    background-color: #111; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 0px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion.active, 
 
button.accordion:hover { 
 
    background-color: #111; 
 
} 
 

 
button.accordion:after { 
 
    content: '\02795'; 
 
    font-size: 13px; 
 
    color: #777; 
 
    float: right; 
 
    margin-right: 15px; 
 
} 
 

 
button.accordion.active:after { 
 
    content: "\2796"; 
 
} 
 

 
div.panel { 
 
    padding: 0 0px; 
 
    background-color: #111; 
 
    transition: 0.6s ease-in-out; 
 
    opacity: 0; 
 
} 
 

 
div.panel.show { 
 
    opacity: 1; 
 
} 
 

 
li { 
 
    margin-left: 20px; 
 
    list-style: none; 
 
} 
 

 
footer { 
 
    margin-top: 100000px; 
 
} 
 

 
#left { 
 
    float: left; 
 
    margin-left: 0px; 
 
} 
 

 
#ten { 
 
    font-size: 45px; 
 
}

<!DOCTYPE html> 
 
<html lang="nl"> 
 

 
<head> 
 
    <title> 
 
    Latijnse geschiedenis 
 
    </title> 
 

 
    <meta charset="utf-8"> 
 

 
    <link rel="stylesheet" href="Home.css"> 
 

 
</head> 
 

 
<body> 
 
    <div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> 
 
    <a href="#">Home</a> 
 
    <button class="accordion"><a href="#">Informatie</a> </button> 
 
    <div class="panel"> 
 

 

 
     <tr id="two"> 
 
     <div id="left"> 
 
      <li> 
 
      <a href="115.000.html">115.000 v.C</a> 
 
      <a href="200.html">200</a> 
 
      <a href="plaatje3.html">1652</a> 
 
      <a href="plaatje4.html">1713</a> 
 
      <a href="plaatje5.html">1779</a> 
 
      <a href="plaatje6.html">1795</a> 
 
      <a href="plaatje7.html">1803</a> 
 
      <a href="1835.html">1835</a> 
 
      <a href="1849.html">1849</a> 
 
      <a href="1852.html">1852</a> 
 
      <a href="1855.html">1855</a> 
 
      <a href="1858.html">1858</a> 
 
      <a href="1859.html">1859</a> 
 
      <a href="1880.html">1880</a> 
 
      <a href="1912.html">1912</a> 
 
      <a href="1930.html">1930</a> 
 
      <a href="1948.html">1948</a> 
 
      <a href="1964.html">1964</a> 
 
      <a href="1983.html">1983</a> 
 
      <a href="1997.html">1997</a> 
 
      <a href="2013.html">2013</a> 
 
      </li> 
 
     </div> 
 
     </tr> 
 
    </div> 
 
    </div> 
 

 
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span> 
 

 
    <h>Tijdlijn van de geschiedenis van de Romeinen</h> 
 

 
    <script> 
 
    function openNav() { 
 
     document.getElementById("mySidenav").style.width = "313px"; 
 
    } 
 

 
    function closeNav() { 
 
     document.getElementById("mySidenav").style.width = "0"; 
 
    } 
 

 
    var acc = document.getElementsByClassName("accordion"); 
 
    var i; 
 

 
    for (i = 0; i < acc.length; i++) { 
 
     acc[i].onclick = function() { 
 
     this.classList.toggle("active"); 
 
     this.nextElementSibling.classList.toggle("show"); 
 
     } 
 
    } 
 
    </script> 
 

 
    <ul class="img-list"> 
 
    <li> 
 
     <a href="Aeneas.html"> 
 
     <img src="1.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span id= "ten">115.000 v.C</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="2.html"> 
 
     <img src="2.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>200</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="3.html"> 
 
     <img src="3.png" width="150" height="150" /> 
 
     <span class="text-content"><span>1652</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="4.html"> 
 
     <img src="4.png" width="150" height="150" /> 
 
     <span class="text-content"><span>1713</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="5.html"> 
 
     <img src="5.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1779</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="6.html"> 
 
     <img src="6.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1795</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="7.html"> 
 
     <img src="7.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1803</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="8.html"> 
 
     <img src="8.png" width="150" height="150" /> 
 
     <span class="text-content"><span>1835</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1849.html"> 
 
     <img src="1849.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1849</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1852.html"> 
 
     <img src="1852.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1852</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1855.html"> 
 
     <img src="1855.png" width="150" height="150" /> 
 
     <span class="text-content"><span>1855</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1858.html"> 
 
     <img src="1858.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1858</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1859.html"> 
 
     <img src="1859.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1859</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1880.html"> 
 
     <img src="1880.png" width="150" height="150" /> 
 
     <span class="text-content"><span>1880</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1912.html"> 
 
     <img src="1912.png" width="150" height="150" /> 
 
     <span class="text-content"><span>1912</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1930.html"> 
 
     <img src="1930goed.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1930</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1948.html"> 
 
     <img src="1948.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1948</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1964.html"> 
 
     <img src="1964.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1964</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1983.html"> 
 
     <img src="1983.png" width="150" height="150" /> 
 
     <span class="text-content"><span>1983</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="1997.html"> 
 
     <img src="1997!.jpg" width="150" height="150" /> 
 
     <span class="text-content"><span>1997</span></span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="2013.html"> 
 
     <img src="2013.png" width="150" height="150" /> 
 
     <span class="text-content"><span>2013</span></span> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
    <footer> 
 

 
    </footer> 
 

 
</body> 
 

 
</html>