List-based?

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:56

List-based?

Poster: shaun __at__ pctorque.net
Dated: Monday August 28 2006 - 18:52:45 BST

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.

Poster: Ruth
Dated: Monday August 28 2006 - 21:06:19 BST

Hi,

We need to have a page to check it out.

Ruth

Poster: shaun __at__ pctorque.net
Dated: Tuesday August 29 2006 - 22:13:46 BST

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:

            <ul ID='menuid'>
               <li><a href=#>MENU 1</a>
                  <ul class='menuStyle'>
                     <li><a href='http://www.google.com'>1</a></li>
                     <li><a href='http://www.google.com'>2</a></li>
                     <li><a href='http://www.google.com'>3</a></li>                     
                  </ul>
               </li>
               <li><a href=#>MENU 2</a>
                  <ul class='menuStyle'>
                     <li><a href='http://www.google.com'>4</a></li>
                     <li><a href='http://www.google.com'>5</a></li>
                     <li><a href='http://www.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:

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:

            <ul ID='menuid'>
               <li><a href=#>MENU 1</a><img src='separator.gif' />
                  <ul class='menuStyle'>
                     <li><a href='http://www.google.com'>1</a></li>
                     <li><a href='http://www.google.com'>2</a></li>
                     <li><a href='http://www.google.com'>3</a></li>                     
                  </ul>
               </li>
               <li><a href=#>MENU 2</a>
                  <ul class='menuStyle'>
                     <li><a href='http://www.google.com'>4</a></li>
                     <li><a href='http://www.google.com'>5</a></li>
                     <li><a href='http://www.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.

Poster: Ruth
Dated: Wednesday August 30 2006 - 3:08:43 BST

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

Poster: shaun __at__ pctorque.net
Dated: Thursday August 31 2006 - 2:27:33 BST

Thank you, that work perfectly!

Industrial Strength JavaScript and DHTML Menus

List-based?