Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:46

Always Visible Sub Menu underneath its parent


Poster: sinkboat
Dated: Thursday December 21 2006 - 2:39:37 GMT

Hi, I need to make the sub-menu always visible underneath its parent menu, but just for the 1st sub-menu... the 2nd, 3rd, etc sub-menu should shows on the right of the parent sub-menu...

Here's the menu_data.js:
Code:
fixMozillaZIndex=true;
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=0;
_subOffsetLeft=2;

with(rootStyle=new mm_style()){
bordercolor="#296488";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="100%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#EAEAEA";
offcolor="#611B74";
onbgcolor="#EAEAEA";
oncolor="#E35F15";
padding=5;
pagecolor="#E35F15";
separatorimage="images/separator.gif";
overseparatorimage="images/separator_over.gif";
pageseparatorimage="images/separator_over.gif";
separatorpadding=1;
separatorheight=1;
subimage="images/arrow.gif";
subimagepadding=3;
image="images/left_arrow.gif";
overimage="images/left_arrow_over.gif";
pageimage="images/left_arrow_over.gif";
imagepadding=3;
}

with(childStyle=new mm_style()){
bordercolor="#CCCCCC";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="100%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#EAEAEA";
offcolor="#611B74";
onbgcolor="#EAEAEA";
oncolor="#E35F15";
overfilter="Fade(duration=0.2);Alpha(opacity=90);";
padding=5;
pagecolor="#E35F15";
separatorimage="images/separator.gif";
overseparatorimage="images/separator_over.gif";
pageseparatorimage="images/separator_over.gif";
separatorpadding=1;
separatorheight=1;
subimage="images/arrow.gif";
subimagepadding=3;
image="images/left_arrow.gif";
overimage="images/left_arrow_over.gif";
pageimage="images/left_arrow_over.gif";
imagepadding=3;
}

Here's the menu I have made:
Code:
<div style="padding: 5px 10px 5px 10px;">
   <script type="text/javascript">
   <!--
   with(milonic=new menuname("menu_0")){
   alwaysvisible=1; position="relative"; itemwidth=160; style=rootStyle;
   overflow="scroll";
   aI("text=Back Plywood;url=businessline.php?cat=38;");
   aI("showmenu=menu_1;text=Chair Components;url=businessline.php?cat=1;");
   aI("showmenu=menu_15;text=Hardware;url=businessline.php?cat=15;");
   aI("text=Hotel and Hospitality;url=http://www.young-hotel.net/;");
   aI("showmenu=menu_11;text=Office Furniture;url=businessline.php?cat=11;");
   aI("text=Beauty Salon;url=businessline.php?cat=17;");
   aI("text=Chair Kit;url=businessline.php?cat=10;");
   }
   with(milonic=new menuname("menu_1")){
   style=childStyle;
   overflow="scroll";
   aI("showmenu=menu_9;text=Accessories;url=businessline.php?cat=9;");
   aI("showmenu=menu_5;text=Armrest;url=businessline.php?cat=5;");
   aI("text=Castor;url=businessline.php?cat=2;");
   aI("showmenu=menu_3;text=Footbases;url=businessline.php?cat=3;");
   aI("text=Gaslift;url=businessline.php?cat=4;");
   aI("showmenu=menu_6;text=Mechanism ( with Back up-right );url=businessline.php?cat=6;");
   aI("showmenu=menu_7;text=Plywood;url=businessline.php?cat=7;");
   aI("showmenu=menu_8;text=Seat and Back Cover;url=businessline.php?cat=8;");
   }
   with(milonic=new menuname("menu_3")){
   style=childStyle;
   overflow="scroll";
   aI("text=Aluminium;url=businessline.php?cat=25;");
   aI("text=Metal;url=businessline.php?cat=23;");
   aI("text=Nylon;url=businessline.php?cat=22;");
   aI("text=PP;url=businessline.php?cat=24;");
   }
   with(milonic=new menuname("menu_5")){
   style=childStyle;
   overflow="scroll";
   aI("text=Adjustable Armrest;url=businessline.php?cat=26;");
   aI("text=Arm Pad;url=businessline.php?cat=28;");
   aI("text=Fix Armrest;url=businessline.php?cat=27;");
   }
   with(milonic=new menuname("menu_6")){
   style=childStyle;
   overflow="scroll";
   aI("text=Keyboard Mechanism;url=businessline.php?cat=35;");
   aI("text=Knee Tilt Mechanism;url=businessline.php?cat=34;");
   aI("text=Saddle Mechanism;url=businessline.php?cat=30;");
   aI("text=Seat Plate Mechanism;url=businessline.php?cat=29;");
   aI("text=Seat Slider;url=businessline.php?cat=33;");
   aI("text=Stool Mechanism;url=businessline.php?cat=31;");
   aI("text=Tilt Mechanism;url=businessline.php?cat=32;");
   }
   with(milonic=new menuname("menu_7")){
   style=childStyle;
   overflow="scroll";
   aI("text=L Type Plywood;url=businessline.php?cat=36;");
   aI("text=Seat Plywood;url=businessline.php?cat=37;");
   }
   with(milonic=new menuname("menu_8")){
   style=childStyle;
   overflow="scroll";
   aI("text=Back Cover;url=businessline.php?cat=40;");
   aI("text=Seat Cover;url=businessline.php?cat=39;");
   }
   with(milonic=new menuname("menu_9")){
   style=childStyle;
   overflow="scroll";
   aI("text=Bellow;url=businessline.php?cat=41;");
   aI("text=Bracket;url=businessline.php?cat=42;");
   aI("text=Mechanism Cover;url=businessline.php?cat=44;");
   aI("text=Telescopic;url=businessline.php?cat=43;");
   }
   with(milonic=new menuname("menu_11")){
   style=childStyle;
   overflow="scroll";
   aI("text=Desking;url=businessline.php?cat=55;");
   aI("text=Educational Seating;url=businessline.php?cat=54;");
   aI("text=Multifunctional Seating;url=businessline.php?cat=48;");
   aI("text=Office Furniture;url=businessline.php?cat=50;");
   aI("text=Others;url=businessline.php?cat=14;");
   aI("text=Partition;url=businessline.php?cat=56;");
   aI("text=Public Seating;url=businessline.php?cat=47;");
   aI("text=Theater Seating;url=businessline.php?cat=53;");
   }
   with(milonic=new menuname("menu_15")){
   style=childStyle;
   overflow="scroll";
   aI("text=Desk;url=businessline.php?cat=18;");
   aI("text=Drawer Slide;url=businessline.php?cat=19;");
   aI("text=Handles;url=businessline.php?cat=21;");
   aI("text=Hinges;url=businessline.php?cat=20;");
   }
   drawMenus();
   //-->
   </script>
