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 

Sub Menu Width

 
Post new topic   This topic is locked: you cannot edit posts or make replies.    JavaScript.CoolDev.Com Forum Index -> COOLjsMenu
Author Message
mbrad



Joined: 11 Jun 2007
Posts: 14
PostPosted: Wed Jun 13, 2007 1:40 am    Post subject: Sub Menu Width Reply with quote
Thanks for taking the time to read my question.

My Main Menu items have size[22,99]. I would like all my sub menu items to be the same size: size[22,140]. Most of my Main Menus have only one sub menu, except one. All of the sub menus show size[22,140] except the ones where there are 2 sub menus under one main menu

ex 1: This one, the sub menu extends past the main menu width.

Philosophy |
Code of Conduct

ex 2: This one, the first sub menu is only as wide as the main menu, but the second sub menu extends the full 140.

Teams |
CDN Teams | US Teams |

How can I get the "CDN Teams" sub menu to have width of 140, and not the width of the main menu item?

WORKS:
Quote:
{code:"Philosophy", "url":"Philosophy.htm", style:STYLE, size:[22,99],
sub:[
{leveloff:[20,0], size:[22,140]},
{code:"Code Of Conduct", "url":"CodeOfConduct.htm",style:STYLE2}
]
},


DOESN'T WORK:
Quote:
{code:"Teams", "url":"Teams.htm", style:STYLE, size:[22,99],
sub:[
{leveloff:[20,0], size:[22,140]},
{code:"CDN Teams",style:STYLE2},
{code:"US Teams",style:STYLE2}
]
},


If I add another line to the "Philosophy" sub menu, it acts just like the Teams sub menus.

Thanks,

Brad
Back to top
AlexKunin
Developer


Joined: 03 Jan 2003
Posts: 1191
PostPosted: Wed Jun 13, 2007 12:06 pm    Post subject: Reply with quote
Can you send me (javascript@cooldev.com) complete self of files to reproduce the issue? Please, include coolmenu.js too.
Back to top
mbrad



Joined: 11 Jun 2007
Posts: 14
PostPosted: Tue Jun 19, 2007 1:36 am    Post subject: Reply with quote
Hi Alex,

I've been trying to figure this out for the past while. Just wondering if you've received my e-mail and if you've figured out a solution. I have no idea, and I've added more sub menus that need to be wider due to the text on the sub menu item.

Thanks again for your help on this.

Brad

Here is my info again:

JS
Code:
BLANK_IMAGE = 'images/b.gif';

var STYLE = {
   /*border:0,         // item's border width, pixels; zero means "none"
   shadow:0,         // item's shadow size, pixels; zero means "none"*/
   /*color:{
      border:"#666666",   // color of the item border, if any
      shadow:"#DBD8D1",   // color of the item shadow, if any
      bgON:"white",      // background color for the items
      bgOVER:"#B6BDD2"   // background color for the item which is under mouse right now
   },*/
   css:{
      ON:"clsCMOn",      // CSS class for items
      OVER:"clsCMOver"   // CSS class  for item which is under mouse
   }
   
};

var STYLE2 = {
   /*border:0,         // item's border width, pixels; zero means "none"
   shadow:0,         // item's shadow size, pixels; zero means "none"*/
   /*color:{
      border:"#666666",   // color of the item border, if any
      shadow:"#DBD8D1",   // color of the item shadow, if any
      bgON:"orange",      // background color for the items
      bgOVER:"#B6BDD2"   // background color for the item which is under mouse right now
   },*/
   css:{
      ON:"clsCMOn2",      // CSS class for items
      OVER:"clsCMOver2"   // CSS class  for item which is under mouse
   }
   
};

var MENU_ITEMS = [
   {pos:[106,116], itemoff:[0,99], leveloff:[20,0], size:[22,99], blankImage:"Images/b.gif"},
   {code:"Home", "url":"Index.htm", style:STYLE,
      sub:[]
   },
   {code:"About Us", "url":"AboutUs.htm", style:STYLE, size:[22,99],
      sub:[
         {leveloff:[20,0], size:[22,140]},
         {code:"League Board Members", "url":"LeagueBoardMembers.htm",style:STYLE2},
         {code:"Leadership Structure", "url":"LeadershipStructure.htm",style:STYLE2}
      ]
   },
   {code:"Philosophy", "url":"Philosophy.htm", style:STYLE, size:[22,99],
      sub:[
         {leveloff:[20,0], size:[22,140]},
         {code:"Code Of Conduct", "url":"CodeOfConduct.htm",style:STYLE2}
      ]
   },
   {code:"Teams", "url":"Teams.htm", style:STYLE, size:[22,99],
      sub:[
         {leveloff:[20,0], size:[22,140]},
         {code:"CDN Teams",style:STYLE2},
         {code:"US Teams",style:STYLE2}
      ]
   },
   {code:"Standings", "url":"Standings.htm", style:STYLE, size:[22,99],
      sub:[]
   },
   {code:"Schedule", "url":"Schedule.htm", style:STYLE, size:[22,99],
      sub:[]
   },
   {code:"Contact Us", "url":"ContactUs.htm", style:STYLE, size:[22,99],
      sub:[]
   },
   {code:"Links", "url":"Links.htm", style:STYLE, size:[22,99],
      sub:[]
   }
];


