Reprint (div + CSS + JS menu with Direct flash effect)
Last Update:2018-12-06
Source: Internet
Author: User
<HTML>
<Head>
<Meta http-equiv = "Content-Type"
Content = "text/html; charset = gb2312"/>
<Title> CSS
Menu </title>
<Style>
Body {
Background-color: # b8b8a0;
}
# Fbtn {
Display: none;
Overflow: hidden;
Border-style: solid;
Border-width: 1px;
Border-color: # e1e1c9
# E1e1c9 #6e6e56 #6e6e56;
Padding: 1 1 1
1;
Width: 115px;
Height: 30px;
}
# Fbtn_txt {
Position: relative;
}
# Fbtn_txt
Div {
Height: 30px;
Padding-top: 11px;
Font-size: 12px;
Font-family: Small
Fonts;
Color: #800080;
Text-align: center;
Cursor: hand;
}
# Fbtn_mask {
Background-color: # ffffff;
Position: relative;
Width: 100%;
Height: 100%;
}
</Style>
</Head>
<Body>
<Div
Id = fbtn>
<Div id = fbtn_mask> </div>
<Div
Id = fbtn_txt>
<Div> G1 </div>
<Div> good
Morning </div>
</Div>
</Div>
<Div
Id = fbtn>
<Div id = fbtn_mask> </div>
<Div
Id = fbtn_txt>
<Div> G2 </div>
<Div> good
Evening </div>
</Div>
</Div>
<Div
Id = fbtn>
<Div id = fbtn_mask> </div>
<Div
Id = fbtn_txt>
<Div> m1 </div>
<Div> my name is
Fireyy </div>
</Div>
</Div>
<Div
Id = fbtn>
<Div id = fbtn_mask> </div>
<Div
Id = fbtn_txt>
<Div> m2 </div>
<Div> mm I love
U </div>
</Div>
</Div>
<Div id = fbtn>
<Div
Id = fbtn_mask> </div>
<Div
Id = fbtn_txt>
<Div> G1 </div>
<Div> good
Morning </div>
</Div>
</Div>
<Div
Id = fbtn>
<Div id = fbtn_mask> </div>
<Div
Id = fbtn_txt>
<Div> G2 </div>
<Div> good
Evening </div>
</Div>
</Div>
<Div
Id = fbtn>
<Div id = fbtn_mask> </div>
<Div
Id = fbtn_txt>
<Div> m1 </div>
<Div> my name is
Fireyy </div>
</Div>
</Div>
<Div
Id = fbtn>
<Div id = fbtn_mask> </div>
<Div
Id = fbtn_txt>
<Div> m2 </div>
<Div> mm I love
U </div>
</Div>
</Div>
<SCRIPT>
VaR
Current = NULL;
VaR T = NULL;
For (VAR
I = 0; I <fbtn. length; I ++ ){
Fbtn_txt [I]. style. postop =-30;
Fbtn_mask [I]. style. postop =-30;
Fbtn [I]. Index = I;
Fbtn [I]. style. Display = "Block ";
Fbtn [I]. onmouseover = function (){
If (! Current ){
Current = this;
Domove (this. Index );
}
Else
If (current! = This ){
Domove (current. Index );
Domove (this. Index );
Current = this;
}
}
Fbtn [I]. onmouseout = function (){
If (event. toelement = This. parentelement & t = This ){
Domove (this. Index );
Current = NULL;
}
}
}
Function
Domove (Num ){
VaR o = fbtn_txt [num];
VaR
M = fbtn_mask [num];
If (O. style. postop <-60 ){
O. style. Display = "NONE ";
VaR
T = O. Children [1]. innerhtml;
O. Children [1]. innerhtml = O. Children [0]. innerhtml;
O. Children [0]. innerhtml = T;
O. style. postop =-30;
O. style. Display = "Block ";
If (M. style. postop> 30)
M. style. postop =-30;
Else
M. style. postop = 0;
}
Else {
M. style. postop + = 3;
O. style. postop-= 3;
SetTimeout ('move ('+ num +') ', 15 );
}
}
</SCRIPT>
</Body>
</Html>