JS, CSS Menubar Toggle

Question

Hello I want to make a Menu thats pops out of the side when I click a button. I have it all set up with the CSS but the Javascript part doesn't work. I want to test if the width of menubarWrapper is equal to 300 then the width of the menubarWrapper needs to change to 0px and if it isn't equal to 300px than change it to 300px. I have the following JS:

function menuBarToggle() {
var menuWrapper = document.getElementById('menuWrapper');
if menuWrapper.width == 300 {
    menuWrapper.style.width = "0";
} else {
    menuWrapper.style.width = "300";
    }
}

I also tried in the IF statement menuWrapper.style.width but that doesn't work also

I've got it working know but its only a one use thing now. Because it opens en than it retracts but than it doesn't do anything — Roy Berris
– Roy Berris, Commented Apr 20, 2015 at 16:44

Michael Hays · Accepted Answer · 2015-04-20 17:01:20Z

There are other answers that are just fine --

use "300px", not "300"
Surround your conditional with a parentheses.

(You'll need both, by the way.)

But I wanted to make sure that somewhere on this page, someone pointed out that this is a very brittle way of toggling. You have a magical, hardcoded integer for the size, which might break if you ever wanted to style things differently. And if you decide one day to fade out the menu, then the test won't work at all.

Might I suggest that, instead, you create two classes in CSS:

.menu-item { width: 300px; }
.menu-item.collapsed { width: 0; }

And then in javascript, you'll only have to write the following:

function menuBarToggle() {
  var menuWrapper = document.getElementById('menuWrapper');
  menuWrapper.classList.toggle('collapsed');      
}

Not only is the intention easier to read, but this will allow you to swap out the behavior if you decide that, instead of purely narrowing the menu, you might want it to fade out, or animate it to the left, or... well... whatever can come up with.

I have a transition property in the CSS so it slides out to the right but thanks for your answer

Blazemonger · Accepted Answer · 2015-04-20 16:54:22Z

0

Your script has a typo. Add '()' for an if statement.

function menuBarToggle() {
    var menuWrapper = document.getElementById('menuWrapper');
    if (menuWrapper.width == 300) {
        menuWrapper.style.width = "0";
    } else {
        menuWrapper.style.width = "300";
    }
}

edited Apr 20, 2015 at 16:54

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

answered Apr 20, 2015 at 16:48

Zlatko Vujicic

3532 silver badges12 bronze badges

Comments

Blazemonger · Accepted Answer · 2015-04-20 16:54:35Z

0

When changing the width of an element via style.width, you have to append px to the end of the string:

function menuBarToggle() {

    var menuWrapper = document.getElementById('menuWrapper');
    if menuWrapper.width == 300 {
        menuWrapper.style.width = "0px";
    } else {
        menuWrapper.style.width = "300px";
        }
    }

edited Apr 20, 2015 at 16:54

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

answered Apr 20, 2015 at 16:35

A.J. Uppal

19.3k7 gold badges47 silver badges82 bronze badges

1 Comment

Roy Berris Over a year ago

That ist the problem cause I got it al working without putting the pixels in but then I didn't have the IF statement.

Collectives™ on Stack Overflow

JS, CSS Menubar Toggle

3 Answers 3

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Related