侧面导航

侧面导航

关注
发信
关注(28)粉丝(399)

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>

最佳答案

也许这可以帮助您：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>

关于javascript - 侧面导航html/css/javascript，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42267751/

10-11 11:42
Powered by LMLPHP ©2024 侧面导航 0.033103