📄 index.html
字号:
<!-- -*- nxml -*- Copyright Dynarch.com, 2003-2008. All Rights Reserved.--><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>dhtml menu javascript menu</title> <link rel="stylesheet" href="src/hmenu.css" /> <link rel="alternate stylesheet" href="src/skin-xp.css" title="Windows XP" /> <link rel="alternate stylesheet" href="src/skin-xp-apps.css" title="Windows XP Apps" /> <link rel="alternate stylesheet" href="src/skin-aqua.css" title="Aqua" /> <link rel="alternate stylesheet" href="src/skin-longhorn.css" title="Windows Longhorn" /> <link rel="alternate stylesheet" href="src/skin-modern.css" title="Mozilla Modern" /> <link rel="alternate stylesheet" href="src/skin-win98.css" title="Win 98 Style" /> <link rel="stylesheet" href="src/skin-win2k.css" title="Win 2000 Style" /> <link rel="alternate stylesheet" href="src/skin-beos.css" title="BeOS Style" /> <link rel="alternate stylesheet" href="src/skin-system.css" title="System Style" /> <link rel="alternate stylesheet" href="src/skin-xp-extended.css" title="XP Extended" /> <link rel="alternate stylesheet" href="src/skin-hmenu-dark.css" title="HMenu Dark" /> <link rel="alternate stylesheet" href="src/skin-rain.css" title="Rain" /> <link rel="alternate stylesheet" href="src/skin-yellow.css" title="Yellow" /> <link rel="alternate stylesheet" href="src/skin-yp.css" title="Yp" /> <link rel="alternate stylesheet" href="my-dynarch-menu-skin.css" title="Custom fonts" /> <script type="text/javascript"> // WARNING: the following should be a path relative to site, like "/hmenu/" // here it is set relative to the current page only (note the dot in "./src/"), // which is not recommended for production usage; it's useful in this case though // to make the demo work correctly on local systems. _dynarch_menu_url = "./src/"; </script> <script type="text/javascript" src="src/hmenu.js"></script> <style type="text/css"> @import url("code.css"); /* div.dynarch-horiz-menu table, div.dynarch-popup-menu table { font: 8pt "trebuchet ms",verdana,tahoma,sans-serif; } */ div.dynarch-horiz-menu table tr td { height: 20px; } html, body { margin: 0px; padding: 0px; font: 9pt "trebuchet ms",verdana,tahoma,sans-serif; background-color: #aaa; } table { font: 9pt "trebuchet ms",verdana,tahoma,sans-serif; } #div-content { padding: 0px 1em; border: 1px solid #888; background-color: #fff; } a:link, a:visited { color: #00f; } a:hover { background-color: #ff8; color: #f00; } h1, h2, h3 { border-bottom: 2px solid #888; font-weight: normal; } h2, h3 { border-width: 1px; } .content { margin: 0px 4em; } .list-files { color: #686; } .list-files tt { color: #000; } .list-files ul li { list-style-image: url("src/img/rarrow.gif"); } .footer { text-align: center; font: 9pt tahoma,verdana,sans-serif; border-top: 1px solid #99a; color: #446; } #features { font: 95% "trebuchet ms",tahoma,verdana,sans-serif; height: 1024px; border-collapse: collapse; } #features .feature { margin: 3px 0; } #features .details { height: 1px; overflow: hidden; } #features .brief { cursor: default; padding: 2px 0 2px 10px; } #features .brief .unique { color: #f42; } #features .brief-active { z-index: 10; border-bottom: 1px solid #842; border-top: 1px solid #842; padding: 1px 0 1px 10px; background: #f5f5f5 url("img/arrows.png") no-repeat 100% 50%; margin-right: -2px; } #features .brief .bullet { font: bold italic 100% "bitstream vera serif",georgia,"trebuchet ms",serif; color: #888; } #features .brief-active .bullet { color: #f42; } #featdesc { border-left: 1px solid #842; background-color: #f5f5f5; width: 50%; padding: 1em 0; } p, blockquote { text-align: justify; } tt { color: #862; } dt { background-color: #fff } .downarrow { background: url("img/downarrow.gif") no-repeat 100% 100%; padding-right: 11px; display: block; } td.hover .downarrow { background-image: url("img/downarrow-hover.gif"); } td.active .downarrow { background-image: url("img/uparrow.gif"); } a.logo { position: absolute; right: 10px; top: 35px; background: none; } body > a.logo { position: fixed; } a.logo:hover { background: none; } a.logo img { border: none; } </style> <script type="text/javascript">//<![CDATA[ var mainmenu; function setActiveStyleSheet(title) { var i, a, main; title = title.replace(/%20/g, " "); // IE fucked up if (title) { var links = document.getElementsByTagName('link'); for(i = 0; (a = links[i]); i++) { if (/style/.test(a.getAttribute('rel')) && a.getAttribute('title')) { a.disabled = true; if (a.getAttribute('title') == title) { a.disabled = true; a.disabled = false; } } } } if (is_ie) { // note, this code refreshes the popup menus for Internet Explorer // you don't normally want to use it as you'll probably load only // one menu style in your page. DynarchMenu._forAllMenus(function(menu) { var a = menu._popupMenus, i, s, el, tds, j; for (i = a.length; --i >= 0;) { tds = a[i].element.getElementsByTagName("td"); for (j = tds.length; --j >= 0;) { s = tds[j].style; s.display = "none"; s.display = "block"; } } }); } } var current_skin_item = null; function setSkin(action, pref) { if (!current_skin_item) current_skin_item = mainmenu.items["default-skin"]; setActiveStyleSheet(pref); action.info.icon.src = action.info.icon.src.replace("radio-0", "radio-1"); current_skin_item.icon.src = current_skin_item.icon.src.replace("radio-1", "radio-0"); current_skin_item = action.info; if (pref == "XP Extended") { if (/msie 5\.0/i.test(navigator.userAgent)) { alert("This skin might not work properly with IE 5.0"); } } document.body.style.display = "none"; document.body.style.display = ""; return false; } function toggleCheckbox(action, pref) { if (!mainmenu) { alert("Your browser does not support our menu so preferences do not work"); return; } var item = action.info; var img = item.icon; var val; if (/checkbox-1/.test(img.src)) { // item is on img.src = img.src.replace('checkbox-1', 'checkbox-0'); val = false; } else { // assume item is off img.src = img.src.replace('checkbox-0', 'checkbox-1'); val = true; } switch (pref) { case 'tooltips': item.menu.config.tooltips = val; break; case 'electric': item.menu.config.electric = val ? 350 : false; mainmenu.items["menu-item-electric"].disable(!val); break; case 'shadows': item.menu.config.shadows = val ? [4, 4] : null; mainmenu.items["menu-item-shadowSize"].disable(!val); return false; break; case 'blink': item.menu.config.blink = val ? 5 : false; break; } return !item.menu.config.electric; } function setElectricTimeout(action) { var item = action.info; var tmout = prompt("Please enter the timeout for closing popup menus, in milliseconds", item.menu.config.electric); if (!tmout) return; item.menu.config.electric = parseInt(tmout); } function setGeneralTimeout(action) { var item = action.info; var tmout = prompt("Please enter the general menu timeout, in milliseconds", item.menu.config.timeout); if (!tmout) return; item.menu.config.timeout = tmout; } function setShadowSize(action) { var item = action.info; var dx = prompt("Please enter shadow's X displacement (width)", item.menu.config.shadows[0]); if (!dx) return; var dy = prompt("Please enter shadow's Y displacement (height)", item.menu.config.shadows[1]); if (!dy) return; item.menu.config.shadows = [parseInt(dx), parseInt(dy)]; } function featInstall(el) { var info = {}; for (var i = el.firstChild; i; i = i.nextSibling) { if (i.nodeType != 1) continue; if (/\S/.test(i.className)) { info[i.className] = i; } } el = info.brief; el.innerHTML = el.innerHTML.replace("(unique)", "<span class='unique' title='To the best of our knowledge, this feature is unique to our menu.'>(unique)</span>"); el.innerHTML = el.innerHTML.replace("禄", "<span class='bullet'>禄</span>"); el.info = info;⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -