Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Tabs menu

  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Thanked 0 Times in 0 Posts

    Tabs menu

    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>
    Sub Tabs:
    <div id="submenu" class="float-break">
    &lt;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 mainTabs 	= 	['main-1', 'main-2', 'main-3'];
    var subMenus 	=	['sub-1', 'sub-2', 'sub-3'];
    document.write( subOne, subTwo, subThree);
    java script:
    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'];
    var subMenus 	=	['sub-1', 'sub-1', 'sub-2', 'sub-3'];
    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. #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    In a place far, far away...
    Thanked 1,043 Times in 1,019 Posts
    Hmm you may be making this harder than it has to be. There is a great tutorial on creating menus like the ones you want but it doesn't require javascript to work at least in the modern browsers.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts