📄 absolute-positioned.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>QuickMenu Template</title><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<!-- *** QuickMenu copyright (c) 2007, OpenCube Inc. All Rights Reserved.
-This document, the JavaScript source code, and core CSS may not be modified,
re-distributed, or displayed for public consumption.
-This product must be purchased before its official inclusion in any public or
private web site or application.
-This product may not be used in, or redistributed as part of an application whose
purpose is to enhance or create menu systems.
-->
<!--%%%%%%%%%%%% Quick Menu Script %%%%%%%%%%%*-->
<script type="text/JavaScript" src="qm.js"></script>
<!--%%%%%%%%%%%% QuickMenu Styles [Keep in head for full validation!] %%%%%%%%%%%-->
<style type="text/css">
/*!!!!!!!!!!! QuickMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;}.qmmc {position:relative;}.qmmc a {float:left;display:block;white-space:nowrap;}.qmmc div a {float:none;}.qmmc div {visibility:hidden;position:absolute;}
/*!!!!!!!!!!! QuickMenu Styles [Please Modify!] !!!!!!!!!!!*/
/* Remove the comments bleow for vertical mains and change the false value to
true in the qm_create function after the menus structure. */
/*.qmmc a {float:none}*/
/*"""""""" (MAIN) Container """"""""*/
#qm0
{
background-color:transparent;
}
/*"""""""" (MAIN) Items """"""""*/
#qm0 a
{
color:#000000;
background-color:#ffffff;
font-family:Arial;
font-size:.8em;
text-decoration:none;
padding:5px 40px 5px 8px;
border-style:solid;
border-color:#dddddd;
border-width:1px;
text-align:left;
}
/*"""""""" (MAIN) Hover State """"""""*/
#qm0 a:hover
{
background-color:#efefef;
}
/*"""""""" (MAIN) Active State """"""""*/
body #qm0 .qmactive, body #qm0 .qmactive:hover
{
background-color:#efefef;
text-decoration:underline;
}
/*"""""""" (MAIN) Parent Items """"""""*/
#qm0 .qmparent
{
background-image:url(images/arrow_down.gif);
background-repeat:no-repeat;
background-position:95%;
}
/*"""""""" [SUB] Containers """"""""*/
#qm0 div
{
background-color:#efefef;
padding:5px;
border-style:solid;
border-width:1px;
border-color:#cccccc;
margin-top:-1px;
}
/*"""""""" [SUB] Hover State """"""""*/
#qm0 div a:hover
{
text-decoration:underline;
}
/*""""""""[SUB] Active State """"""""*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
background-color:#ffffff;
}
/*"""""""" [SUB] Parent Items """"""""*/
#qm0 div .qmparent
{
background-image:url(images/arrow_right.gif);
}
/*"""""""" [SUB] Items """"""""*/
#qm0 div a
{
background-color:#eeeeee;
padding:2px 40px 2px 5px;
border-width:0px;
border-style:none;
border-color:#000000;
}
</style>
</head>
<body style="margin:40px">
<!-- To position your menu absolute add the entire structure to a position absolute div. -->
<div style="position:absolute;top:50px;left:50px;width:550px;padding:20px;border-color:#ff0000;border-width:1px;border-style:dashed;">
<br>
<font style="font-family:arial;font-size:.7em;color:#000000;">This div is positioned absolute - left:50px, top:50px</font>
<br>
<br>
<!--%%%%%%%%%%%% QuickMenu Stucture %%%%%%%%%%%*-->
<div id="qm0" class="qmmc">
<a href="#">Who We Are</a>
<div>
<a href="#">Management</a>
<a href="#">Global Sites</a>
<div style="width:9em">
<a href="#">Asia</a>
<a href="#">South America</a>
<a href="#">Austraila</a>
<a href="#">North America</a>
<a href="#">Europe</a>
<a href="#">Africa</a>
</div>
<a href="#">Investors</a>
<div style="width:9em">
<a href="#">Asia</a>
<a href="#">South America</a>
<a href="#">Austraila</a>
<a href="#">North America</a>
<a href="#">Europe</a>
<a href="#">Africa</a>
</div>
<a href="#">Worldwide</a>
<a href="#">Product Overview</a>
<a href="#">Publicity</a>
</div>
<a href="#">Our Commitment</a>
<div>
<a href="#">Satisfaction</a>
<a href="#">Our Goals</a>
<a href="#">Product Warranty</a>
<a href="#">Future Outlook</a>
<a href="#">Product Quality</a>
<a href="#">Continued Support</a>
</div>
<a href="#">Our Investors</a>
<div>
<a href="#">Annual Meetings</a>
<a href="#">Financial Reports</a>
<a href="#">Nasdaq Quoting</a>
<a href="#">Dividend Information</a>
<a href="#">Future Outlook</a>
<a href="#">CEO Announcements</a>
</div>
<a href="#">Technology</a>
<div>
<a href="#">Satisfaction</a>
<a href="#">Our Goals</a>
<a href="#">Product Warranty</a>
<a href="#">Future Outlook</a>
<a href="#">Product Quality</a>
<a href="#">Continued Support</a>
</div>
<span class="qmclear"> </span></div>
</td></tr></table>
<!--%%%%%%%%%%%% QuickMenu Create Menu (menu id, is vertical, show timer (ms), hide timer (ms), on click) %%%%%%%%%%%*-->
<script type="text/JavaScript">qm_create(0,false,0,500,false)</script>
</div>
<!-- Document Content -->
<div style="text-align:left;padding-top:200px;font-family:Arial;font-size:.8em;color:#000000;bacgkground-color:#ff0000;">
<u>Absolute Positioned Menu</u>
<br>
<br>
This menu is placed inside of an absolute positioned div (red dashed border). Place the menu inside a div without any border or padding styles to position just the menu.
</div>
<!-- End Content -->
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -