Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with expandable menu

    Hi i need help with a menu code i have found which i would to use but i need some help sorting it out. I dont require all of the menu to be expandable and would like some guidance altering with the code is below any would would be appreciated thanks

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Expand and Collapse Menu</title>
    <style type="text/css">
    <--
    body {
    background-color: #faf7ec;
    margin: 0;
    padding: 5px 0 0 5px;
    }
    
    .sbnavmenu
    {
    	font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    	border: 1px solid #CCCCCC;
    	padding: 0px;
    	width: 175px;
    }
    
    a.navbuts, a.navbuts:active, a.navbuts:link, a.navbuts:visited {
    	width: 100%;
    	display: block;
    	color: #EFEFEF !important;
    	background: #CCCCCC url(images/but-bg.gif) repeat-x center left;
    	text-decoration: none;
    	text-indent: 7px;
    	height: 20px;
    	padding-top: 4px;
    }
    
    a.navbuts:hover {
    	color: #FFFFFF !important;
    	background: #CCCCCC url(images/but-bg.gif) repeat-x center left;
    	text-decoration: underline;
    	text-indent: 7px;
    }
    
    
    a.navsubs, a.navsubs :link, a.navsubs :visited, a.navsubs :active {
    	width: 100%;
    	display: block;
    	color: #000;
    	line-height: 20px;
    	text-decoration: none;
    	white-space: nowrap;
    	border-top: 1px solid #CCCCCC;
    	border-bottom: 1px solid #CCCCCC;
    	margin: 1px 0px;
    	text-indent: 10px;
    	padding-bottom:1px;
    }
    
    
    a.navsubs:hover {
    	color: #0000FF;
    	background: #CCCCCC url(images/grad4.gif) repeat-x center left;
    	text-decoration: none;
    	cursor: pointer;
    	border-top: 1px solid #CCCCCC;
    	border-bottom: 1px solid #CCCCCC;
    	padding-bottom:1px;
    }
    
    
    .showit {
    	display: block;
    }
    .hideit {
    	display: none;
    }
    /* Opera Hack */
    html>body .hideit {
        display: block;
    }
    head:first-child+body .hideit {
        display: none;
    }
    -->
    </style>
    
    <script language="javascript" type="text/javascript" src="expand2.js"></script>
    
    </head>
    
    <body>
    
    
    
    <div class="sbnavmenu">
      <p><a href="javascript: void(0)" tabindex="1" onClick="SB_swapClass(1,'sub1','showit','hideit','div')" class="navbuts"><b>Site News</b></a>
        <a href="javascript: void(0)" tabindex="2" class="navsubs">News Main...</a>
        <a href="javascript: void(0)" tabindex="3" class="navsubs">General Articles</a>
        <a href="javascript: void(0)" tabindex="4" class="navsubs">Computer Related Articles</a>
        <a href="javascript: void(0)" tabindex="5" class="navsubs">Intelligences for your life</a>
        <a href="javascript: void(0)" tabindex="6" class="navsubs">Other News</a>
    </p>
    
    <a href="javascript: void(0)" tabindex="7" onClick="SB_swapClass(1,'sub2','showit','hideit','div')" class="navbuts"><b>Downloads</b></a>
    <div id="sub2" class="hideit">
    <a href="javascript: void(0)" tabindex="8" class="navsubs">&raquo;  Downloads Home</a>
    <a href="javascript: void(0)" tabindex="9" class="navsubs">&raquo;  Utilities Tools</a>
    <a href="javascript: void(0)" tabindex="10" class="navsubs">&raquo;  Internet Applications</a>
    <a href="javascript: void(0)" tabindex="11" class="navsubs">&raquo;  Security Applications</a>
    <a href="javascript: void(0)" tabindex="12" class="navsubs">&raquo;  Audio &amp; Musics</a>
    <a href="javascript: void(0)" tabindex="13" class="navsubs">&raquo;  Images and Video</a>
    <a href="javascript: void(0)" tabindex="14" class="navsubs">&raquo;  Email Tools</a>
    <a href="javascript: void(0)" tabindex="15" class="navsubs">&raquo;  Miscellaneous and Others</a>
    </div>
    
    <a href="javascript: void(0)" tabindex="16" onClick="SB_swapClass(1,'sub3','showit','hideit','div')" class="navbuts"><b>eXtreme Templates</b></a>
    <div id="sub3" class="hideit">
    <a href="http://extreme.50webs.net/" tabindex="17" class="navsubs" target="_blank">eXtreme Templates Home</a>
    <a href="http://extreme.50webs.net/forums/" tabindex="14" class="navsubs" target="_blank">eXtreme Templates Forum</a>
    <a href="http://extreme.50webs.net/index.php?categoryid=3&amp;p13_sectionid=6" tabindex="18" class="navsubs" target="_blank">Web Templates</a>
    <a href="http://extreme.50webs.net/index.php?categoryid=3&amp;p13_sectionid=5" tabindex="19" class="navsubs" target="_blank">Photoshop Graphics</a>
    <a href="http://extreme.50webs.net/index.php?categoryid=3&amp;p13_sectionid=4" tabindex="20" class="navsubs" target="_blank">Flash Graphics</a>
    <a href="http://extreme.50webs.net/index.php?categoryid=3&amp;p13_sectionid=3" tabindex="21" class="navsubs" target="_blank">Web Scripts</a>
    <a href="http://extreme.50webs.net/index.php?categoryid=3&amp;p13_sectionid=2" tabindex="22" class="navsubs" target="_blank">Others Free Downloads</a>
    </div>
    
    </div>
    
    
    </body>
    
    </html>

  • #2
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have worked out my intial problem but now need to know about adding more dropdown menus to the list the code is below

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Expand and Collapse Menu</title>
    <style type="text/css">
    <--
    body {
    background-color: #faf7ec;
    margin: 0;
    padding: 5px 0 0 5px;
    }
    
    .sbnavmenu
    {
    	font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    	border: 1px solid #CCCCCC;
    	padding: 0px;
    	width: 175px;
    }
    
    a.navbuts, a.navbuts:active, a.navbuts:link, a.navbuts:visited {
    	width: 100%;
    	display: block;
    	color: #EFEFEF !important;
    	background: #CCCCCC url(images/but-bg.gif) repeat-x center left;
    	text-decoration: none;
    	text-indent: 7px;
    	height: 20px;
    	padding-top: 4px;
    }
    
    a.navbuts:hover {
    	color: #FFFFFF !important;
    	background: #CCCCCC url(images/but-bg.gif) repeat-x center left;
    	text-decoration: underline;
    	text-indent: 7px;
    }
    
    
    a.navsubs, a.navsubs :link, a.navsubs :visited, a.navsubs :active {
    	width: 100%;
    	display: block;
    	color: #000;
    	line-height: 20px;
    	text-decoration: none;
    	white-space: nowrap;
    	border-top: 1px solid #CCCCCC;
    	border-bottom: 1px solid #CCCCCC;
    	margin: 1px 0px;
    	text-indent: 10px;
    	padding-bottom:1px;
    }
    
    
    a.navsubs:hover {
    	color: #0000FF;
    	background: #CCCCCC url(images/grad4.gif) repeat-x center left;
    	text-decoration: none;
    	cursor: pointer;
    	border-top: 1px solid #CCCCCC;
    	border-bottom: 1px solid #CCCCCC;
    	padding-bottom:1px;
    }
    
    
    .showit {
    	display: block;
    }
    .hideit {
    	display: none;
    }
    /* Opera Hack */
    html>body .hideit {
        display: block;
    }
    head:first-child+body .hideit {
        display: none;
    }
    -->
    </style>
    
    <script language="javascript" type="text/javascript" src="expand2.js"></script>
    
    </head>
    
    <body>
    
    
    
    <div class="sbnavmenu">
    <a href="javascript: void(0)" class="navbuts"><strong>Home</strong></a>
    <a href="javascript: void(0)" class="navbuts"><strong>ITSM</strong></a>
    <a href="javascript: void(0)" class="navbuts"><strong>Entrust Admin</strong></a>
    <a href="javascript: void(0)" tabindex="1" onClick="SB_swapClass(1,'sub1','showit','hideit','div')" class="navbuts"><b>WIFI Accounts</b></a>
    <div class="hideit" id="sub1">
    <a href="javascript: void(0)" tabindex="2" class="navsubs">WIFI Account ID and Pins</a>
    <a href="javascript: void(0)" tabindex="3" class="navsubs">WIFI Aministration</a>
    <a href="javascript: void(0)" tabindex="4" class="navsubs">WIFI Guide</a>
    </div>
    
    <a href="javascript: void(0)" tabindex="5" onClick="SB_swapClass(1,'sub2','showit','hideit','div')" class="navbuts"><b>O2</b></a>
    <div id="sub2" class="hideit">
    <a href="javascript: void(0)" tabindex="6" class="navsubs">&raquo; O2 Puk Requests</a>
    <a href="javascript: void(0)" tabindex="7" class="navsubs">&raquo; O2 Mobile Tool Kit</a>
    <a href="javascript: void(0)" tabindex="8" class="navsubs">&raquo; O2 Status</a>
    
    </div>
    
    <a href="javascript: void(0)" tabindex="9" onClick="SB_swapClass(1,'sub3','showit','hideit','div')" class="navbuts"><b>The Source</b></a>
    <div id="sub3" class="hideit">
    <a href="http://extreme.50webs.net/" tabindex="10" class="navsubs" target="_blank">Dashboard</a>
    <a href="http://extreme.50webs.net/forums/" tabindex="11" class="navsubs" target="_blank">Important Contact List</a>
    <a href="http://extreme.50webs.net/index.php?categoryid=3&amp;p13_sectionid=6" tabindex="12" class="navsubs" target="_blank">Service Desk Source LOCOG</a>
    <a href="http://extreme.50webs.net/index.php?categoryid=3&amp;p13_sectionid=5" tabindex="13" class="navsubs" target="_blank">Service Desk Source Atos</a>
    
    </div>
    <a href="javascript: void(0)" tabindex="14" onClick="SB_swapClass(1,'sub4','showit','hideit','div')" class="navbuts"><b>P Drive</b></a>
    <div id="sub3" class="hideit">
    <a href="http://extreme.50webs.net/" tabindex="15" class="navsubs" target="_blank">Service Desk Folder</a>
    <a href="http://extreme.50webs.net/forums/" tabindex="16" class="navsubs" target="_blank">Task Generator</a>
    
    </div>
    <a href="javascript: void(0)" tabindex="17" onClick="SB_swapClass(1,'sub5','showit','hideit','div')" class="navbuts"><b>Fish</b></a>
    <div id="sub3" class="hideit">
    <a href="http://extreme.50webs.net/" tabindex="18" class="navsubs" target="_blank">Home Page</a>
    <a href="http://extreme.50webs.net/forums/" tabindex="19" class="navsubs" target="_blank">Service Desk Rota</a>
    
    </div>
    <a href="javascript: void(0)" tabindex="20" onClick="SB_swapClass(1,'sub6','showit','hideit','div')" class="navbuts"><b>Intranet</b></a>
    <div id="sub3" class="hideit">
    <a href="http://extreme.50webs.net/" tabindex="21" class="navsubs" target="_blank">Home Page</a>
    <a href="http://extreme.50webs.net/forums/" tabindex="22" class="navsubs" target="_blank">Forms</a>
    <a href="http://extreme.50webs.net/index.php?categoryid=3&amp;p13_sectionid=6" tabindex="23" class="navsubs" target="_blank">Technology Manual &amp; Guides</a>
    
    </div>
    <a href="javascript: void(0)" tabindex="24" onClick="SB_swapClass(1,'sub7','showit','hideit','div')" class="navbuts"><b>New Starter Guides</b></a>
    <div id="sub3" class="hideit">
    <a href="http://extreme.50webs.net/" tabindex="25" class="navsubs" target="_blank">Induction Manual</a>
    <a href="http://extreme.50webs.net/forums/" tabindex="26" class="navsubs" target="_blank">Knowledge Guide</a>
    
    </div>
    <a href="javascript: void(0)" class="navbuts"><strong>First Time Fixes</strong></a>
    <a href="javascript: void(0)" class="navbuts"><strong>Quick Resolution Notes</strong></a>
    
    <a href="javascript: void(0)" tabindex="27" onClick="SB_swapClass(1,'sub8','showit','hideit','div')" class="navbuts"><b>SLAM</b></a>
    <div id="sub3" class="hideit">
    <a href="http://extreme.50webs.net/" tabindex="28" class="navsubs" target="_blank">Joiner's Form</a>
    <a href="http://extreme.50webs.net/forums/" tabindex="29" class="navsubs" target="_blank">eXtreme Templates Forum</a>
    <a href="http://extreme.50webs.net/index.php?categoryid=3&amp;p13_sectionid=6" tabindex="18" class="navsubs" target="_blank">Web Templates</a>
    <a href="http://extreme.50webs.net/index.php?categoryid=3&amp;p13_sectionid=5" tabindex="19" class="navsubs" target="_blank">Photoshop Graphics</a>
    <a href="http://extreme.50webs.net/index.php?categoryid=3&amp;p13_sectionid=4" tabindex="20" class="navsubs" target="_blank">Flash Graphics</a>
    <a href="http://extreme.50webs.net/index.php?categoryid=3&amp;p13_sectionid=3" tabindex="21" class="navsubs" target="_blank">Web Scripts</a>
    <a href="http://extreme.50webs.net/index.php?categoryid=3&amp;p13_sectionid=2" tabindex="22" class="navsubs" target="_blank">Others Free Downloads</a>
    
    </div>
    </div>
    
    
    </body>
    
    </html>
    Code:
    function SB_swapClass(){ 
     var i,x,tB,j=0,tA=new Array(),arg=SB_swapClass.arguments;
     if(document.getElementsByTagName){for(i=4;i<arg.length;i++){tB=document.getElementsByTagName(arg[i]);
      for(x=0;x<tB.length;x++){tA[j]=tB[x];j++;}}for(i=0;i<tA.length;i++){
      if(tA[i].className){if(tA[i].id==arg[1]){if(arg[0]==1){
      tA[i].className=(tA[i].className==arg[3])?arg[2]:arg[3];}else{tA[i].className=arg[2];}
      }else if(arg[0]==1 && arg[1]=='none'){if(tA[i].className==arg[2] || tA[i].className==arg[3]){
      tA[i].className=(tA[i].className==arg[3])?arg[2]:arg[3];}
      }else if(tA[i].className==arg[2]){tA[i].className=arg[3];}}}}
    }
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);


  •  

    Posting Permissions

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