CODEWITHSUNDEEP
javascriptdynamicmenu
Oscar
Oscar

Reputation: 105

How to make a JavaScript menu more functional

I wonder simply which way is the best practice to make this menu dynamic. I don't want to make a function for each Element. Should I push them into an Array then loop through them?

    <div id="nav">
        <div id="button1"></div>
        <div id="button2"></div>
        <div id="button3"></div>
        <div id="button4"></div>
    </div>
    <div id="navHover">
        <div id="hoverButton1"></div>
        <div id="hoverButton2"></div>
        <div id="hoverButton3"></div>
        <div id="hoverButton4"></div>
    </div>


    <script type="text/javascript">

            var buttonOne = document.getElementById('button1');
            var buttonOneHover = document.getElementById('hoverButton1');
            
            buttonOne.addEventListener('mouseover', buttonOneBlock, false);
            buttonOne.addEventListener('mouseout', buttonOneNone, false);
            
            buttonOneHover.addEventListener('mouseover', buttonOneBlock, false);
            buttonOneHover.addEventListener('mouseout', buttonOneNone, false);

        function buttonOneBlock() {
            var buttonOneHover = document.getElementById('hoverButton1');
            buttonOneHover.style.display = 'block';
        }

        function buttonOneNone() {
            var buttonOneHover = document.getElementById('hoverButton1');
            buttonOneHover.style.display = 'none';
        }
    </script>


#nav {
width: 960px;
height: 20px;
background-color: white;
margin: auto;
}
#button1, #button2, #button3, #button4 {
width: 100px;
height: 20px;
background-color: red;
float: left;
margin-left: 10px;
}
#navHover {
width: 960px;
height: 20px;
background-color: white;
margin: auto;
}
#hoverButton1, #hoverButton2, #hoverButton3, #hoverButton4 {
width: 100px;
height: 20px;
background-color: orange;
float: left;
margin-left: 10px;
display: none;
}

Upvotes: 0

Views: 261

Answers (1)

Daniel Brockman
Daniel Brockman

Reputation: 19290

Here’s a straightforward generalization of that:

function setupButton(i) {
  var button = document.getElementById('button' + i);
  var buttonHover = document.getElementById('hoverButton' + i);

  button.addEventListener('mouseover', buttonBlock, false);
  button.addEventListener('mouseout', buttonNone, false);

  buttonHover.addEventListener('mouseover', buttonBlock, false);
  buttonHover.addEventListener('mouseout', buttonNone, false);

  function buttonBlock() {
    buttonHover.style.display = 'block';
  }

  function buttonNone() {
    buttonHover.style.display = 'none';
  }
}

for (var i = 1; i <= 4; ++i) {
  setupButton(i)
}

Upvotes: 2

Related Questions