Skip to main content
Inspiring
March 17, 2019
Question

Side Nav Bar Question

  • March 17, 2019
  • 5 replies
  • 1267 views

I found this video on youtube about doing a side navbar, having issues getting it to close, what am I doing wrong?

<!DOCTYPE html>

<html>

<head>

  <title>Responsive Animated Sidebar Menu</title>

  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

  <link rel="stylesheet" href="style.css">

<script>

function openSlideMenu(){

document.getElementById('menu').style.width = '250px';

document.getElementById('content').style.marginLeft = '250px';

}

function closeSlideMenu(){

document.getElementById('menu').style.width = '0';

document.getElementById('content').style.marginLeft = '0';

}

</script>

</head>

<body>

  <div id="content">

 

  <span class="slide">

  <a href="#" onClick="openSlideMenu()">

  <i class="fas fa-bars"></i>

</a>

  </span>

 

  <div id="menu" clSS="nav">

  <a href="#" class="close" onclick="closeSideMenu()">

<i class="fas fa-times"></i>

</a>

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Services</a>

<a href="#">Contact</a>

  </div>

 

  <h1>S.T. Graffix Menu</h1>

 

</div>

</body>

</html>

This topic has been closed for replies.

5 replies

SteveTadAuthor
Inspiring
March 17, 2019

i got it, it just doesnt work in Live mode in DW. lol

SteveTadAuthor
Inspiring
March 17, 2019

Nancy: I i changed to class, and nothing happened

Osgood: As far as I can tell, they all say Slide

Legend
March 17, 2019

SteveTad  wrote

Osgood: As far as I can tell, they all say Slide

Nope, not in the code you originally posted the close onclick event says closeSideMenu

SteveTadAuthor
Inspiring
March 17, 2019

got that fixed, and I still have the same issue

Legend
March 17, 2019

Your onclick event says closeSideMenu instead of closeSlideMenu - note the missing l in Slide.......

.........or change your function name to match your onclick event name.

SteveTadAuthor
Inspiring
March 17, 2019

changed it, nothing happened

Nancy OShea
Community Expert
Community Expert
March 17, 2019

Start with the obvious.

Change this:

  <div id="menu" clSS="nav">

to this:

  <div id="menu" class="nav">

Nancy O'Shea— Product User & Community Expert
SteveTadAuthor
Inspiring
March 17, 2019

made the change, nothing happened, it stayed the same

SteveTadAuthor
Inspiring
March 17, 2019