Vertical scrolling slide-out menu?

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

Vertical scrolling slide-out menu?

Poster: Ray
Dated: Monday March 13 2006 - 23:44:22 GMT

G'day, I use 2 different menus on every page. A horizontal Milonic menu and a vertical scrolling slide-out side menu.

The Milonic menu works great but the side menu does not have sub menus and it is getting too long for 800 x 600 screens and it is no longer supported by the original designer. Can Milonic copy the slide-out side menu but adding sub menus?

Might be asking too much but it is another style that Milonic could use to make their product even better.

Here is a link to a page with both menus.

http://www.gdaywa.com/wildflowers/triggerplants.php

Regards

Ray

Poster: Migru
Dated: Tuesday March 14 2006 - 7:48:19 GMT

Hi

as far as I see, there is no such "sliding menu" actually supported by this menu system.
However, as you say, your actual sliding menu is too long and not supported, it would make sense to replace it by a popup Milonic menu, sample

http://www.milonic.com/menusample24.php

This, in your case, could show subs and have a vertical structure, and in OFF state, visualized just by a small image showing "MENU".

Michael

Poster: John
Dated: Tuesday March 14 2006 - 15:25:43 GMT

While our system can't hide as in your example, it can scroll and provide sub-menus. See http://www.west.asu.edu/cspc/steps/investigate.htm for an example.

Another example of opening the menu in a different way is at http://www.west.asu.edu/financialaid/. This one is not set to scroll, but it could be.

Poster: Migru
Dated: Wednesday March 15 2006 - 8:07:47 GMT

Hi

had a second "closer" look to your page.

Suggestion:
remove the sliding menu completely, not replacing it, set the milonic menu vertical, place it left oriented, and make use of the "followscroll" property.

Michael

Poster: Ray
Dated: Wednesday March 15 2006 - 19:18:05 GMT

Appreciate your replies Migru and John, and considered those alternatives.

When my pages are viewed on 800 x 600 screens the Milonic vertical menu will cover the images whereas the slide-out menu fits perfectly.

John, I know there is a huge variety of Milonic menus available but do you think that Milonic will ever design a slide-out menu? I have seen it used on many sites and it gives the site builder more flexibility when designing their pages especially if you regard smaller screen sizes.

I wish everyone would use large screens.

Regards

Ray

Poster: John
Dated: Wednesday March 15 2006 - 19:26:13 GMT

Ray wrote:

John, I know there is a huge variety of Milonic menus available but do you think that Milonic will ever design a slide-out menu? I have seen it used on many sites and it gives the site builder more flexibility when designing their pages especially if you regard smaller screen sizes.

