/***********************************************************
* Filter Effects and Drop Down List Menu *
************************************************************
* fig.5: list_initialize.css *
************************************************************
* Designer : Immane Source : Immane *
* Create Data: 10/12/2008 NowVersion: 0.27Debug *
* Modification Time : 15/12/2008, 10:23. *
************************************************************
* Debug Usage: *
* Windows Server 2003, Ver 5.2 Build 3790 *
* Internet Explorer, Version 6.0 *
* *
************************************************************
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *
***********************************************************/
body {
background: url(../images/bg.jpg);
}
#\__drop_down_menu {
/* normal */
color: white; /* background: url( ../images/menu_bg.jpg); */
display: none; position: absolute;
text-align: center;
top: 0px; left: 0px; width: 80px;
filter: /* Dynamic filters */
filter: progid:DXImageTransform.Microsoft.GradientWipe(duration=0.5,gradientSize=0.25,motion=forward)
/* static filters */
progid:DXImageTransform.Microsoft.Alpha(opacity=90)
progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, color=black);
}
.\__menus:hover {
color: orangered; text-decoration: underline;
}
.\__menus {
font-size: 14px; color: black; text-decoration: none;
/****************************************************/
event: expression( /* this MUST BE "expression(" never a blank!!! */
// This document :
//
// MUST have $ method in root HTML files.
// MUST linked this stylesheet.
// MUST BE defined: '' before menu.
// Menus must be in "ID:__menus" and defined "class:__menus" attributes.
// eg. ''
onmouseover = /* onmouseup = */ function () {
// Define const value and static class members.
var __current_obj = this;
if ( this.prototype == null ) this.prototype = {
__common_width : 3, /* margin */
__transition : true, /* enable filter */
__ignore : false, /* ignore norefresh*/
__last_obj_text: null, /* no use */
__status : null, /* menu status */
__reposition :
{ left : 15, bottom : 78 }, /* repos to right location. */
// pop up menu.
__$$_appear_menu : function ( __object ) {
// Transition used.
with ( __object ) {
filters[1].opacity = 90;
style.visibility = "hidden"; filters[0].apply();
style.visibility = ""; filters[0].play();
}},
// close up menu.
__$$_clear_menu : function ( __object ) {
with ( __object ) {
// Clear menu status.
for ( var __i in $(__menus).children ) {
if ( __i != "length" ) {
try {
// MUST BE __menus first-class childs.
$(__menus).children[__i].prototype.__status = false;
}
catch(e) {}
}
}
if ( filters[0].Percent != 100)
filters[1].opacity = __percent = filters[0].Percent;
else __percent = 100;
filters[0].stop(); filters[0].apply();
style.visibility = "hidden";
filters[0].play( __percent * filters[0].duration / 100 );
}}
};
// Body event data initializing...
if ( document.body.onclick == null ) {
var __initialize = {
__initialize : new function() {
document.body.onclick = function () {
// Clear dropdown menu.
if ( event.srcElement.className != "__menus" &&
event.srcElement.id != "__drop_down_menu" ) {
// do it.
with ( prototype )
{
// Transition used.
if ( __transition == true ) __$$_clear_menu ( $("__drop_down_menu") );
else $("__drop_down_menu").style.display = "none";
}
}
}}};__initialize = null;
}
// Draw menu items.
try {
// Clear menu items for new instance.
$("__drop_down_menu").innerHTML = "";
// Add|edit menu text style here.
// _$ns_ : array -> new "?"-element : Display name <_$ns_.length MUST equal to _$us_.length>
// _$us_ : array -> new "?"-element : Redirect URLs
// _$bg_ : string -> __drop_down_menu : Background,
// _$tag_: array -> redefine "?"-element,
// _$style_sheet$_ : string -> new "A"-element : Replace 'A' style-sheet(non _$tag_),
// array -> new "?"-element : Replace All style-sheet, <_$tag_ MUST>
// eg1.
// option="{_$bg_: 'images/menu_bg2.jpg',
// _$style_sheet$_ : ['div-style','font-style'],
// _$tag_: ['div','p'],
// _$ns_: ['first','second','third','fourth'],
// _$us_: ['http://www.baidu.com',
// 'http://www.google.com','','']}"
// eg2.
// option="{_$bg_: 'images/menu_bg.jpg',
// _$style_sheet$_ : font-style,
// _$ns_: ['first','second','third','fourth'],
// _$us_: ['http://www.baidu.com',
// 'http://www.google.com','','']}"
with( eval( "__menu_arg =" + this.option ) )
for ( _i in _$ns_ ) {
// Try changing Background.
try {
// Set background for variable _$bg_ in __menus styleclass.
$("__drop_down_menu").style.background = "url("+_$bg_+")";
}
catch (e) {
// Set default background 'images/menu_bg.jpg'.
// $("__drop_down_menu").style.background = "url(images/menu_bg.jpg)";
}
// Custom tag defined. if _$tag_ is empty then define tagName to "A"
try { var __tmp_element = document.createElement(_$tag_[_$tag_.length-1]); }
catch(e) { var __tmp_element = document.createElement("a"); }
with ( __tmp_element ) {
innerHTML = _$ns_[_i],
href = _$us_[_i],
target = "_self";
__tmp_element.prototype = { href : _$us_[_i] };
// Try changing style-sheet.
try {
// Change style-sheet.
className = _$style_sheet$_;
}
catch ( e ) {
// default popup font style-sheet.
with( style )
color = "white",
fontSize = "12px",
verticalAlign = "middle",
textDecoration = "none";
}
//onmousemove = function () { this.style.color= "red"; },
onmouseout = function () { this.style.color= "white"; }
};
with ( $("__drop_down_menu") )
{
try {
// Custom tag defined.
var __object_element = $("__drop_down_menu");
for ( var _i in _$tag_ )
if ( _i != _$tag_.length-1 ) {
__object_element = __object_element.appendChild( document.createElement( _$tag_[_i] ) );
__object_element.className = _$style_sheet$_[_i];
}
__object_element.appendChild( __tmp_element ).className = _$style_sheet$_[_$tag_.length-1];
}
catch(e) {
// Default tagName is 'A'.
appendChild( __tmp_element ),
appendChild( document.createElement("br") );
}
}
}
}
catch (e) {
// When the menu is null or some errors occour.
// return document.body.onclick();
with ( prototype )
{
return __transition == true ? __$$_clear_menu ( $("__drop_down_menu") ) :
$("__drop_down_menu").style.display = "none";
}
}
// Display it.
with ( $("__drop_down_menu").style ) {
var __rect = this.getBoundingClientRect();
display = "block";
left = __rect.left - this.prototype.__common_width + this.prototype.__reposition.left;
top = __rect.bottom + this.prototype.__reposition.bottom;
with ( this.prototype ) {
if ( __status != true || __ignore ) {
__transition == true ? ( __$$_clear_menu($("__drop_down_menu")),
__$$_appear_menu($("__drop_down_menu")) ) : 0;
__status = true;
}
}
}
});
}