Separator before and after menu

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

Separator before and after menu

Poster: Vide
Dated: Thursday October 12 2006 - 10:41:03 BST

Hello,

I wish to have a menu without borders, there should be a separator between each item, the problem is that I want a separator or border before and efter the menu as well.

The quick solution is to create a disabled menu item before and after to get the desired effect, but when I move my mouse over such an item I get a mouseover effect, and I don't want that.

Can I solve this?

Thanks,
Vide

Poster: Ruth
Dated: Thursday October 12 2006 - 21:18:35 BST

Hi,

Try putting in an aI string before the first item and after the last and put in the separatorcode.

Code:

aI("separatorsize=1;");

If that doesn't work can you give us a link to your page so we can test?

Ruth

Poster: Vide
Dated: Friday October 13 2006 - 7:57:05 BST

Thanks for your reply Ruth,

Althou that did not work, it's like I did before.

Here is my code:

Code:

<script type="text/javascript" language="JavaScript">
        _menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
        _menuOpenDelay=150            // The time delay before menus open on mouse over
//        _subOffsetTop=10              // Sub menu top offset
//        _subOffsetLeft=-100            // Sub menu left offset

        with ( menuStyle = new mm_style() )
        {
          onbgcolor="#FF5A00";
          oncolor="#ffffff";
          offbgcolor="transparent";
          offcolor="#ffffff";
          bordercolor="#ffffff";
          borderstyle="solid";
          borderwidth=0;
          separatorcolor="#ffffff";
          separatorpadding="0";
          separatorsize="1";
          padding=8;
          fontsize="10px";
          fontweight="bold";
          fontstyle="normal";
          fontfamily="Verdana, Tahoma, Arial";
          headercolor="#000000";
          headerbgcolor="#ffffff";
          pageonbgcolor="#ff33ff";
          pageoffbgcolor="#ffff66";
        }

        with ( milonic = new menuname( "Main Menu" ) )
        {
          style=menuStyle;
          left=3;
          alwaysvisible=1;
          overflow="scroll";
          orientation="vertical";
          position="absolute";
          aI("disabled=true;onbgcolor=transparent;offbgcolor=transparent;");
          aI("text=How it works;url=/P5486N/help.aspx;");
          aI("text=Background <br>to the survey;url=/P5486N/background.aspx;");
          aI("text=Methodology;url=/P5486N/method.aspx;status=To Method Page");
          aI("text=Questionnaire;url=/P5486N/questionnaire.aspx;status=To Questionnaire Page;");
          aI("text=Contact us;url=/P5486N/contact.aspx;status=To Contact Page;");
          aI("text=Glossary;url=/P5486N/glossary.aspx;");
          aI("text=FAQ;url=/P5486N/faq.aspx;");
          aI("text=Quit/Log out;url=/P5486N/logout.aspx;status=To Logout Page;");
          aI("disabled=true;onbgcolor=transparent;offbgcolor=transparent;");
        }
        
        drawMenus();
      </script>

Poster: Ruth
Dated: Friday October 13 2006 - 8:14:05 BST

Hi,

You don't put anything in the item like disabled or such or text or anything else, just the separatorsize.

Code:

with ( milonic = new menuname( "Main Menu" ) ) 
        { 
          style=menuStyle; 
          left=3; 
          alwaysvisible=1; 
          overflow="scroll"; 
          orientation="vertical"; 
          position="absolute"; 
          aI("separatorsize=1;"); 
          aI("text=How it works;url=/P5486N/help.aspx;"); 
          aI("text=Background <br>to the survey;url=/P5486N/background.aspx;"); 
          aI("text=Methodology;url=/P5486N/method.aspx;status=To Method Page"); 
          aI("text=Questionnaire;url=/P5486N/questionnaire.aspx;status=To Questionnaire Page;"); 
          aI("text=Contact us;url=/P5486N/contact.aspx;status=To Contact Page;"); 
          aI("text=Glossary;url=/P5486N/glossary.aspx;"); 
          aI("text=FAQ;url=/P5486N/faq.aspx;"); 
          aI("text=Quit/Log out;url=/P5486N/logout.aspx;status=To Logout Page;"); 
          aI("separatorsize=1;"); 
        } 

Since there is nothing in the 'item' but the separator there is no change when you mouseover because the separator doesn't change. I tested in IE5.5 and FF1.07

Also, I"m not sure why you have the overflow="scroll" in that menu since you don't have any menu/item height set to force it to be smaller than the number of items. And, since you don't have a top position I have to assume it is just at the 0 top position.

Are you by chance putting this in a div or table? If so there is a method for doing that which can be found here http://www.milonic.com/tablemenu.php

If what I posted here doesn't work you need to upgrade to the newest version 5.759, which is what I used.

Ruth

Poster: Vide
Dated: Friday October 13 2006 - 9:17:42 BST

Thanks alot, an upgrade worked fine.

... and thanks for the pointers to the overflow attribute.

The menu is in a table so it is relative to the table.

Thanks,
Vide

Industrial Strength JavaScript and DHTML Menus

Separator before and after menu