25 different styles of menus

Menu

Take a look at the menu style below. Because the style is more, so 8 buttons share a menu div ID

MEUN1 MEUN2 MEUN3 MEUN4 MEUN5 MEUN6 MEUN7 MEUN8 Enigma DESK for icon
Enigma DESK for Skin
Enigma DESK for Image
Enigma DESK Basic BBS

MEUN9 MEUN10 MEUN12 MEUN13 MEUN14 MEUN15 MEUN16 MEUN17 Enigma DESK for icon
Enigma DESK for Skin
Enigma DESK for Image
Enigma DESK Basic BBS

MEUN18 MEUN19 MEUN20 MEUN21 MEUN22 MEUN23 MEUN24 MEUN25 Enigma DESK for icon
Enigma DESK for Skin
Enigma DESK for Image
Enigma DESK Basic BBS


STEP1:

First of all, we understand that onmouse show and hide layer, this is a typical DW belt function, I believe we can do it. After doing well, control the menu text or some attributes in the picture:

The key is when our mouse moves to the Control menu of the text show and hide layer,
When you move to the menu, the layer disappears. In fact, move your brain, and add to the attributes of the DIV

You can move from the text or picture of the Control menu to the menu selection.
STEP2:

Now look, onmouse over after the change in the menu CSS, in fact, this is also very simple, but not directly with DW can do (at least I do not know: P):
Define two different CSS first

Then add the Onmouse action to the TD in the table:

Remember, you have to give TD a CLASS:CLASS=TD beforehand.
Well, that's it:

All of these are the basics of HTML and CSS.
Effect:

STEP3:

Here is the important part of the head area to see the use of JS:

function Fadein (mytransition) {
Mytransition.innerhtml= '
if (cur!= ' x ') {
Mytransition.filters.revealtrans.transition=cur
Mytransition.filters.revealTrans.apply ()
Mytransition.innerhtml= ' <table height=100 border=1 bordercolor= #336699 bgcolor= #FFFFCC cellpadding=0 cellSpacing=3 width=100%> <TR> <td width=100% align=middle class=td ><a "http://egadesk.com">enigma DESK for icon </a> </TD> </TR> <TR> <td width=100% align=middle class=td ><a href="http://egadesk.com">enigma DESK for Skin </a> </TD> </TR> <TR> <td width=100% align=middle class=td ><a href="http://egadesk.com">enigma DESK for Image </a> </TD> </TR> <TR> <td width=100% align=middle class=td ><a href="http://egadesk.com">enigma DESK Basic BBS </a> </TD> </TR> </TABLE> '
Mytransition.filters.revealTrans.play ()
}
else{
Mytransition.filters.blendTrans.apply ()
Mytransition.innerhtml= ' <table height=100 border=1 bordercolor= #336699 bgcolor= #FFFFCC cellpadding=0 cellSpacing=3 width=100%> <TR> <td width=100% align=middle class=td ><a "http://egadesk.com">enigma DESK for icon </a> </TD> </TR> <TR> <td width=100% align=middle class=td ><a href="http://egadesk.com">enigma DESK for Skin </a> </TD> </TR> <TR> <td width=100% align=middle class=td ><a href="http://egadesk.com">enigma DESK for Image </a> </TD> </TR> <TR> <td width=100% align=middle class=td ><a href="http://egadesk.com">enigma DESK Basic BBS </a> </TD> </TR> </TABLE> '
Mytransition.filters.blendTrans.play ()
}
}
</script>

The body area of JS:

Did you notice the blue part? That is to show the effect of the div in the content, but this is not div, about this section JS explanation, very simple, I do not say: P. Let's take a look at the div:

See, the blue part is the effect of the first step, you can let the mouse move from the Control menu to the menu, rather than leave the control body and hide the menu.

The red part is important and it sets the default mode of change.

So we're looking at the text or the picture that controls the menu:

meun1

About show hide layer part of the front also spoke. Look at the red flag, this is the onmouseover time through the body of the JS part of the implementation of the Fadein (mytransition)

Then there is this green code, this is the real control of the menu effect of the place, N 7 refers to the seventh style, you can see from below the various styles of display, in order from top to bottom in sequence x, 0-23 altogether 25 kinds of effect. ok! so far, that's all, so let's put this code together, not out of this menu with 25 special effects: Look at the bottom of the overall code.

STEP4:

