📄 style.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Menu G5 Step-by-step: Define the style</title>
<style type="text/css">
.holder { filter:
progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#333333,strength=3)
progid:DXImageTransform.Microsoft.RandomDissolve(duration=0.5);
}
.bar { padding:2px; border-width:1px; border-style:solid; border-color:#000000; background-color:#336699; }
.itemTopNormal {
filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
width:130px; padding:2px; border-width:1px; border-style:solid; text-align:center;
border-color:#6699cc #003366 #003366 #6699cc; background-color:#336699; }
.itemTopOn {
filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
cursor:default; width:130px; padding:2px; border-width:1px; border-style:solid; text-align:center;
border-color:#99ccff #003366 #003366 #99ccff; background-color:#6699cc; }
.itemTopDown {
filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
cursor:default; width:130px; padding:2px; border-width:1px; border-style:solid; text-align:center;
border-color:#000033 #6699cc #6699cc #000033; background-color:#003366; }
.itemSubNormal {
filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
width:120px; padding:2px 2px 2px 12px; border-width:1px; border-style:solid; text-align:left;
border-color:#6699cc #003366 #003366 #6699cc; background-color:#336699; }
.itemSubOn {
filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
cursor:default; width:120px; padding:2px 2px 2px 12px; border-width:1px; border-style:solid; text-align:left;
border-color:#99ccff #003366 #003366 #99ccff; background-color:#6699cc; }
.itemSubDown {
filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
cursor:default; width:120px; padding:2px 2px 2px 12px; border-width:1px; border-style:solid; text-align:left;
border-color:#000033 #6699cc #6699cc #000033; background-color:#003366; }
.fontNormal { font-family:verdana; font-size:14px; color:#000000; }
.fontOn { font-family:verdana; font-size:14px; color:#ffffff; }
.fontDown { font-family:verdana; font-size:14px; color:#ffffff; font-style:italic; }
.tagNormal { float:right; width:10px; height:10px; background:url("images/tagRN2.gif") no-repeat center; }
.tagOn { float:right; width:10px; height:10px; background:url("images/tagRH2.gif") no-repeat center; }
.tagDown { float:right; width:10px; height:10px; background:url("images/tagRD2.gif") no-repeat center; }
.oneitemNormal { width:200px; padding:2px; border-width:2px; border-style:solid; text-align:center; border-color:#6699cc #003366 #003366 #6699cc; background-color:#336699; }
.oneitemOn { cursor:default; width:200px; padding:2px; border-width:2px; border-style:solid; text-align:center; border-color:#99ccff #336699 #336699 #99ccff; background-color:#6699cc; }
.oneitemDown { cursor:default; width:200px; padding:2px; border-width:2px; border-style:solid; text-align:center; border-color:#000033 #336699 #336699 #000033; background-color:#003366; }
.onefontNormal { font-family:verdana; font-size:14px; color:#000000; }
.onefontOn { font-family:verdana; font-size:14px; color:#ffffff; }
.onefontDown { font-family:verdana; font-size:14px; color:#ffffff; font-style:italic; }
.seppad {padding:0px; border:2px solid #003366; background-color:#336699; }
.seppaditem { width:120px; text-align:center; }
.separatorT { background-color:#003366; }
.separatorB { background-color:#6699cc; }
.separator { background-color:#cc0000; width:3px; }
.separatorH { background:url("images/hbar.gif"); overflow:hidden; height:6px; }
.separatorV { background:url("images/vbar.gif"); overflow:hidden; width:6px; }
</style>
<link rel=stylesheet href="../css/menuG5.css" type="text/css">
<script language="javascript" src="menu/style-path.js"></script>
<script language="javascript" src="../script/menuG5LoaderX.js"></script>
</head>
<body onload="showMenu('oneItem'); showMenu('oneSeparator'); showMenu('oneSeparator2'); showMenu('oneSeparator3'); showMenu('oneSeparator4');">
<p align="center" class="title">Menu G5 Step-by-step: Define the style</p>
<p align="center" class="copyright"><a href="http://www.yxscripts.com">yxScripts.com</a></p>
<p class="para">Just like menu content is only about menu content, the menu style in Menu G5 is also only about menu style, and we are using CSS for menu styling.</p>
<p class="para">In Menu G5, we can have different types of menu items in a menu content:</p>
<ul>
<li>sub-menu item</li>
<li>link item</li>
<li>command item (to execute some JS codes when clicked)</li>
<li>info item (non-clickable, just to display some content)</li>
<li>separator item</li>
</ul>
<p class="para">And for a menu instance shown on a page, it's all dhtml layers. The menu content has top-menu and may be some sub-menus, for the counterparts in the menu instance, each level of its top-menu and sub-menus consists of the following dhtml elements:</p>
<ul>
<li>a holder layer, which is not visible but holds</li>
<ul>
<li>a pad layer (the box around the menu items)</li>
<li>menu item layers, which each could hold</li>
<ul>
<li>an image icon layer (optional)</li>
<li>a sub-menu tag layer (optional)</li>
<li>an item text layer<br>or<br></li>
<li>a content layer (for info item)<br>or<br></li>
<li>image layer(s) (for separator item)</li>
</ul>
</ul>
</ul>
<p class="para">It would be like:</p>
<pre>
<!-- holder DIV -->
<DIV class="holder">
<!-- pad DIV -->
<DIV class="pad"></DIV>
<!-- sub-menu item DIV -->
<DIV class="item">
<SPAN class="icon1">optional text for icon</SPAN>
<SPAN class="icon2">optional text for icon</SPAN>
<SPAN class="tag"></SPAN>
<SPAN class="font">item display text</SPAN>
</DIV>
<-- link/command item DIV -->
<DIV class="item">
<SPAN class="icon1">optional text for icon</SPAN>
<SPAN class="icon2">optional text for icon</SPAN>
<SPAN class="font">item display text</SPAN>
</DIV>
<-- info item DIV -->
<DIV class="item">
<SPAN class="font">info content</SPAN>
</DIV>
<-- separator DIV -->
<DIV>
<DIV class="separator1"></DIV>
<DIV class="separator2"></DIV>
</DIV>
</DIV>
</pre>
<br><p class="para">So we can define CSS classes for:</p>
<ul>
<li>the holder (IE only, for filter effects)</li>
<li>the pad</li>
<li>the item</li>
<li>the item text</li>
<li>the sub-menu tag</li>
<li>the image icons</li>
<li>the separator</li>
</ul>
<p class="para">The CSS class for the holder is just to apply some IE filter effects, such as:</p>
<pre>
.holder { filter: progid:DXImageTransform.Microsoft.RandomDissolve(duration=0.5); }
</pre>
<p class="para">It should contain IE filters and the transparent property from Gecko browsers (-moz-opacity) only, of which the transition effects will be played when the top-menu or a sub-menu shows up. Besides the holder, you can also use IE filters in CSS classes for the menu item, the image icon, the sub-menu tag and the item text, the transition effects will be played when an item gets mouseovered.</p>
<p class="note"><font color="red">Note:</font> When IE filters are used in CSS classes for the item text, a "display:inline-block" property should be specified to set layout for the inline element (SPAN). The "background-color" property might also need to be defined accordingly.</p>
<br><p class="para">In Menu G5, a menu item in the menu instance could have up to 4 stages: normal, highlighted, mousedowned and sub-menu opened. Info items and separator items would only have the normal stage, link items and command items could have the first 3 stages, and sub-menu items could have all of 4.</p>
<p class="para">We would thus have the options to define different CSS classes for menu items at different stages, for example we could have:</p>
<pre>
.itemNormal {
width:200px; padding:2px; border-width:2px; border-style:solid; text-align:center;
border-color:#6699cc #003366 #003366 #6699cc; background-color:#336699;
}
.itemOn {
width:200px; padding:2px; border-width:2px; border-style:solid; text-align:center;
border-color:#99ccff #336699 #336699 #99ccff; background-color:#6699cc;
}
.itemDown {
width:200px; padding:2px; border-width:2px; border-style:solid; text-align:center;
border-color:#000033 #336699 #336699 #000033; background-color:#003366;
}
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -