Advise for a whole bunch of navigation buttons!

[Conan257]

I'm writing something for work which will assist in training personnel. We use Programmable Entry Panels which have a grid of buttons, with a lot of the buttons changing what you have on the PEP itself.



This was an early version before a lot of the editing, but gives you enough I think.

When you press a button on the 3rd row, it changes the entire section of 24 buttons below it. I created a similar one a while back, but there was only about 20 pages total so I just created a separate .html for each page. I'm thinking, however, that maybe <div>'s would be a better way forward?

Basic format is a table of 3 columns and 6 rows I think. Buttons are made from ul/li tags and css. Some cell spanning is used so each area could be controlled individually if required.

Any thoughts on the best way to proceed?

 

[Conan257]

OK, trying to do this with a javascript function i've used before, but I can't seem to adapt it to this scenario...

JS:

function buttonpress(){var select = document.getElementById('functionarray');
var ais = document.getElementById('aispep');
var RADAR = document.getElementById('radarpep');
var option3 = document.getElementById('select3');
var option4 = document.getElementById('select4');
var option5 = document.getElementById('select5');
var option6 = document.getElementById('select6');

switch (select.value)
{
 case "ais":
 aispep.style.display='block';
 radarpep.style.display='none';
 option3.style.display='none';
 option4.style.display='none';
 option5.style.display='none';
 option6.style.display='none';
 break;
 case "RADAR":
 aispep.style.display='none';
 radarpep.style.display='block';
 option3.style.display='none';
 option4.style.display='none';
 option5.style.display='none';
 option6.style.display='none';
 break;
 case "option3":
 option1.style.display='none';
 option2.style.display='none';
 option3.style.display='none';
 option4.style.display='none';
 option5.style.display='none';
 option6.style.display='none';
 break;

}
}

Concept for the buttons is the third row changes the bottom left section of 24 buttons (functionarray), an exert of which is here:

3rd row:

    	<td id="borders" width="675px">
<ul id="nav" onclick="buttonpress()">
	<li><a>TAC</a></li>
	<li><a>LINK</a></li>
	<li title="RADAR" value="RADAR"><a title="RADAR" value="RADAR">RADAR</a></li>
	<li title="ais" value="ais"><a>AIS</a></li>


Function Array:

        	<div id="aispep" style="display:none;">
<ul id="nav">
	<li><a>ALL</a></li>
	<li><a>A CLASS</a></li>
	<li><a>B CLASS</a></li>
	<li><a>ATON LIST</a></li>

Nothing comes up on the debugger, i'm at a loss as to what isn't working...

 

[Varwen]

Not sure if I've understood, but I'd be going with a <div> for each button, perhaps within a flexbox container? Would allow you to use javascript to edit the CSS and change the order of the buttons using flex-order, and hide buttons using display:none?

There was a great flexbox article on CSS-tricks here if I've actually suggested something useful!