</div>


The menu i need to show underneath its parent are: menu_1, menu_11, and menu_15.
    *menu_1
    Underneath "Chair Components" of the main-menu
    *menu_11
    Underneath "Office Furniture" of the main-menu
    *menu_15
    Underneath "Hardware" of the main-menu

The expected result should be:
Code:
Black Plywood
Chair Components
    Accesories ->
    Armrest ->
    Castor
    Footbases ->
    Gaslift
    Mechanism (with Back up-right) ->
    Plywood
    Seat and Back Cover
Hardware
    Desk
    Drawer Slide
    Handles
    Hinges
Hotel and Hospitality
Office Furniture
    Desking
    Educational Seating
    Multifunctional Seating
    Office furniture
    Others
    Partition
    Public Seating
    Theater Seating
Beauty Salon
Chair Kit


I have tried to make the menu_1, menu_11, and menu_15 with property alwaysvisible=1, but the result wasnt good... the menu didnt shows underneath its parent.

I really need help for this problem. Could u help me?

Thx a lot =)


Poster: Ruth
Dated: Thursday December 21 2006 - 2:55:39 GMT

Hi,

It looks like you want the menu items to open down, if that's the case you need the collapsible menu. http://www.milonic.com/treemenu/

The one at the top. You can set the sub subs to open regularly by eliminating the type=tree; in the aI string that has the showmenu for whichever subs you want to open at the side.

Make sure you download the newest treemenu.js module from the link on that page even though there is one in the download for the collapsible menu. It may not be the newest version of the module.

If you have any problems just post back.

Ruth


Poster: sinkboat
Dated: Thursday December 21 2006 - 3:39:32 GMT

OK, almost there...

but i want the 1st sub-menu always opened by default (no need to click the main-menu first) just like the main-menu. And it should opens just underneath its parent menu (like collapse menu).

