CODEWITHSUNDEEP
javascripthtmlcss
Huxley Aldous
Huxley Aldous

Reputation: 1

Issue with CSS and JavaScript menu

So I'm coding a website for school. I have coded a side menu that has options that you click. And I've also coded some of those things that you click. My problem, is even though they exist, it says "filler.html does not exist." when I click. Even though they exist. So, here's my code. If you have any further questions, ask away.

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
body {
  font-family: "Lato", sans-serif;
}

.ABox {
  background-color: black;
  color: lightgrey;
  width: auto;
  padding: 1%;
}

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

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

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

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

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <br>
  <a href="/StoryTime.html">The beginning of logic and rhetoric</a>
  <a href="/rhetoric.html">What is rhetoric?</a>
  <a href="/classics.html">What is classics?</a>
  <a href="/timeline.html" Timeline</a>
</div>

<div class="ABox">
  <h2>Classics and Rhetoric</h2>
</div>
<p style="background-color:black;color:lightgrey;width:200px;padding:1%;"></p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>

Upvotes: 0

Views: 36

Answers (2)

xxneno
xxneno

Reputation: 101

Replace:

From:

<a href="/timeline.html" Timeline</a>

To:

<a href="/timeline.html"> Timeline</a>

Upvotes: 0

Kyle Becker
Kyle Becker

Reputation: 1440

Try removing the leading "/". This means absolute directories, when you want relative.

<a href="StoryTime.html">The beginning of logic and rhetoric</a>
<a href="rhetoric.html">What is rhetoric?</a>
<a href="classics.html">What is classics?</a>
<a href="timeline.html">Timeline</a>

Upvotes: 3

Related Questions