That would be up to the boss, but when he sees this I'm sure he'll take it into consideration (he's already working on a long list of goodies).

Ray wrote:

I wish everyone would use large screens.

Heh. Tell me. Mine is 1600x1200. It's great for developing, but I always have to remember to size the screen down to check for the 'little guys'.

Poster: Migru
Dated: Wednesday March 15 2006 - 19:32:36 GMT

Hi

Quote:

When my pages are viewed on 800 x 600 screens the Milonic vertical menu will cover the images whereas the slide-out menu fits perfectly.

Just tested on 800x600

The slide-out menu covers your pictures to about 2/5th of their width.
I do not consider this "perfectly"
Your enlarged pictures do not fit to 100% , because of the title and close window button.
I agree, trend is the use of tft > 800x600, for instance 1024x768.
I´m using normally 1280x1024 and/or 1024x1280 vertical - and for testing of course anything else.

Michael

Poster: Ray
Dated: Wednesday March 15 2006 - 22:54:09 GMT

Wow big screen John,
Thanks for your answer we will see what happens.

Michael, when I say its fits perfect I mean on the 'in' state, obviously.
When the menu slides out it covers the images but then you will be looking at the menu not the pics.
And yes the enlarged pics do not fit 100% on 800 x 600 but I refuse to make them smaller.

Have you ever viewed a 800 screen with lots of toolbars? Not a pretty sight.
Thanks again for your help mate.

Regards

Ray

Poster: Migru
Dated: Wednesday March 15 2006 - 23:11:38 GMT

Hi

Quote:

you will be looking at the menu not the pics.

but that is exactly what I wanted to say when I´m suggesting the
http://www.milonic.com/menusample24.php
which doesn´t slide but expands, when clicked on (and scrolls if necessary).
You just see one small image (like you do with your "sliding" menu) and I´m just comparing that - in my opinion- not really userfriendly sliding menu, as it does not scroll nor expand its size when necessary. The sliding effect is not really necessary, its an effect and nothing else.

Michael

Poster: Ruth
Dated: Sunday March 19 2006 - 9:28:20 GMT

Hi,

Michael is correct sample24 will pop up the menu based on an image position, so you could use an image that says Menu and when moused over the submenu, which would be all the menu items you have now except Menu will pop down from that image.

You can also use a treemenu, this opens and closes on click rather than on mouseover. I've put up 3 examples using your page so you can take a look and download any you might like to try. Let me know when you have see/got them so I can take them down.

If you want to use these you need to download the newest treemenu.js module from the Bolt-on Modules page, its about halfway down.

http://www.milonic.com/menumodules.php

[ALL LINKS REMOVED by Ruth] For samples of tree/collapsible menus see
http://www.milonic.com/treemenu

Hope this gives you some ideas.

Ruth

Poster: Migru
Dated: Sunday March 19 2006 - 10:14:46 GMT

Hi Ruth,

very welcome back, missed your posts and contributions to everything what was on the agenda here. Hope you´re safe and sound.

Michael

Poster: Ray
Dated: Sunday March 19 2006 - 12:15:43 GMT

Wow, thanks Ruth.

I am impressed with your examples and appreciate the time you have put into making them.

I have downloaded everything and yet to decide which method to use.
I like the use of transparent background because it works well with the background-changer colour-bar I use at the top of the page.

Quote:

You can also use a treemenu, this opens and closes on click rather than on mouseover.

Can this open and close on mouseover as well?

Quote:

I did not try using openstyle up to see if the treemenu would do this and allow you to lower the 'menu' image.

I will look into this and try it.

Maybe you could leave the examples but remove the content? It's great to see what this menu can do.
I wouldn't have worked it out.

Once again Ruth, thanks for your skill, knowledge and willingness to help.
.

Poster: Ruth
Dated: Sunday March 19 2006 - 16:15:58 GMT

Hi Ray,

No, it won't open on mouseover. However, you could use a regular Milonic menu to do what you want. I'll work on it and put up another example. For now I'll remove what's there, and try and set up an example of a 'scrolling' tree menu.

Hiya Michael,

Yes, I finally made it, there's a lot of work to do still but I can at least come on once in awhile and take a break helping out. Thank you so much for all the help here while I was gone, you are great!

Ruth

Poster: Migru
Dated: Sunday March 19 2006 - 16:41:34 GMT

Hi Ruth

You're welcome!

Michael

Poster: Ruth
Dated: Sunday March 19 2006 - 19:09:07 GMT

Ray,

I put up an example of a regular followscroll menu for you. But, you need to note something if you use this and someone has resolution 800x600. I have this.

At 800x600, using the sample just posted, anyone who has need of larger font size for vision problems will never be able to see the whole menu. Once you over-ride the menu's stated font and make it say 150% you can no longer see the bottom of the menu because the screen is too short and the bottom of the menu will always be below the end of the page, because it is followscroll and the page has a scroll bar, so it will just keep 'scrolling' ad infinitum. Hope that made sense

That is the reason for the collapse menu I gave. With that menu, [the two that use submenus instead of the whole menu opening out] when you click open Galleries you have only Gallery, and then the submenu with the Gallery 1, Gallery2 etc., and the Wildflowers main menu item. If you then click the Wildflowers, the Gallery submenu closes so the space used is smaller and if someone has increased the font size, then it will still be visible on the page without parts hiding below the bottom.

MouseOver Menu

Mouseover menu_data file

Poster: Ray
Dated: Tuesday March 21 2006 - 0:21:41 GMT

Good one Ruth,

bringing up the scrolling menu by mouseover is exactly what I want.

I made a vertical followscroll menu with submenus which is a copy of the horizontal menu.

http://www.gdaywa.com/themes/holden.php

Can this menu be made to appear when you mouseover the Menu image like in your latest example? This would suit 800 x 600 screens and future site growth.

I owe you a beer or two Ruth

Poster: Ruth
Dated: Tuesday March 21 2006 - 0:42:34 GMT

Hiya Ray,

You forgot something. This is all I get when I view the source of that page

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252"></HEAD>
<BODY></BODY></HTML>

as you can see, no menu!

Ruth

Poster: Ray
Dated: Tuesday March 21 2006 - 0:58:43 GMT

Hiya Ruth,

thats interesting because it works for me.

Can you see the page?

Poster: Ruth
Dated: Tuesday March 21 2006 - 5:56:41 GMT

Hiya Ray,

No I couldn't see it, as you see by the source code, there wasn't anything when I clicked the link. However, this time it's there.

I can give you what you need to do what you want, but I do want to point out some things.

1. You need to change that menu_data_v.js file, you will have conflicts since you just copied and pasted from the other file, or so it seems. You have two files with the same menuStyle, the same submenu names, the same main menu name, that's going to cause problems. Also, if you use that style, the background will not be transparent as I had it so the flower images show through.

2. there is no code called scrollable. What you want is overflow="scroll";

3. If you do not set a position for the followscrolling when you scroll down the menu does a quick drop in IE, not sure about other browsers, it's really strange. That's because you have it set at left,middle for screen position. You'd be better to set a fixed position, i.e. top=150;left=3; or something.

Try this data file,

Code:

fixMozillaZIndex=false; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

with(sideStyle=new mm_style()){
bordercolor="#808080";
borderstyle="solid";
borderwidth=0;
fontfamily="times new roman,ariel,comic sans serif";
fontsize=16;
fontweight="bold";
fontstyle="normal";
headerbgcolor="#000000";
headercolor="#000000";
offbgcolor="transparent";
offcolor="#FFFFFF";
onbgcolor="transparent";
oncolor="#999966";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=7;
pagebgcolor="";
pagecolor="";
separatorcolor="#000000";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
disablePagePath=true; 
}

sideStyle1=new copyOf(sideStyle)
sideStyle1.onbgcolor = "transparent";
sideStyle1.offbgcolor="transparent";
sideStyle1.borderwidth=0;
sideStyle1.subimage="trans1.gif";

with(new menuname("SideMenu")){
style = sideStyle1;
alwaysvisible = 1;
followscroll=150,10,10;
orientation="horizontal";
top=150;
left=3;
aI("image=menuV.gif;overimage=menuV_over.gif;showmenu=Side Menu;imagepadding=0;");

}

with(milonic=new menuname("Side Menu")){
style=sideStyle;
overflow="scroll";
aI("showmenu=Galleries1;text=Galleries;");
aI("showmenu=Wildflowers1;text=Wildflowers;");
aI("showmenu=Theme1;text=Themes;");
aI("showmenu=Fun1;text=Fun;");
aI("text=Screensavers1;url=http://www.gdaywa.com/free.php;");
aI("showmenu=Contact1;text=Contact;");
aI("text=Links1;url=http://www.gdaywa.com/links.php;");
}

with(milonic=new menuname("Galleries1")){
style=sideStyle;
aI("text=Gallery 1;url=http://www.gdaywa.com/;")
aI("text=Gallery 2;url=http://www.gdaywa.com/g2.php;")
aI("text=Gallery 3;url=http://www.gdaywa.com/g3.php;")
aI("text=Gallery 4;url=http://www.gdaywa.com/g4.php;")
aI("text=Gallery 5;url=http://www.gdaywa.com/g5.php;")
aI("text=Gallery 6;url=http://www.gdaywa.com/g6.php;")
}

with(milonic=new menuname("Wildflowers1")){
style=sideStyle;
aI("text=Kangaroo Paws;url=http://www.gdaywa.com/wildflowers/kangaroo_paws.php;");
aI("text=Triggerplants;url=http://www.gdaywa.com/wildflowers/triggerplants.php;");
aI("showmenu=Statewide1;text=Statewide;");
aI("showmenu=Perth Hills1;text=Perth Hills;");
}

with(milonic=new menuname("Statewide1")){
style=sideStyle;
aI("text=Wildlower 1;url=http://www.gdaywa.com/wf1.php;");
aI("text=Wildlower 2;url=http://www.gdaywa.com/wf2.php;");
aI("text=Wildlower 3;url=http://www.gdaywa.com/wf3.php;");
aI("text=Wildlower 4;url=http://www.gdaywa.com/wf4.php;");
aI("text=Wildlower 5;url=http://www.gdaywa.com/wf5.php;");
aI("text=Wildlower 6;url=http://www.gdaywa.com/wf6.php;");
}

with(milonic=new menuname("Perth Hills1")){
style=sideStyle;
aI("text=Winter Wildlowers;url=http://www.gdaywa.com/wildflowers/perth_hills/winter.php;");
aI("text=Spring Wildflowers;url=http://www.gdaywa.com/wildflowers/perth_hills/spring.php;");
aI("text=Summer Wildflowers;url=http://www.gdaywa.com/wildflowers/perth_hills/summer.php;");
aI("text=Autumn Wildflowers;");
}

with(milonic=new menuname("Theme1")){
style=sideStyle;
aI("text=The Bush;url=http://www.gdaywa.com/bush/bush.php;")
aI("text=Holdens;url=http://www.gdaywa.com/themes/holden.php;");
aI("text=Spiders;url=http://www.gdaywa.com/themes/spiders.php;");
aI("showmenu=Hannans1;text=Hannans;");
}

with(milonic=new menuname("Hannans1")){
style=sideStyle;
aI("text=Small Gallery;url=http://www.gdaywa.com/extras/hannan/hannans.php;");
aI("text=Large Gallery;url=http://www.gdaywa.com/extras/hannan/hannan.php;");
}

with(milonic=new menuname("Fun1")){
style=sideStyle;
aI("text=Puzzles;url=http://www.gdaywa.com/extras/pz/pp.php;");
aI("text=Tailgunner;url=http://www.gdaywa.com/extras/pz/tail/tailgunner.php;");
}

with(milonic=new menuname("Tutorials1")){
style=sideStyle;
aI("text=Frame Template;url=http://www.gdaywa.com/extras/tutorials/tute1/frame_text_1.php;");
aI("text=Save for Web;url=http://www.gdaywa.com/extras/tutorials/tute2/save_for_web.php;");
aI("text=Animation;url=http://www.gdaywa.com/extras/tutorials/tute2/save_for_web.php;");
}

with(milonic=new menuname("Downloads1")){
style=sideStyle;
aI("text=Screensavers;url=http://www.gdaywa.com/free.php;");
aI("text=Backgrounds;url=http://www.gdaywa.com/extras/bg/bg.php;");
}

with(milonic=new menuname("Contact1")){
style=sideStyle;
aI("text=Guestbook;url=http://www.gdaywa.com/extras/data/gb.php;");
aI("text=Contact me;url=http://www.gdaywa.com/extras/ct/ct.php;");
}

with(milonic=new menuname("Links1")){
style=sideStyle;
aI("text=Links;url=http://www.gdaywa.com/links.php;");
}

drawMenus();

and here are the two images

Finally, your call for the menu should be the first thing after the body tag

Code:

<BODY bgColor=#000000>
<SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
   if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");      
     else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
   </SCRIPT>
<SCRIPT src="menu_data_noscroll.js" type=text/javascript></SCRIPT>
<SCRIPT src="menu_data_v.js" type=text/javascript></SCRIPT>
<P>&nbsp;</P>

Hope this helps.

Ruth

Poster: Ray
Dated: Tuesday March 21 2006 - 12:41:29 GMT

Hope it helps? It's exactly what I wanted!

A few tweaks and adjustments and it looks nearly the same as my original menu but now it has sub menus.

Somebody give Ruth a pay rise.

Quote:

since you just copied and pasted from the other file

I certainly did. Sometimes I dont know what I am doing as my website is just a hobby and there is so much to learn.

Quote:

there is no code called scrollable

I wondered about that one. :?:

Quote:

your call for the menu should be the first thing after the body tag

I didn't think it mattered where I put it. Is it an IE thing? Anyhow I have done as you suggested and all is fine.

I have tested the menu in IE, Firefox and Netscape and it validates too.

Thanks for all your help Ruth and have the rest of the day off.

Milonic menus rock!

PS. Ruth I had to remove the transparent background because in some galleries the menu white text covered gallery white text and couldnt be read.

Poster: Ruth
Dated: Tuesday March 21 2006 - 14:33:17 GMT

Hi Ray,

No it's not an IE thing. Actually, you can put it after the body tag or in the head tag, however since it must be the first thing after the body tag for any relatively positioned menu [in a table or some put it in a div though that's not recommending] I just suggest it's that way all the time. Guess I'm getting lazy

Ruth

Industrial Strength JavaScript and DHTML Menus

Vertical scrolling slide-out menu?