Highlighted

Side Nav Bar Question

Participant ,
Mar 17, 2019

Copy link to clipboard

Copied

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>

TOPICS
Create menus in Dreamweaver

Views

623

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Side Nav Bar Question

Participant ,
Mar 17, 2019

Copy link to clipboard

Copied

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>

TOPICS
Create menus in Dreamweaver

Views

624

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 17, 2019 0
Participant ,
Mar 17, 2019

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
Adobe Community Professional ,
Mar 17, 2019

Copy link to clipboard

Copied

Start with the obvious.

Change this:

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

to this:

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

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
Participant ,
Mar 17, 2019

Copy link to clipboard

Copied

made the change, nothing happened, it stayed the same

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
LEGEND ,
Mar 17, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
Participant ,
Mar 17, 2019

Copy link to clipboard

Copied

changed it, nothing happened

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
Participant ,
Mar 17, 2019

Copy link to clipboard

Copied

Nancy: I i changed to class, and nothing happened

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
LEGEND ,
Mar 17, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
Participant ,
Mar 17, 2019

Copy link to clipboard

Copied

got that fixed, and I still have the same issue

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
LEGEND ,
Mar 17, 2019

Copy link to clipboard

Copied

Maybe you are having a browser cache issue. Can you test in another browser. I cant test the code right now as lm on a tablet but lll have a look tomorrow if no-one else provides you with a solution.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
Participant ,
Mar 17, 2019

Copy link to clipboard

Copied

tested in chrome and I.E., still having that same issue

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
Adobe Community Professional ,
Mar 17, 2019

Copy link to clipboard

Copied

There is nothing wrong with the code that you have shown (with the exception of Nancy's class remark), hence the problem lies elsewhere. I assume that you have attached the style sheet. style.css, and added all of the relevant style rules. Without these style rules the menu bar will not work.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
Participant ,
Mar 17, 2019

Copy link to clipboard

Copied

dumb stupidass question, how do I attach it again?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
Participant ,
Mar 17, 2019

Copy link to clipboard

Copied

also, I was in the middle of the tutorial when I ran into this issue. Wish I could go back in these forums and edit my orginal pots. haha

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
Participant ,
Mar 17, 2019

Copy link to clipboard

Copied

1: how do I link it again, because I thought in the code it was already linked.

2: Was in the middle of the tutorial when I ran into the issue.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
SteveTad LATEST
Participant ,
Mar 17, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 1