heres the new menu:
Code:
<div style="padding: 5px 10px 5px 10px;">
   <script type="text/javascript">
   <!--
   with(milonic=new menuname("menu_0")){
   alwaysvisible=1; position="relative"; itemwidth=160; style=rootStyle;
   overflow="scroll";
   aI("text=Back Plywood;url=businessline.php?cat=38;");
   aI("showmenu=menu_1;type=tree;text=Chair Components;url=;");
   aI("showmenu=menu_15;type=tree;text=Hardware;url=;");
   aI("text=Hotel and Hospitality;url=http://www.young-hotel.net/;");
   aI("showmenu=menu_11;type=tree;text=Office Furniture;url=;");
   aI("text=Beauty Salon;url=businessline.php?cat=17;");
   aI("text=Chair Kit;url=businessline.php?cat=10;");
   }
   with(milonic=new menuname("menu_1")){
   style=childStyle;
   overflow="scroll";
   aI("showmenu=menu_9;text=Accessories;url=businessline.php?cat=9;");
   aI("showmenu=menu_5;text=Armrest;url=businessline.php?cat=5;");
   aI("text=Castor;url=businessline.php?cat=2;");
   aI("showmenu=menu_3;text=Footbases;url=businessline.php?cat=3;");
   aI("text=Gaslift;url=businessline.php?cat=4;");
   aI("showmenu=menu_6;text=Mechanism ( with Back up-right );url=businessline.php?cat=6;");
   aI("showmenu=menu_7;text=Plywood;url=businessline.php?cat=7;");
   aI("showmenu=menu_8;text=Seat and Back Cover;url=businessline.php?cat=8;");
   }
   with(milonic=new menuname("menu_3")){
   style=childStyle;
   overflow="scroll";
   aI("text=Aluminium;url=businessline.php?cat=25;");
   aI("text=Metal;url=businessline.php?cat=23;");
   aI("text=Nylon;url=businessline.php?cat=22;");
   aI("text=PP;url=businessline.php?cat=24;");
   }
   with(milonic=new menuname("menu_5")){
   style=childStyle;
   overflow="scroll";
   aI("text=Adjustable Armrest;url=businessline.php?cat=26;");
   aI("text=Arm Pad;url=businessline.php?cat=28;");
   aI("text=Fix Armrest;url=businessline.php?cat=27;");
   }
   with(milonic=new menuname("menu_6")){
   style=childStyle;
   overflow="scroll";
   aI("text=Keyboard Mechanism;url=businessline.php?cat=35;");
   aI("text=Knee Tilt Mechanism;url=businessline.php?cat=34;");
   aI("text=Saddle Mechanism;url=businessline.php?cat=30;");
   aI("text=Seat Plate Mechanism;url=businessline.php?cat=29;");
   aI("text=Seat Slider;url=businessline.php?cat=33;");
   aI("text=Stool Mechanism;url=businessline.php?cat=31;");
   aI("text=Tilt Mechanism;url=businessline.php?cat=32;");
   }
   with(milonic=new menuname("menu_7")){
   style=childStyle;
   overflow="scroll";
   aI("text=L Type Plywood;url=businessline.php?cat=36;");
   aI("text=Seat Plywood;url=businessline.php?cat=37;");
   }
   with(milonic=new menuname("menu_8")){
   style=childStyle;
   overflow="scroll";
   aI("text=Back Cover;url=businessline.php?cat=40;");
   aI("text=Seat Cover;url=businessline.php?cat=39;");
   }
   with(milonic=new menuname("menu_9")){
   style=childStyle;
   overflow="scroll";
   aI("text=Bellow;url=businessline.php?cat=41;");
   aI("text=Bracket;url=businessline.php?cat=42;");
   aI("text=Mechanism Cover;url=businessline.php?cat=44;");
   aI("text=Telescopic;url=businessline.php?cat=43;");
   }
   with(milonic=new menuname("menu_11")){
   style=childStyle;
   overflow="scroll";
   aI("text=Desking;url=businessline.php?cat=55;");
   aI("text=Educational Seating;url=businessline.php?cat=54;");
   aI("text=Multifunctional Seating;url=businessline.php?cat=48;");
   aI("text=Office Furniture;url=businessline.php?cat=50;");
   aI("text=Others;url=businessline.php?cat=14;");
   aI("text=Partition;url=businessline.php?cat=56;");
   aI("text=Public Seating;url=businessline.php?cat=47;");
   aI("text=Theater Seating;url=businessline.php?cat=53;");
   }
   with(milonic=new menuname("menu_15")){
   style=childStyle;
   overflow="scroll";
   aI("text=Desk;url=businessline.php?cat=18;");
   aI("text=Drawer Slide;url=businessline.php?cat=19;");
   aI("text=Handles;url=businessline.php?cat=21;");
   aI("text=Hinges;url=businessline.php?cat=20;");
   }
   drawMenus();
   //-->
   </script>
</div>


Poster: Ruth
Dated: Thursday December 21 2006 - 4:53:53 GMT

Hi,

I'm sorry, I don't really understand. That submenu uses the same style and looks the same so why not just make it part of the main menu if you want it always open? The treemenu can't do what you want because when you mark that submenu as alwaysvisible, it has 'move' it down away from all the attached items that open a submenu on click and therefor shift the menu down.

Could you please explain the need for this menu to be open? I could perhaps figure something out if I knew that.

Now, there is one thing you could do, but I think it would end up opening all the submenus that had the corresponding businessline.php page.

You could make that Item clickable as a link to a 'main' businessline page and on that page use the openmenusbyurl.js module. Then all the submenus with pages that matched that would be opened. And, that is the problem because ALL the submenus would be opened if they had that businessline.php as part of the url [I think] This isn't something I work with much, the ? thing in the url so I'm not sure on that.

Ruth

©1998-2012 Milonic Solutions Ltd. UK Registered Company #4406835
Privacy Policy | License Agreement | Contact Us | Tech Support