List-based?

[shaun@pctorque.net]

Do seperator images work with list-based menus? I can't seem to get it to work; nor am I able to find any examples.

[Ruth]

Hi,

We need to have a page to check it out.

Ruth

[shaun@pctorque.net]

Unfortuantley the site isn't set up for public access. However, I can give the code i'm working with and some arbitrary data. I'm looking for an answer as to whether there is currently seperator image functionality for list-based menus.

Code: Select all

				<ul ID='menuid'>
					<li><a href=#>MENU 1</a>
						<ul class='menuStyle'>
							<li><a href="http://websites.milonic.com/google.com'>1</a></li>
							<li><a href="http://websites.milonic.com/google.com'>2</a></li>
							<li><a href="http://websites.milonic.com/google.com'>3</a></li>							
						</ul>
					</li>
					<li><a href=#>MENU 2</a>
						<ul class='menuStyle'>
							<li><a href="http://websites.milonic.com/google.com'>4</a></li>
							<li><a href="http://websites.milonic.com/google.com'>5</a></li>
							<li><a href="http://websites.milonic.com/google.com'>6</a></li>
						</ul>
					</li>					
				</ul>
				
				<script type='text/javascript'>
				
					_menuCloseDelay=500;
					_menuOpenDelay=150;
					_subOffsetTop=2;
					_subOffsetLeft=-2;
					separatorimage="/images/nbf_imgs/menu_divider.gif";						
					with(mainMenuStyle=new mm_style())
					{
						bordercolor="";
						borderstyle="solid";
						borderwidth=0;
						fontfamily="verdana, geneva, lucida, arial, helvetica, sans-serif";
						fontsize="11px";
						fontstyle="normal";
						fontweight="bold";
						offbgcolor="";
						offcolor="#FFFFFF";
						onbgcolor="";
						onbgcolor="";
						outfilter="randomdissolve(duration=0.3)";
						overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
						padding=0;
						pagebgcolor="#606060";
						separatorimage="/images/nbf_imgs/menu_divider.gif";						
					}
					with(menuStyle=new mm_style())
					{
						bordercolor="#FFFFFF";
						borderstyle="solid";
						borderwidth=1;
						fontfamily="verdana, geneva, lucida, arial, helvetica, sans-serif";
						fontsize="11px";
						fontstyle="normal";
						fontweight="bold";
						headerbgcolor="#FFFFFF";
						headercolor="#000000";
						offbgcolor="#606060";
						offcolor="#FFFFFF";
						onbgcolor="#606060";
						oncolor="#FAE002";
						overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
						padding=4;
						pagebgcolor="#606060";
						pagecolor="black";
						separatorcolor="#999999";
						separatorsize=1;
					}			
													
					buildListMenu("menuid","mainMenuStyle","alwaysvisible=true;position='relative';orientation='horizontal';top=10;left=10;menualign='center';menuwidth='100%';");
				</script>	

This should produce somthing like this (exuse the terrible diagram;please regard "." as whitespace):

MENU 1 MENU 2
1........ 4.........
2........ 5.........
3........ 6.........

I want to have a little separator .gif file like this (below represented as "|")

MENU1 | MENU 2
1......... 4.........
2.......... 5.........
3.......... 6.........


I've tried to do:

"separatorimage=separator.gif ;" ->

Code: Select all

buildListMenu("menuid","mainMenuStyle","alwaysvisible=true;position='relative';separatorimage='separator.gif';orientation='horizontal';top=10;left=10;menualign='center';menuwidth='100%';");

I've also tried somthing like:

Code: Select all

				<ul ID='menuid'>
					<li><a href=#>MENU 1</a><img src='separator.gif' />
						<ul class='menuStyle'>
							<li><a href="http://websites.milonic.com/google.com'>1</a></li>
							<li><a href="http://websites.milonic.com/google.com'>2</a></li>
							<li><a href="http://websites.milonic.com/google.com'>3</a></li>							
						</ul>
					</li>
					<li><a href=#>MENU 2</a>
						<ul class='menuStyle'>
							<li><a href="http://websites.milonic.com/google.com'>4</a></li>
							<li><a href="http://websites.milonic.com/google.com'>5</a></li>
							<li><a href="http://websites.milonic.com/google.com'>6</a></li>
						</ul>
					</li>					
				</ul>

Anyways, it builds the menus fine, however, it doesn't show the separator image.

Thanks for your help.

[Ruth]

Hi,

You have the separatorimage=""; in the wrong place. It belongs in the style you are using where you want that particular separator image to appear. It also must have a size listed, i.e. separatorsize=1; You can also use with that a separatorwidth=; and a separatorheight=; if you want to specify a height and width for it.

Ruth

[shaun@pctorque.net]

Thank you, that work perfectly!