Hi, I am new to Superfish vertical nav system and need help to code the look of the menu.
I can't figure out
- how to get the width and height to change
- how to keep the hover color on the text of parent once the cursor has moved to the child level.
I am using the superfish.css and superfish-vertical.css
Here is the url of what the menu needs to look like using an old menu system and how it needs to operate:
Here is the code of the old menu in js but not with a css:
/***********************************************************************************
* (c) Ger Versluis 2000 version 5.41 24 December 2001 *
* For info write to
menus@burmees.nl *
* You may remove all comments for faster loading *
***********************************************************************************/
var NoOffFirstLineMenus=11; // Number of first level items
var LowBgColor='#D19736'; // Background color when mouse is not over
var LowSubBgColor='#D19736'; // Background color when mouse is not over on subs
var HighBgColor='#F3E2C7'; // Background color when mouse is over
var HighSubBgColor='#F3E2C7'; // Background color when mouse is over on subs
var FontLowColor='#FFFFFF'; // Font color when mouse is not over
var FontSubLowColor='#FFFFFF'; // Font color subs when mouse is not over
var FontHighColor='#3A3D80'; // Font color when mouse is over
var FontSubHighColor='#3A3D80'; // Font color subs when mouse is over
var BorderColor='#45479A'; // Border color
var BorderSubColor='#426C86'; // Border color for subs
var BorderWidth=1; // Border width
var BorderBtwnElmnts=1; // Border between elements 1 or 0
var FontFamily="verdana,arial,comic sans ms,technical" // Font family menu items
var FontSize=8; // Font size menu items
var FontBold=1; // Bold menu items 1 or 0
var FontItalic=0; // Italic menu items 1 or 0
var MenuTextCentered='left'; // Item text position 'left', 'center' or 'right'
var MenuCentered='left'; // Menu horizontal position 'left', 'center' or 'right'
var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static
var ChildOverlap=.01; // horizontal overlap child/ parent
var ChildVerticalOverlap=.5; // vertical overlap child/ parent
var StartTop=0; // Menu offset x coordinate
var StartLeft=0; // Menu offset y coordinate
var VerCorrect=0; // Multiple frames y correction
var HorCorrect=0; // Multiple frames x correction
var LeftPaddng=6; // Left padding
var TopPaddng=3; // Top padding
var FirstLineHorizontal=0; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
var MenuFramesVertical=1; // Frames in cols or rows 1 or 0
var DissapearDelay=500; // delay before menu folds in
var TakeOverBgColor=1; // Menu frame takes over background color subitem frame
var FirstLineFrame='navig'; // Frame where first level appears
var SecLineFrame='space'; // Frame where sub levels appear
var DocTargetFrame='space'; // Frame where target documents appear
var TargetLoc="MenuPos"; // span id for relative positioning
var HideTop=0; // Hide first level when loading new document 1 or 0
var MenuWrap=1; // enables/ disables menu wrap 1 or 0
var RightToLeft=0; // enables/ disables right to left unfold 1 or 0
var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover
var WebMasterCheck=0; // menu tree checking on or off 1 or 0
var ShowArrow=1; // Uses arrow gifs when 1
var KeepHilite=1; // Keep selected path highlighted
var Arrws=['../../EN/tri.gif',5,10,'../../EN/tridown.gif',10,5,'../../EN/trileft.gif',5,10]; // Arrow source, width and height
function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}// Menu tree
// MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);
// For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg"
Menu2=new Array("Services","javascript:void(0);","",10,21,158);
Menu2_1=new Array("CAPE National Office Org Chart","
http://www.acep-cape.ca/EN/NatOffOrgChart/","",0,33,202);
Menu2_2=new Array("Labour Relations / Employment Information","
http://www.acep-cape.ca/EN/labRelEmplInfo/","",0,33,202);
Menu2_3=new Array("Labour Relations / Employment Representation","
http://www.acep-cape.ca/EN/labRelEmplRep/","",0,33,202);
Menu2_4=new Array("E-Mail / Update Notification","
http://www.acep-cape.ca/EN/electronicMail/","",0,19,202);
Menu2_5=new Array("Membership Registration","
http://wwwcep-cape.ca/EN/becomingAMember/","",0,19,202);
Menu2_6=new Array("Publications","
http://www.acep-cape.ca/EN/publications/","",0,19,202);
Menu2_7=new Array("Stewards Training","
http://www.acep-cape.ca/EN/stewardsTraining/","",0,19,202);
Menu2_8=new Array("Links to CAPE Group Insurance Plans","
http://www.acep-cape.ca/EN/groupInsur/","",0,33,202);
Menu2_9=new Array("CAPE Awards","
http://www.acep-cape.ca/EN/awards/","",0,19,202);
Menu2_10=new Array("Directory of Contacts","
http://www.acep-cape.ca/EN/dirContacts/","",0,19,202);
Menu3=new Array("Organization","javascript:void(0);","",4,21,158);
Menu3_1=new Array("CAPE Governance Org. Chart","
http://www.acep-cape.ca/EN/orgChart/","",0,21,210);
Menu3_2=new Array("CAPE President","
http://www.acep-cape.ca/EN/president/","",0,21,210);
Menu3_3=new Array("Constitution and By-Laws","
http://www.acep-cape.ca/EN/constitutionBylaws/","",0,21,210);
Menu3_4=new Array("Policies and Protocols","
http://www.acep-cape.ca/EN/policiesProtocols/","",0,21,210);
Menu5=new Array("Events","
http://www.acep-cape.ca/EN/upcomingEvents/","",1,21,158);
Menu5_1=new Array("CAPE General Meetings","
http://www.acep-cape.ca/EN/generalMeetings/","",0,21,164);
Menu6=new Array("Local Leaders","
http://www.acep-cape.ca/EN/localLeadership/","",2,21,158);
Menu6_1=new Array("CAPE Locals","
http://www.acep-cape.ca/EN/locals/","",2,21,110);
Menu6_1_1=new Array("National Capital Region Locals","javascript:void(0);","",23,32,130);
Menu6_1_1_1=new Array("Agriculture & Agri-Food Canada - #507","
http://www.acep-cape.ca/EN/local_507/","",0,21,280);
Menu6_1_1_2=new Array("Canadian Human Rights Commission","
http://www.acep-cape.ca/EN/local_CHRC/","",0,21,280);
Menu6_1_1_3=new Array("Canadian International Development Agency - #517","
http://www.acep-cape.ca/EN/local_517/","",0,32,280);
Menu6_1_1_4=new Array("Canadian Radio-Television & Telecommunications Commission","
http://www.acep-cape.ca/EN/local_CRTC/","",0,32,280);
Menu6_1_1_5=new Array("Elections Canada - #518","
http://www.acep-cape.ca/EN/local_518/","",0,21,280);
Menu6_1_1_6=new Array("Environment Canada","
http://www.acep-cape.ca/EN/local_DOE/","",0,21,280);
Menu6_1_1_7=new Array("Foreign Affairs & International Trade - #516","
http://www.acep-cape.ca/EN/local_516/","",0,32,280);
Menu6_1_1_8=new Array("Health Canada - #512","
http://www.acep-cape.ca/EN/local_512/","",0,21,280);
Menu6_1_1_9=new Array("Human Resources & Social Development Canada - #514","
http://www.acep-cape.ca/EN/local_514/","",0,32,280);
Menu6_1_1_10=new Array("Immigration and Refugee Board - #501","
http://www.acep-cape.ca/EN/local_501/","",0,21,280);
Menu6_1_1_11=new Array("Indian and Northern Affairs - #502","
http://www.acep-cape.ca/EN/local_502/","",0,21,280);
Menu6_1_1_12=new Array("Industry Canada - #508","
http://www.acep-cape.ca/EN/local_508/","",0,21,280);
Menu6_1_1_13=new Array("Justice Canada - #513","
http://www.acep-cape.ca/EN/local_513/","",0,21,280);
Menu6_1_1_14=new Array("Library and Archives Canada - #519","
http://www.acep-cape.ca/EN/local_519/","",0,21,280);
Menu6_1_1_15=new Array("Library of Parliament - #515","
http://www.acep-cape.ca/EN/local_515/","",0,21,280);
Menu6_1_1_16=new Array("National Parole Board","
http://www.acep-cape.ca/EN/local_NPB/","",0,21,280);
Menu6_1_1_17=new Array("Natural Resources Canada - #520","
http://www.acep-cape.ca/EN/local_520/","",0,21,280);
Menu6_1_1_18=new Array("Public Service Commission - #509","
http://www.acep-cape.ca/EN/local_509/","",0,21,280);
Menu6_1_1_19=new Array("Public Works and Government Services Canada - #521","
http://www.acep-cape.ca/EN/local_521/","",0,32,280);
Menu6_1_1_20=new Array("Statistics Canada - #503","
http://www.acep-cape.ca/EN/local_503/","",0,21,280);
Menu6_1_1_21=new Array("Status of Women Canada - #510","
http://www.acep-cape.ca/EN/local_510/","",0,21,280);
Menu6_1_1_22=new Array("Translation Bureau - #900","
http://www.acep-cape.ca/EN/local_900/","",0,21,280);
Menu6_1_1_23=new Array("Transport Canada - #506","
http://www.acep-cape.ca/EN/local_506/","",0,21,280);
Menu6_1_2=new Array("Regional Locals","javascript:void(0);","",16,21,130);
Menu6_1_2_1=new Array("Alberta - #801","
http://www.acep-cape.ca/EN/local_801/","",0,21,220);
Menu6_1_2_2=new Array("British Columbia - #301","
http://www.acep-cape.ca/EN/local_301/","",0,21,220);
Menu6_1_2_3=new Array("Manitoba - #601","
http://www.acep-cape.ca/EN/local_601/","",0,21,220);
Menu6_1_2_4=new Array("New Brunswick - #202","
http://www.acep-cape.ca/EN/local_202/","",0,21,220);
Menu6_1_2_5=new Array("Newfoundland - #101","
http://www.acep-cape.ca/EN/local_101/","",0,21,220);
Menu6_1_2_6=new Array("North West Territories - #302","
http://www.acep-cape.ca/EN/local_302/","",0,21,220);
Menu6_1_2_7=new Array("Nova Scotia - #201","
http://www.acep-cape.ca/EN/local_201/","",0,21,220);
Menu6_1_2_8=new Array("Ontario/Guelph","
http://www.acep-cape.ca/EN/local_OntarioGuelph/","",0,21,220);
Menu6_1_2_9=new Array("Ontario/Kingston - #504","
http://www.acep-cape.ca/EN/local_504/","",0,21,220);
Menu6_1_2_10=new Array("Ontario/Toronto - #511","
http://www.acep-cape.ca/EN/local_511/","",0,21,220);
Menu6_1_2_11=new Array("Prince Edward Is. - #102","
http://www.acep-cape.ca/EN/local_102/","",0,21,220);
Menu6_1_2_12=new Array("Québec/Montréal - #402","
http://www.acep-cape.ca/EN/local_402/","",0,21,220);
Menu6_1_2_13=new Array("Québec/Québec- #401","
http://www.acep-cape.ca/EN/local_401/","",0,21,220);
Menu6_1_2_14=new Array("Saskatchewan Northern Region - #701","
http://www.acep-cape.ca/EN/local_701/","",0,32,220);
Menu6_1_2_15=new Array("Saskatchewan Southern Region","
http://www.acep-cape.ca/EN/local_SASK_SR/","",0,32,220);
Menu6_1_2_16=new Array("Yukon/Whitehorse","
http://www.acep-cape.ca/EN/local_YK/","",0,21,220);
Menu6_2=new Array("CAPE Councils","
http://www.acep-cape.ca/EN/councils/","",2,21,110);
Menu6_2_1=new Array("Local Leadership Council","
http://www.acep-cape.ca/EN/localLeadership/","",0,21,175);
Menu6_2_2=new Array("President's Council","
http://www.acep-cape.ca/EN/presidentsCouncil/","",0,21,175);
Menu7=new Array("Committees","
http://www.acep-cape.ca/EN/Committees/","",3,21,158);
Menu7_1=new Array("National Executive Committee","
http://www.acep-cape.ca/EN/NEC/","",0,19,210);
Menu7_2=new Array("NEC Sub-Committees","javascript:void(0);","",7,19,210);
Menu7_2_1=new Array("Audit","
http://www.acep-cape.ca/EN/audit/","",0,19,180);
Menu7_2_2=new Array("Communications","
http://www.acep-cape.ca/EN/communications/","",0,19,180);
Menu7_2_3=new Array("Constitution & By-Laws","
http://www.acep-cape.ca/EN/constitution/","",0,19,180);
Menu7_2_4=new Array("Education & Mobilization","
http://www.acep-cape.ca/EN/education/","",0,19,180);
Menu7_2_5=new Array("Elections & Resolutions","
http://www.acep-cape.ca/EN/elections/","",0,19,180);
Menu7_2_6=new Array("Finance","
http://www.acep-cape.ca/EN/finance/","",0,19,180);
Menu7_2_7=new Array("Young Members Advisory","
http://www.acep-cape.ca/EN/youngMemb/","",0,19,180);
Menu7_3=new Array("CAPE Collective Bargaining / Committees and Teams","
http://www.acep-cape.ca/EN/cbCommittees/","",3,33,210);
Menu7_3_1=new Array("EC","javascript:void(0);","",2,19,40);
Menu7_3_1_1=new Array("EC Collective Bargaining Committee","
http://www.acep-cape.ca/EN/ecCBC/","",0,35,170);
Menu7_3_1_2=new Array("EC Negotiating Team","
http://www.acep-cape.ca/EN/ecNT/","",0,19,170);
Menu7_3_2=new Array("TR","javascript:void(0);","",3,19,40);
Menu7_3_2_1=new Array("TR Collective Bargaining Committee","
http://www.acep-cape.ca/EN/trCBC/","",0,35,190);
Menu7_3_2_2=new Array("TR Negotiating Team","
http://www.acep-cape.ca/EN/trNT/","",0,19,190);
Menu7_3_2_3=new Array("TR Negotiating Committee: Financial Incentive Plan","
http://www.acep-cape.ca/EN/trNCfip/","",0,35,190);
Menu7_3_3=new Array("LoP","javascript:void(0);","",2,19,40);
Menu7_3_3_1=new Array("LoP Collective Bargaining Committee","
http://www.acep-cape.ca/EN/lopCBC/","",0,35,170);
Menu7_3_3_2=new Array("LoP Negotiating Team","
http://www.acep-cape.ca/EN/lopNT/","",0,19,170);
Menu9=new Array("CAPE in the News","javascript:void(0);","",4,21,158);
Menu9_1=new Array("General Members News","
http://www.acep-cape.ca/EN/ecNews/","",0,19,163);
Menu9_2=new Array("EC Members News","
http://www.acep-cape.ca/EN/ecNews/","",0,19,163);
Menu9_3=new Array("TR Members News","
http://www.acep-cape.ca/EN/trNews/","",0,19,163);
Menu9_4=new Array("LoP Members News","
http://www.acep-cape.ca/EN/lopNews/","",0,19,163);
Here's what the new menu looks like right now:
Here's the code for the new menu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style> <style type="text/css" media="all">@import "css/master.css";</style>
<link rel="stylesheet" type="text/css" href="css/superfish_CAPE.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/superfish-vertical.css" media="screen">
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
</head>
<body>
<div id="page-container">
<div id="header">
<h1><img src="images/headers/logo_enlighten.gif" width="236" height="36" alt="Enlighten Designs" border="0" /> </h1>
</div>
<div id="sidebar-a">
<div class="padding">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
</div>
<div id="content">
<div class="padding">
<h2><img src="images/general/about.gif" width="54" height="14" alt="About" /></h2>
<p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have created view our portfolio.</p>
<p>We are currently undergoing a 'face lift', so if you have any questions or would like more information about the services we provide please feel free to contact us.</p>
<h2><img src="images/general/contact.gif" width="98" height="14" alt="Contact Us" /></h2>
<p>Phone: (07) 853 6060<br />
Fax: (07) 853 6060<br />
Email: <a href="
mailto:info@enlighten.co.nz">info@enlighten.co.nz</a><br />
P.O Box: 14159, Hamilton, New Zealand</p>
</div>
</div>
<div id="footer">
<div id="altnav">
<a href="#">About</a> -
<a href="#">Services</a> -
<a href="#">Portfolio</a> -
<a href="#">Contact Us</a> -
<a href="#">Terms of Trade</a>
</div>
Copyright Enlighten Designs