[Solved] Creating an interactive menu [closed]

by


you’re really supposed to ask questions in the context of an issue you’re having with your existing code and functionality.. not a design feature or tutorial based question.

With that said, I’m going to provide an answer and code sample to this because I like to introduce developers (and more particular, DBAs) to bitwise operations. As we can represent state better this way..

That is not to say that my following code is best practice or optimal.

var buttons = document.querySelectorAll("button[data-bit");
var sections = document.querySelectorAll("section[data-bit]");
var menuvalue = 0; //0 displays nothing
var clrBtn = document.querySelector("button#none");


clrBtn.addEventListener("click", function() {
    menuvalue = 0;
    setDisplay();
});

for(var i = 0, max = buttons.length; i < max ; i++)
{
  buttons[i].addEventListener("click", changeValue.bind(null, Math.pow(2, i)));
}

function changeValue(value) {
    console.log(value);
    menuvalue ^= value; //XOR operation assignment  (http://msdn.microsoft.com/en-us/library/ie/06f6ta51(v=vs.94).aspx)
    console.log(menuvalue);
    setDisplay();
}

function setDisplay()  {
    for (var i = 0, max = sections.length; i < max; i++)
    {
        
        console.log("section: %o, menuvalue: %o, result: %o", Math.pow(2, i), menuvalue, (Math.pow(2, i) & menuvalue));
        sections[i].style.display = (Math.pow(2, i) & menuvalue) > 0 ? "block" : "none";      
    }
}
section {
  display:none;
  background-color:whitesmoke;
  border:0.1em outset whitesmoke;
  line-height:1.25em;
  padding:2em;
  }

section[data-bit] {
  display:none;
  }


button.check {
  border:0.1em inset whitesmoke;
  background-color:whitesmoke;
  }
<nav>
<button id="none">None</button>
<button data-bit="0">Menu Item 1</button>
<button data-bit="1">Menu Item 2</button>
<button data-bit="2">Menu Item 3</button>
<button data-bit="4">Menu Item 4</button>
<button data-bit="8">Menu Item 5</button>
</nav>

<section class="empty">
This is either the default value, displaying no menu items.. or you could hide this and display nothing!
</section>
<section data-bit="0">
This is the contents of Menu Item 1
</section>
<section data-bit="1">
This is the contents of Menu Item 2
</section>
<section data-bit="2">
This is the contents of Menu Item 3
</section>
<section data-bit="4">
This is the contents of Menu Item 4
</section>
<section data-bit="8">
This is the contents of Menu Item 5
</section>

JsFiddle: Here

Handling Combinations: Here

3

solved Creating an interactive menu [closed]