Issue with CSS and JavaScript menu

Question

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>

Kyle Becker · Accepted Answer · 2017-05-03 15:53:22Z

3

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>

answered May 3, 2017 at 15:53

Kyle Becker

1,44013 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xxneno · Accepted Answer · 2017-05-03 16:03:08Z

0

Replace:

From:

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

To:

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

answered May 3, 2017 at 16:03

xxneno

1012 bronze badges

2 Comments

Huxley Aldous Over a year ago

All that did was delete them from my SideNav, and then I tried "/" on the outside of the quotations, and that gave me the same problem.

Huxley Aldous Over a year ago

Never mind. Thanks for all of your help. I don't know what I did, but I think it may have been an issue with the files. Thanks again!

Collectives™ on Stack Overflow

Issue with CSS and JavaScript menu

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related