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
List based menu
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.
The menu_data.js file would have this as the menuStyle and the subStyle:
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
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: Select all
<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: Select all
with(menuStyle=new mm_style()){
offclass="mouseOff";
onclass="mouseOn";
}
with(subStyle=new mm_style()){
offclass="mouseOffSub";
onclass="mouseOnSub";
}
Hope that helps.
Ruth