Choose Transition
Blend in
Box in
Box out
Circle in
Circle out
Wipe up
Wipe down
Wipe Right
Wipe Left
Vertical Blinds
Horizontal Blinds
Checkerboard Across
Checkerboard Down
Random Dissolve
Split Vertical in
Split Vertical Out
Split Horizontal in
Split Horizontal Out
Strips left Down
Strips left up
Strips right Down
Strips right up
Random Bars Horizontal
Random Bars Vertical
Random

! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en"
<HTML>
<HEAD>
<TITLE> caience Design </TITLE>
<meta http-equiv= "Content-type" content= "text/html;" Charset= "gb2312" >
<meta name= "generator" content= "EditPlus"
<meta name= "Author" content= "Caience.love"
<meta name= "Keywords" content= "" "
<meta name= "Description" content= "" "
<style type= "Text/css"
. td{border:1px Solid #FFFFCC}
. td2{border:1px solid #000000; Background-color: #FFFFFF}
</style>
<script language= "JavaScript" >
!--
function Fadein (mytransition) {
Mytransition.innerhtml= '
if (cur!= ' x ') {
Mytransition.filters.revealtrans.transition=cur
Mytransition.filters.revealTrans.apply ()
Mytransition.innerhtml= ' <table height=100 border=1 bordercolor= #336699 bgcolor= #FFFFCC cellpadding=0 cellSpacing=3 width=100%> <TR> <td width=100% align=middle class=td ><a "http://egadesk.com">enigma DESK for icon </a> </TD> </TR> <TR> <td width=100% align=middle class=td ><a href="http://egadesk.com">enigma DESK for Skin </a> </TD> </TR> <TR> <td width=100% align=middle class=td ><a href="http://egadesk.com">enigma DESK for Image </a> </TD> </TR> <TR> <td width=100% align=middle class=td ><a href="http://egadesk.com">enigma DESK Basic BBS </a> </TD> </TR> </TABLE> '
Mytransition.filters.revealTrans.play ()
}
else{
Mytransition.filters.blendTrans.apply ()
Mytransition.innerhtml= ' <table height=100 border=1 bordercolor= #336699 bgcolor= #FFFFCC cellpadding=0 cellSpacing=3 width=100%> <TR> <td width=100% align=middle class=td ><a "http://egadesk.com">enigma DESK for icon </a> </TD> </TR> <TR> <td width=100% align=middle class=td ><a href="http://egadesk.com">enigma DESK for Skin </a> </TD> </TR> <TR> <td width=100% align=middle class=td ><a href="http://egadesk.com">enigma DESK for Image </a> </TD> </TR> <TR> <td width=100% align=middle class=td ><a href="http://egadesk.com">enigma DESK Basic BBS </a> </TD> </TR> </TABLE> '
Mytransition.filters.blendTrans.play ()
}
}

function Mm_findobj (n, D) {//v4.0
var p,i,x; if (!d) d=document; if ((P=n.indexof ("?")) >0&&parent.frames.length) {
D=parent.frames[n.substring (p+1)].document; N=n.substring (0,p);}
if (!) ( X=d[n]) &&d.all) x=d.all[n]; for (i=0;! x&&i<d.forms.length;i++) X=d.forms[i][n];
for (i=0;! x&&d.layers&&i<d.layers.length;i++) X=mm_findobj (n,d.layers[i].document);
if (!x && document.getElementById) X=document.getelementbyid (n); return x;
}

function MM_showHideLayers () {//v3.0
var i,p,v,obj,args=mm_showhidelayers.arguments;
For (i=0 i< (args.length-2); i+=3) if ((Obj=mm_findobj (args[i))!=null) {v=args[i+2];
if (obj.style) {Obj=obj.style v= (v== ' show ')? ' Visible ':(v= ' hide ')? ' Hidden ': v; }
Obj.visibility=v; }
}

-->
</script>
</HEAD>

<BODY>
<script language=javascript1.2>
!--

function doit (mytransition) {
if (event.srcelement.tagname== "SMALL") {
Cur=event.srcelement.n
Fadein (mytransition)
}
}

-->
</script>
<div id=mytransition style= "Position:absolute; left:43px; top:169px; width:400px; height:100px; Z-index:1; Visibility:hidden; Filter:revealtrans (duration=3,transition=0) Blendtrans (duration=3); "> </div>
<table border=1 bordercolor= #000000 cellpadding=0 cellspacing=10 width= "100%"
<TR>
<TD valign=top height=150 width= "100%" class=td3>
<span style= "Cursor:hand;"
<small n= "x" >meun1 </small> </span>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

How is it? This is the code that makes so many menus!