CSS
Code:
div {
   font-family: Tahoma, Helvetica;
}

.clsCMOn, .clsCMOver {
   font-size: 16px;
    padding: 0px;

   text-align: center;
   line-height: 22px;
}

.clsCMOn {
background-color: transparent;
color: #ffffff;
   background-image:url(Images/ButtonBack2.gif);
   background-repeat: no-repeat;
   background-position: top left;
   font-weight: bold;

}               

.clsCMOver {
background-color: transparent;
color: #000099;
   background-image:url(Images/ButtonBackOver3.gif);
   background-repeat: no-repeat;
   background-position: top left;
}         

.clsCMOn2, .clsCMOver2 {
   font-size: 12px;
    padding: 2px 4px;
   /*border: 2px solid #666666;*/
}

.clsCMOn2 {
background-color: transparent;
color: #ffffff;
   background-image:url(Images/ButtonBackSub2.gif);
   background-repeat: no-repeat;
   background-position: top left;
}               

.clsCMOver2 {
color: #000099;
   background-image:url(Images/ButtonBackOverSub3.gif);
   background-repeat: no-repeat;
   background-position: top left;
}   


HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Two Nations Female Hockey League - A fun and competative internations female hockey league, focusing on fair play and player development." />
<meta name="keywords" content="Hockey, female, international, league, nations, ice, teams, girls, ladies, Players, coaches, Commissioner, Executive, Manitoba, Minnesota, Elite, Extreme, Saints, Lightning, Mustangs, Coyotes, Edge, Cats" />
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ongXn98vPdWEemx2Lu5qZozNxw3CDdugXLIpK9XzOr4=" />
<title>2 Nations Female Hockey League:::::</title>
<script type="text/javascript" src="Javascript/coolmenu.js"></script>
<script type="text/javascript" src="Javascript/menu_items.js"></script>
<link rel="stylesheet" type="text/css" href="menu_styles.css">
<link rel="stylesheet" type="text/css" href="2NFHL.css">
</head>

<body>
<script type="text/javascript">var m1 = new COOLjsMenu("menu1", MENU_ITEMS)</script>
<div class="LogoDiv"><a href="Index.htm"><img class="Logo" src="Images/WOMENSHOCKEY CHOICE 1Small2.jpg" alt="Two Nations Female Hockey League"></a><img src="Images/2NLogoBanner.jpg" alt="2 Nations Logo Banner" /></div>
<div class="NavDiv">
<p class="TeamsNav">Teams: <a href="Team1">Coyotes</a> | <a href="Team2">Extreme</a> | <a href="Team3">Ice Cats</a> | <a href="Team4">Saints</a> | <a href="Team5">Mustangs</a> | <a href="Team6">Lightening</a> | <a href="Team7">On Edge</a></p>
</div>
<div class="ContentDiv">
<div class="prop"></div>
<div class="clearprop"></div>
</div>
<div class="BottomNavDiv">
   <div class="BottomNavDivCont">
      <p class="BottomNavLinkP"><a href="Index.htm" class="BottomNavLink">Home</a> | <a href="Index.htm" class="BottomNavLink">About Us</a> | <a href="Index.htm" class="BottomNavLink">Philosophy</a> | <a href="Index.htm" class="BottomNavLink">Teams</a> | <a href="Index.htm" class="BottomNavLink">Standings</a> | <a href="Index.htm" class="BottomNavLink">Schedule</a> | <a href="Index.htm" class="BottomNavLink">Contact Us</a> | <a href="Index.htm" class="BottomNavLink">Links</a><p/>
   </div>
</div>
</body>
</html>
Back to top
mbrad



Joined: 11 Jun 2007
Posts: 14
PostPosted: Wed Jun 20, 2007 2:47 am    Post subject: Reply with quote
I just noticed something.

The widths are working. The problem is that the second sub menu is floating left over top of the first sub menu. I can see the first sub menu behind the second one.

If I can figure out how to fix that, we've got it.

Any ideas would be appreciated.

Brad
Back to top
mbrad



Joined: 11 Jun 2007
Posts: 14
PostPosted: Wed Jun 20, 2007 4:35 pm    Post subject: Reply with quote
OK, I GOT IT!!!!

I had to add itemoff:[0,99] to the second sub menu item and push it over the width of the sub menu items, in my case 140px.

IT WORKS.

Brad
Back to top
Display posts from previous:   
Post new topic   This topic is locked: you cannot edit posts or make replies.    JavaScript.CoolDev.Com Forum Index -> COOLjsMenu All times are GMT
Page 1 of 1