Problems with a sidebar!

Get Started
1

I’m attempting to integrate some java into my website to make a cute little popup sidebar. I’m following tutorials I find to the T and making sure all of my names and paths are right but for some reason, it’s displaying the button but not the menu when I click it. Is javascript just too hard for my teeny tiny toddler brain or is there something wrong with my html?

<body>
    <header>
      <div class="container">
      <div id="branding">
        <img src="./img/volture_logo_words.png" alt="logo" width="200" height="200">
      </div>
    </div>
  </header>
<div id="sidepnl" class="sidepanel">
    <a href="javascript: void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="services.html">Contact</a>
</div>
<div id="main">
  <button class="openbtn" onlick="openNav()">&#9776;</button>

  <section id="showcase">
    <div class="intro">
    <h1>Clean. Professional. Custom.</h1>
    <div class="smallertext">
    <p>Stand out from the rest with a website that's all you.</p>
  </div>
    </div>
  </section>
  <section id="slideshow">
    <div class="slideshow-container">
      <div class="box">
      <img src="./img/html.png"width="200" height="200">
      <div class="text">
        <h3>HTML5 Markup</h3>
      <p>HTML files are short and sweet for fast loading times.</p>
      </div>
      </div>
    <div class="box">
      <img src="./img/css.png" width="200" height="200">
      <div class="text">
        <h3>CSS Styling</h3>
      <p>Got a specific look in mind? No idea? Got you covered, either way.</p>
    </div>
      </div>
    <div class="box">
      <img src="./img/js.png" width="200" height="200">
        <div class="text">
          <h3>Javascript Functionality</h3>
        <p>Get the results and functionality you need with javascript.</p>
      </div>
      </div>
      <div class="box">
        <img src="./img/volture_logo.png" width="200" height="200">
        <div class="text">
          <h3>Graphic Design</h3>
        <p>No assets? No problem.</p>
      </div>
    </div>
  </div>
    <footer>
      <p>volture web design, 2020</p>
      </footer>
      <script type="text/javascript" src="js/java.js"></script>
  </body>
</html>

HTML, just the body tag. I’ll edit it with the whole thing if need be just didn’t want the post to be too long.

function openNav() {
  document.getElementById("sidepnl").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
  document.getElementById("sidepnl").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}

Java

2

Hi there volture,

try it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 150% sans-serif;
 }
 
.hide {
    display: none;
 }
</style>

</head>
<body>

 <header>
  <div class="container">
   <div id="branding">
    <img src="./img/volture_logo_words.png" alt="logo" width="200" height="200">
   </div>
  </div>
 </header>
 
 <div id="sidepnl" class="sidepanel hide">
  <a href="#" class="closebtn">&times;</a>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="services.html">Contact</a>
 </div>
 
 <div id="main">
  <button class="openbtn">&#9776;</button>
 </div>

 <script>
( function( d ) {
   d.querySelector( '.openbtn' ).addEventListener( 'click',
      function() {
         d.getElementById( 'sidepnl' ).classList.remove( 'hide' );
       }, false );
	   
   d.querySelector( '.closebtn' ).addEventListener( 'click',
      function(e) {
         e.preventDefault();
         d.getElementById( 'sidepnl' ).classList.add( 'hide' );
       }, false );
} ( document ) );
</script>

</body>
</html>

Note

Java should not be confused with JavaScript

coothead

3 Likes
3

<mostly off-topic>
As was always relayed to me by a college professor:
Java is to Javascript, as Pen is to Penguin.
</mostly off-topic>

5 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.