JavaScript.CoolDev.Com Support Forums

Any questions related to JavaScript menu and JavaScript tree menu by Javascript.CoolDev.Com

 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

Main Menu Height Sizes with Images

 
Post new topic   Reply to topic    JavaScript.CoolDev.Com Forum Index -> COOLjsMenu
Author Message
JasonRG



Joined: 22 Jun 2007
Posts: 2
Location: Ohio
PostPosted: Mon Jun 25, 2007 2:41 pm    Post subject: Main Menu Height Sizes with Images Reply with quote
I have a menu setup that uses images for the mail level of the menu. I am trying to add a new menu item that will require a larger image (height, not width). I am able to add the menu item where I want it to display, however, I cannot seem to get the height to work correctly. Below is a screen shot of the menu as well as the code from menu_items.js Any help would be greatly appreciated.



Code:

var MENU_ITEMS = [
   {pos:'relative', itemoff:[21,0], leveloff:[5,113], style:STYLE, size:[20,138]},
   {code:'<img src="images/btn01_home.jpg" alt="Home" width="138" height="21" border="0" />', url:'/'},
   {code:'<img src="images/btn02_company.jpg" alt="Company" width="138" height="20" border="0" />',
      sub:[
         {style:SUBSTYLE, size:[21,120]},
         {code:"Company Overview", url:'/company.php'},
         {code:"Guiding Principles", url:'/principles.php'},
         {code:"Board Members", url:'/board.php'},
         {code:"Committee Charters",
            sub:[
               {style:SUBSTYLE, size:[21,145], leveloff:[10,120]},
               {code:"Audit", url:'/audit.php'},
               {code:"Budget & Compensation", url:'/budget.php'},
               {code:"Governance", url:'/governance.php'},
               {code:"Investment", url:'/investment.php'}
            ]
         }
      ]
   },
   {code:'<img src="images/btn00_ceoletter.jpg" alt="CEO Letter" width="138" height="20" border="0" />', url: '/ceoLetter.php'},
   {code:'<img src="images/btn00_financials.jpg" alt="Financials" width="138" height="20" border="0" />',
      sub:[
         {style:SUBSTYLE, size:[21,142]},
         {code:"Statement of Operations", url:'/statement_of_operations.php'},
         {code:"Balance Sheet", url:'/balance_sheet.php'},
         {code:"Direct Written Premium", url:'/direct_written_premium.php'},
         {code:"Total Assets", url:'/total_assets.php'},
         {code:"Policyholders Surplus", url:'/policyholders_surplus.php'},
         {code:"Combined Ratio", url:'/combined_ratio.php'}
      ]
   },
   {code:'<img src="images/btn03_products.jpg" alt="Products" width="138" height="20" border="0" />',
      sub:[
         {style:SUBSTYLE, size:[21,85]},
         {code:"Ohio",
            sub:[
               {style:SUBSTYLE, size:[21,85], leveloff:[10,85]},
               {code:"Auto", url:'/auto.php'},
               {code:"Homeowner", url:'/home.php'},
               {code:"Business", url:'/business.php'},
               {code:"Farm", url:'/farm.php'}
            ]
         },
         {code:"Rhode Island",
            sub:[
               {style:SUBSTYLE, size:[21,85], leveloff:[10,85]},
               {code:"Business", url:'/business.php'}
            ]
         },
      ]
   },
   {code:'<img src="images/btn04_claims.jpg" alt="Claims" width="138" height="20" border="0" />',
      sub:[
         {style:SUBSTYLE, size:[21,125]},
         {code:"Auto Claims", url:'/claims_auto.php'},
         {code:"Homeowner Claims", url:'/claims_home.php'},
         {code:"24-Hour Claims", url:'/claims_24.php'}
      ]
   },
   {code:'<img src="images/btn05_payments.jpg" alt="Payments" width="138" height="20" border="0" />', url:'/payments.php'},
   {code:'<img src="images/btn00_identity.jpg" alt="ID Resolution Service" width="138" height="45" border="0" />', url:'/idtheft_services.php', format:{size:[45,138]}},
   {code:'<img src="images/btn06_careers.jpg" alt="Careers" width="138" height="20" border="0" />',
      sub:[
         {style:SUBSTYLE, size:[21,75]},
         {code:"Benefits", url:'/careers_benf.php'},
         {code:"Postings", url:'/careers_post.php'}
      ]
   },
   {code:'<img src="images/btn07_contact.jpg" alt="Contact" width="138" height="20" border="0" />', url:'/contact.php'},
   {code:'<img src="images/btn08_pandt.jpg" alt="Pandt" width="138" height="30" border="0" />', url:'/pandt.php', format:{size:[30,138]}}
];

Thanks!

JasonRG
Back to top
AlexKunin
Developer


Joined: 03 Jan 2003
Posts: 1191
PostPosted: Wed Jul 11, 2007 5:52 am    Post subject: Reply with quote
You didn't replied my answer by e-mail, and I'm not sure if you've received it.

To fix the issue, add itemoff instruction to the next item:
Code:
{code:'<img src="images/btn06_careers.jpg" alt="Careers" width="138"
height="20" border="0" />', itemoff:[46,0], ...
Back to top
JasonRG



Joined: 22 Jun 2007
Posts: 2
Location: Ohio
PostPosted: Mon Jul 16, 2007 4:31 pm    Post subject: Reply with quote
Alex,

Thank you for your reply. Sorry it took me so long to get back to you, I was out of the office last week. I added the code per your suggestion and have included a screen shot of the results. As you can see, it expanded the Careers menu option and put a large gap between the submenu items of the Careers option:



I then tried to move the itemoff parameter to the Identity Resolution menu item (above Careers) and the menu item expanded but the image is not fitting correctly into the menu location:



I appreciate all your help.
Back to top
AlexKunin
Developer


Joined: 03 Jan 2003
Posts: 1191
PostPosted: Mon Jul 16, 2007 4:42 pm    Post subject: Reply with quote
Please, send me (alx@cooldev.com) files with your latest modifications.
Back to top
Display posts from previous:   
Post new topic   Reply to topic    JavaScript.CoolDev.Com Forum Index -> COOLjsMenu All times are GMT
Page 1 of 1