📄 index.html
字号:
<html>
<head>
<title>JavaScript Menu - Demo #4</title>
<meta name="description" content="Free Cross Browser Javascript DHTML Menu Navigation">
<meta name="keywords" content="JavaScript menu, DHTML menu, client side menu, dropdown menu, pulldown menu, popup menu, web authoring, scripting, freeware, download, shareware, free software, DHTML, Free Menu, site, navigation, html, web, netscape, explorer, IE, opera, DOM, control, cross browser, support, frames, target, download">
<link rel="shortcut icon" href="http://www.softcomplex.com/products/tigra_menu/favicon.ico">
<meta name="robots" content="index,follow">
<style>
a, A:link, a:visited, a:active
{color: #0000aa; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
A:hover
{color: #ff0000; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
p, tr, td, ul, li
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px;}
.header1, h1
{color: #ffffff; background: #4682B4; font-weight: bold; font-family: Tahoma, Verdana; font-size: 13px; margin: 0px; padding: 2px;}
.header2, h2
{color: #000000; background: #DBEAF5; font-weight: bold; font-family: Tahoma, Verdana; font-size: 12px;}
.intd
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px; padding-left: 15px;}
</style>
<!-- styles for demo menu #1-->
<link rel="stylesheet" href="menu1.css">
<!-- styles for demo menu #2-->
<link rel="stylesheet" href="menu2.css">
<!-- styles for demo menu #3-->
<link rel="stylesheet" href="menu3.css">
</head>
<body bottommargin="15" topmargin="15" leftmargin="15" rightmargin="15" marginheight="15" marginwidth="15" bgcolor="white">
<!-- Header -->
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td width="350" rowspan="2"><img src="../tm.gif" width="350" height="80" border="0" alt="Tigra Menu"></td>
<td align="right" valign="top"><img src="../logo.gif" width="178" height="30" border="0" alt="Softcomplex logo"></td>
</tr>
<tr>
<td align="right" valign="bottom" nowrap>
<b>
| <a href="http://www.softcomplex.com/index.html">About Us</a>
| <a href="http://www.softcomplex.com/services.html">Services</a>
| <a href="http://www.softcomplex.com/download.html">Download</a>
| <a href="http://www.softcomplex.com/order.html">Order</a>
| <a href="http://www.softcomplex.com/support.html">Support</a>
|
</b>
</td>
</tr>
<tr><td><img src="../pixel.gif" width="1" height="5" border="0"></td></tr>
</table>
<!-- /Header -->
<!-- Body -->
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#4682B4" width="100%"><tr><td>
<table cellpadding="0" cellspacing="1" width="100%" border="0">
<tr>
<td class="header1" valign="top" height="20">Tigra Menu v2.0 - All Together</td>
<td class="header1" valign="top" width="100%"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF">
<table cellpadding="3" cellspacing="1" border="0" width="100%">
<tr><td class="header2">Advantages</td></tr>
<tr>
<td class="intd">
<p><img src="../pixel.gif" width="250" height="5" border="0"><br>
<b>Flexibility</b> - Tigra Menu has great feature set that makes it possible to tune all aspects of its appearance to meet look & feel of your application.</p>
<p><b>Reliability & Performance</b> - This JavaScript menu component is created by professional DHTML developers to help people who have wasted too much time searching for good menu system that performs well. Now you can take advantage of this extremely efficient widget. Script loads to the browser immediately because of small file size and compact items structure. When loaded it runs smoothly and fast.</p>
<p><b>Support Materials</b> - Beside the fact that menu is offered to the public at no charge, it has tons of support materials. With them menu setup is simple task even technically challenged people can effort.
<p><b>Dynamic Content Ready</b> - Configuration structures of Tigra Menu are optimized for dynamic generation. You can easily fill them from database or file system with simple server side script. One of such appliances is Tigra Menu Online Builder. Others can be found on the web.</p>
</td>
</tr>
<tr><td><img src="../pixel.gif" width="1" height="1" border="0"></td></tr>
<tr><td class="header2">Links</td></tr>
<tr>
<td class="intd">
<b>
<ul>
<li><a href="../index.html">Back to Welcome Page</a>
<li><a href="http://www.softcomplex.com/products/tigra_menu/">Back to Product Page</a>
<li><a href="http://www.softcomplex.com/products/tigra_menu/docs/">Product Documentation</a>
<li><a href="http://www.softcomplex.com/products/tigra_menu/docs/compare_menus.html">Tigra Menu Comparison Table</a>
<li><a href="http://www.softcomplex.com/products/tigra_menu/builder/">Online Menu Builder</a>
<li><a href="http://www.softcomplex.com/forum/forumdisplay.php?fid=29">Tigra Menu Forum</a>
<li><a href="../demo3/index.html">Previous Demo (Inner HTML)</a>
<li><a href="../demo5/index.html">Next Demo (Frames Targeting)</a>
</ul>
</b>
</td>
</tr>
<tr><td><img src="../pixel.gif" width="1" height="1" border="0"></td></tr>
</table>
</td>
<td valign="top" bgcolor="#FFFFFF" class="intd">
<img src="../pixel.gif" width="400" height="130" border="0"><br>
<p>Above you can see three differently configured Tigra Menu instances</p>
<ul>
<li>A number of Tigra Menus to be placed on one page is limited with only visitor's computing resources.
<li>Customized background colors, item borders, fonts faces, font decorations etc. - all styles supported by the browser can be applied to each menu level independently.
<li>Item sizes, item offsets within menu block and block offsets can be configured for each level independently. With Tigra Menu you can have horizontal, vertical or even diagonal menu blocks.
<li>CSS is supported the way so it makes possible to create different rollover effects. Any item style can be independently defined for normal, mouseovered and mousedown states of the items of the menu level.
<li>Check out how easy transparency for the first (next after root) menu level is created with only 1 line of text in CSS file
<li>If some of or even all menu level scope settings are not specified they are inherited from a parent level or, if none, are taken from default value set.
<li>Menu items structure can have virtually any number of items and any depth. This isn't limited by the script implementation. Maximum number of items depends only on computer hardware and browser's performance.
</ul>
<b>Note:</b>Menu hierarchy file (items.js) is the same for several menus so structure defined inside is shared across menus. This is commonly used practice. You can have different menu looks on different pages while hierarchy remains the same or vice versa: you can have same looking menu with different items on different pages. This feature eases site maintenance and makes menu load faster as long as files once requested are cached in browser.
</td>
</tr>
</table>
</td></tr></table>
<!-- /Body -->
<!-- Footer -->
<table cellpadding="3" cellspacing="0" width="100%" border="0">
<tr bgcolor="#4682B4">
<td nowrap><font color="white">Copyright ©2003 SoftComplex Inc. All rights reserved.</font></td>
<td align="right">
| <a href="http://www.softcomplex.com/"><font color="white">company info</font></a>
| <a href="http://www.softcomplex.com/privacy_policy.html"><font color="white">privacy policy</font></a>
| <a href="http://www.softcomplex.com/support.html"><font color="white">contact us</font></a>
|
</td>
</tr>
</table>
<!-- /Footer -->
<!-- menu script itself. you should not modify this file -->
<script language="JavaScript" src="menu.js"></script>
<!-- items structure. you can see same structure is shared by 1-st and 2-nd menu -->
<script language="JavaScript" src="menu_items.js"></script>
<script language="JavaScript" src="menu_items3.js"></script>
<!-- files with geometry and styles structures for coresponding menus -->
<script language="JavaScript" src="menu_tpl1.js"></script>
<script language="JavaScript" src="menu_tpl2.js"></script>
<script language="JavaScript" src="menu_tpl3.js"></script>
<script language="JavaScript">
<!--//
// Note where menu initialization block is located in HTML document.
// Don't try to position menu locating menu initialization block in
// some table cell or other HTML element. Always put it before </body>
// each menu gets two parameters (see demo files)
// 1. items structure
// 2. geometry structure
new menu (MENU_ITEMS, MENU_POS1);
new menu (MENU_ITEMS, MENU_POS2);
new menu (MENU_ITEMS3, MENU_POS3);
// make sure files containing definitions for these variables are linked to the document
// if you got some javascript error like "MENU_POS1 is not defined", then you've made syntax
// error in menu_tpl.js file or that file isn't linked properly.
// also take a look at stylesheets loaded in header in order to set styles
//-->
</script>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -