Home > Enterprise >  Why doesn't the button for a slide open menu work when i go to a different page but on the main
Why doesn't the button for a slide open menu work when i go to a different page but on the main

Time:05-04

Basically, I'm making a site on repl.it. On my main page, I have this drop-down menu that allows me to go to the other pages, but for some reason when I paste the same exact code into another page and I try and open the menu, it doesn't respond. I honestly Don't really know what to try since I'm new to coding and when I searched up the question, it didn't really help.

Website: https://warfare.blackenxrgy.repl.co/

HTML:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Lato", sans-serif;
}

.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 {
  color: #f1f1f1;
}

.sidenav .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;}
}

  h2 {
    margin-left: 45%;
  }

  #weaponsah {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #weaponsah:hover {
    color: #f1f1f1;
  }

    #tacticsah {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #tacticsah:hover {
    color: #f1f1f1;
  }

  p {
    margin-left: 40%;
  }

#key {
  color: blue;
  margin-top: 44%;
  margin-left: 86%;
  font-size: 10px;
}

      #superpowersah {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #superpowersah:hover {
    color: #f1f1f1;
  }

  p {
    margin-left: 40%;
  }

#weaponsma {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #weaponsma:hover {
    color: #f1f1f1;
  }

  #tacticsma {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #tacticsma:hover {
    color: #f1f1f1;
  }

  #superpowersma {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #superpowersma:hover {
    color: #f1f1f1;
  }

  #weaponsmma {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #weaponsmma:hover {
    color: #f1f1f1;
  }

    #tacticsmma {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #tacticsmma:hover {
    color: #f1f1f1;
  }

    #superpowersmma {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #superpowersmma:hover {
    color: #f1f1f1;
  }
  
</style>
</head>
<body>

<div id="mySidenav" >
  <a href="javascript:void(0)"  onclick="closeNav()">&times;</a>
  <button id="weaponsah" onclick="weaponsah()" href="#">WeaponsAH</button>

  
  <button id="tacticsah" onclick="tacticsah()" href="#">TacticsAH</button>

  
  <button id="superpowersah" onclick="superpowersah()" href="#">SuperpowersAH</button>

  
  <button id="weaponsma" onclick="weaponsma()" href="#">WeaponsMA</a>

    
    <button id="tacticsma" onclick="tacticsma()" href="#">TacticsMA</button>
    
    <button id="superpowersma" onclick="superpowersma()" href="#">SuperpowersMA</button>
    
    <button id="weaponsmma" onclick="weaponsmma()" href="#">Weapons*MA</button>
    
    <button id="tacticsmma" onclick="tacticsmma()" href="#">Tactics*MA</button>
    
    <button id="superpowersmma" onclick="superpowersmma()"href="#">Superpowers*MA</button>
</div>

<h2> Evolution of Warfare</h2>
<p>Weapons, Tactics, and Super Powers throughout history.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Subtopics</span>


  <div id="key">(AH = Ancient History, MA = Middle Ages, *MA = Modern Age)</div>
<script src="script.js"></script>
   
</body>
</html> 

JS:

  location.href="Ancient History/weaponsah.html"
}


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

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

function tacticsah() {
  location.href="Ancient History/tacticsah.html"
}

function superpowersah() {
  location.href="Ancient History/superpowersah.html"
}

 function weaponsma() {
  location.href="Middle Age/weaponsma.html"
} 

 function tacticsma() {
  location.href="Middle Age/tacticsma.html"
} 

function superpowersma() {
  location.href="Middle Age/superpowersma.html"
} 

function weaponsmma() {
  location.href="Modern Age/weaponsmma.html"
} 

function tacticsmma() {
  location.href="Modern Age/tacticsmma.html"
}

function superpowersmma() {
  location.href="Modern Age/superpowersmma.html"
}

this is the code I use and I basically just copied and pasted it into the other pages that I have, but on the other pages, it doesn't work at all and the sidebar menu doesn't work. Any Ideas?

CodePudding user response:

the reason is because after redirection the script.js file is not loaded it has taken the wrong path,try with absolute path

<script src="https://warfare.blackenxrgy.repl.co/script.js"></script>

For the link to work, in your script.js, please like this - I have added sample code

var domain = location.origin;

function tacticsah() {
  location.href= domain   "/Ancient History/tacticsah.html"
}
  • Related