Боковая навигация html/css/javascript

Я сделал боковую навигацию с выпадающим списком. Но это не работает. Я сделал список с вещами, которые должны выходить, но только половина списка действительно падает. Я хочу, чтобы все выпало, и появилась полоса прокрутки, поэтому меню не слишком длинное.Боковая навигация html/css/javascript

Может кто-нибудь помочь мне с этим?

Вот мой код:

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>

источник

2017-02-16 T.J

Вы должны оформить эту ссылку: [CodePen: Menu] (http://codepen.io/fusionPT/pen/GJOZJb) –

С моим пониманием вашего вопроса.

1) Вам необходимо добавить overflow: scroll для div that containing list items.

2) Вам необходимо добавить height:400px; для div that containing list items.

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

Другое предложение: Вы можете просто использовать <ul id="#left"> вместо <div id="#left">

Для лучшего изменения взгляда на:

1) Добавить clear:both в #left

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

2) Удалить 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>

источник

2017-02-16 08:12:13

Может быть, это может помочь вам: 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>

источник

2017-02-16 08:21:58 drisoel

Удалить max-height в div.panel и div.panel.show. Изменено 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>

источник

2017-02-16 08:38:54 Sam

ответ

Смежные вопросы