Vertical scrolling slide-out menu?

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Ray
Beginner
Beginner
Posts: 9
Joined: Wed Oct 19, 2005 10:38 am
Contact:

Vertical scrolling slide-out menu?

Post by Ray »

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
Migru
Milonic Guru
Milonic Guru
Posts: 669
Joined: Tue Nov 01, 2005 8:22 pm
Location: Hamburg - Germany
Contact:

Post by Migru »

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://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
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

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.
John
Migru
Milonic Guru
Milonic Guru
Posts: 669
Joined: Tue Nov 01, 2005 8:22 pm
Location: Hamburg - Germany
Contact:

Post by Migru »

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
Ray
Beginner
Beginner
Posts: 9
Joined: Wed Oct 19, 2005 10:38 am
Contact:

Post by Ray »

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
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

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'.
John
Migru
Milonic Guru
Milonic Guru
Posts: 669
Joined: Tue Nov 01, 2005 8:22 pm
Location: Hamburg - Germany
Contact:

Post by Migru »

Hi
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
Ray
Beginner
Beginner
Posts: 9
Joined: Wed Oct 19, 2005 10:38 am
Contact:

Post by Ray »

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
Migru
Milonic Guru
Milonic Guru
Posts: 669
Joined: Tue Nov 01, 2005 8:22 pm
Location: Hamburg - Germany
Contact:

Post by Migru »

Hi
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://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
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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://milonic.com/menumodules.php

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

Hope this gives you some ideas.

Ruth
Last edited by Ruth on Sun Mar 19, 2006 5:26 pm, edited 1 time in total.
Migru
Milonic Guru
Milonic Guru
Posts: 669
Joined: Tue Nov 01, 2005 8:22 pm
Location: Hamburg - Germany
Contact:

Post by Migru »

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
Ray
Beginner
Beginner
Posts: 9
Joined: Wed Oct 19, 2005 10:38 am
Contact:

Post by Ray »

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.
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?
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.
.
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
Migru
Milonic Guru
Milonic Guru
Posts: 669
Joined: Tue Nov 01, 2005 8:22 pm
Location: Hamburg - Germany
Contact:

Post by Migru »

Hi Ruth

You're welcome!

Michael
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
Ray
Beginner
Beginner
Posts: 9
Joined: Wed Oct 19, 2005 10:38 am
Contact:

Post by Ray »

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 :)
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Hiya Ray,

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

Code: Select all

<!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
Ray
Beginner
Beginner
Posts: 9
Joined: Wed Oct 19, 2005 10:38 am
Contact:

Post by Ray »

Hiya Ruth,

thats interesting because it works for me.

Can you see the page?
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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: Select all

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
Image Image

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

Code: Select all

<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
Ray
Beginner
Beginner
Posts: 9
Joined: Wed Oct 19, 2005 10:38 am
Contact:

Post by Ray »

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.
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.
there is no code called scrollable
I wondered about that one. :?:
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.
Post Reply