1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Development Javascript: Two level horizontal tabs menu

Discussion in 'Software' started by kingdavies, 23 Jun 2007.

  1. kingdavies

    kingdavies Minimodder

    29 Aug 2004
    Likes Received:
    Hi. I'm trying to make a tabs menu that supports a second horizontal level when the mouse rolls over one of the tabs, using tutorials and other examples. I've got the majority of it working, just has a few bugs and I want it to automatically select a default tab.

    Main Tabs:
    <div id="mainmenu" class="float-break">
    		<li id="main-1"><a  onmouseover="switchMenues(1);" href="link"><span>tab1</span></a></li>
    		<li id="main-2"><a  onmouseover="switchMenues(2);"><span>tab2</span></a></li>
    		<li id="main-3"><a  onmouseover="switchMenues(3);"><span>tab3</span></a></li>
    		<li id="main-4"><a  onmouseover="switchMenues(4);"><span>tab4</span></a></li>
    		<li id="main-5"><a  onmouseover="switchMenues(5);"><span>tab5</span></a></li>
    		<li id="main-6"><a  onmouseover="switchMenues(6);"><span>tab6</span></a></li>
    		<li id="main-7"><a  onmouseover="switchMenues(7);" href="link"><span>tab7</span></a></li>
    Sub Tabs:
    <div id="submenu" class="float-break">
    <script type="text/javascript">
    var subOne 		= 	'<ul id="sub-1" class="sub hide float-break">	<li><a>main1:Sub1</a></li>	<li><a>main1:Sub2</a></li>	</ul>';
    var subTwo 		= 	'<ul id="sub-2" class="sub hide float-break">	<li><a>main2:Sub1</a></li>		</ul>';
    var subThree 	= 	'<ul id="sub-3" class="sub hide float-break">	<li><a>main3:Sub1</a></li>		</ul>';
    var subFour 	= 	'<ul id="sub-4" class="sub hide float-break">	<li><a>main4:Sub1</a></li>		</ul>';	
    var subFive 	= 	'<ul id="sub-5" class="sub hide float-break">	<li><a>main5:Sub1</a></li>		</ul>';					
    var subSix 		= 	'<ul id="sub-6" class="sub hide float-break">	<li><a>main6:Sub1</a></li>		</ul>';
    var subSeven 	= 	'<ul id="sub-7" class="sub hide float-break">	<li><a>main7:Sub1</a></li>		</ul>';
    var mainTabs 	= 	['main-1', 'main-2', 'main-3', 'main-4', 'main-5', 'main-6', 'main-7'];
    var subMenus 	=	['sub-1', 'sub-2', 'sub-3', 'sub-4', 'sub-5', 'sub-6', 'sub-7'];
    document.write( subOne, subTwo, subThree, subFour, subFive, subSix, subSeven );
    function switchMenues(menuNumber)
        for ( i = 1; i < mainTabs.length; i++ ) { document.getElementById(mainTabs[i]).className = ''; }
        if ( menuNumber != 0 ) document.getElementById(mainTabs[menuNumber]).className = tabHighlightClass;
        for ( i = 0; i < subMenus.length; i++ ) { document.getElementById(subMenus[i]).style.display = 'none'; }
        document.getElementById(subMenus[menuNumber]).style.display = 'block';
    However it doesnt work unless I add an additional '' to the "var mainTabs" and an additional sub category to "var subMenus " for example:
    var mainTabs 	= 	['', 'main-1', 'main-2', 'main-3', 'main-4', 'main-5', 'main-6', 'main-7'];
    var subMenus 	=	['sub-1', 'sub-1', 'sub-2', 'sub-3', 'sub-4', 'sub-5', 'sub-6', 'sub-7'];
    then works but is a little messy and I dont understand why.

    Finally if you could tell me how to select the Main-1 tab by default that would be great.

    Thanks v.much!!
  2. Jamie

    Jamie ex-Bit-Tech code junkie

    12 Mar 2001
    Likes Received:
    You're calling mainTabs in a loop that starts at 1 and arrays start at 0

Share This Page