List based menu

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

List based menu

Poster: risingsun
Dated: Thursday March 17 2005 - 2:03:31 GMT

I'm looking for examples of people having success with CSS list based menus (3 sub levels) with the Milonic javascript. I've tried going through the information on http://milonic.com/cssbasedmenus.php, but I can't seem to understand the on off classes.

Please help if you can. Thank you,
RS

Poster: Ruth
Dated: Thursday March 17 2005 - 6:57:57 GMT

Hi RS,
Here's one for you to test and see what's happening, then you can change and add whatever you want for yours. HERE is a list of 'style properties for the menu. I don't think all are controllable by css, you'll have to experiment. for now.

When you're making a css based menu, think of it like this: the menu can have two 'looks' it can look one way when the mouse is not on it, and different when the mouse is on it. I've created 2 styles for mouseOff, one for the main and one for the subs, and 2 styles for the mouseOn, one for main and one for subs. They are mouseOff, mouseOn for the main menu, and mousOffSub, mouseOnSub for the submenus.

Place this style code in the head of the webpage [you can do a style sheet, but when I'm experimenting I tend to put it in the head.

Code:

<style type="text/css">
   .mouseOff {
   background-color:#CCCCFF; 
   color:#FF6633;
   border: 2px solid #9999FF;
   padding-top:2px;
   padding-right:4px;
   padding-bottom:2px;
   padding-left:4px;
   font-family:Helvetica, Times New Roman, Arial;
   font-size:12px;
   font-style:normal;
   font-weight:bold;
   align: center;
   margin: 4px;
   }
   
   .mouseOn {
   background-color:#33CCCC;
   color:#FFCC00;
   border: 2px solid #6699CC;
   padding-top:2px;
   padding-right:4px;
   padding-bottom:2px;
   padding-left:4px;
   font-family:Helvetica, Times New Roman, Arial;
   font-size:12px;
   font-style:normal;
   font-weight:bold;
   align: center;
   margin: 4px;
   }
   .mouseOffSub {
   background-color:#E3E1CA; 
   color:#FF6633;
   border: 2px dotted #FFCC00;
   padding-top:2px;
   padding-right:4px;
   padding-bottom:2px;
   padding-left:4px;
   font-family:Helvetica, Times New Roman, Arial;
   font-size:11px;
   font-style:normal;
   font-weight:bold;
   align: center;
   margin: 4px;
   }
   .mouseOnSub {
   background-color:#AF9167; 
   color:#FFFFCC;
   border: 2px dashed #9999FF;
   padding-top:2px;
   padding-right:4px;
   padding-bottom:2px;
   padding-left:4px;
   font-family:Helvetica, Times New Roman, Arial;
   font-size:11px;
   font-style:normal;
   font-weight:bold;
   align: center;
   margin: 4px;
   }
   </style>

The menu_data.js file would have this as the menuStyle and the subStyle:

Code:

with(menuStyle=new mm_style()){
offclass="mouseOff";
onclass="mouseOn";
}

with(subStyle=new mm_style()){
offclass="mouseOffSub";
onclass="mouseOnSub";

}

As you can see, I've only put the off and the on class in the menu_data.js style descriptions, but you can put other things with that, like headerbgcolor, pagebgcolor, overfilter etc. You can experiment with the various style properties to see which can be set up in a css class.

Hope that helps.

Ruth

Poster: Andy
Dated: Thursday March 17 2005 - 9:52:22 GMT

Hi,

Any of the menu downloads now contain a sample listbased menu.

The links are taken from HTML Lists and are then processed through the menu.

There are now also PHP and XML based samples.

Hope this helps
Andy

Poster: risingsun
Dated: Thursday March 17 2005 - 17:11:21 GMT

Thanks Ruth and Andy,

I'll try to test your suggestions and give it a go by next week.

Thanks again,
RS

Poster: kevin3442
Dated: Friday March 18 2005 - 2:57:36 GMT

Andy wrote:

...Any of the menu downloads now contain a sample listbased menu....

Somebody's been busy. List-based menus... a very nice touch Andy.

Kevin

Poster: Andy
Dated: Friday March 18 2005 - 10:30:33 GMT

Yup, loads more stuff coming soon, watch this space - competition is really hotting up in the DHTML arena at the moment.

This is due to browsers like Netscape 4 no longer being supported, Seems that any old fool can write menus these days. They can't write good ones though

Cheers,
Andy

Industrial Strength JavaScript and DHTML Menus

List based menu