Форум программистов [Powered by Invision Power Board]

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<link rel="stylesheet" type='text/css' href='./main.css'>
<script type='text/javascript'>
/*** Для добавления правил в таблицу стилей ***/
function changeStyle(css, ssNum) {
var styleObj = document.getElementsByTagName('STYLE')[0];
    if (!styleObj) {    // если нет тэга STYLE в документе
        styleObj = document.createElement('STYLE');
        styleObj.type = 'text/css';
        document.getElementsByTagName('HEAD')[0].appendChild(styleObj);
    }
    if (document.styleSheets) {
        if (document.styleSheets[ssNum].addRule) {    // for IE
            var sList = css.split('\n');
            for (var i = 0; i < sList.length; i++) {
                var selector = sList[i].substr(0, sList[i].search(/\s\{/));
                var rule = (
                    sList[i].substring( sList[i].indexOf('{')+1, sList[i].lastIndexOf('}') )
                ).replace(/[\t\r\n]/g, '');
                document.styleSheets[ssNum].addRule(selector, rule);
            }
        }
        else if (document.styleSheets[ssNum].insertRule) {    // for FF
            document.styleSheets[ssNum].insertRule(css, document.styleSheets[ssNum].cssRules.length);
        }
    }
    else if (!window.opera) {    // for NOT Opera
        var rule = document.createTextNode(css);
        styleObj.appendChild(rule);
    }
}
onload = function () {
//==[ Fix stylesheets ]=========================================================
// Fix UL margin-left в FF в добавление border-collapse во всех браузерах, кроме Оперы
var cssFF = 'ul {margin-left: -20px}\n';
var css =
    'table {table-layout: fixed; border-collapse: collapse}';
    //'td {border: 3px double #269CF7}';
    if (document.body.textContent) {    // if FF
        //document.styleSheets[1].insertRule(cssFF+css, document.styleSheets[1].cssRules.length);
        changeStyle(cssFF+css, 1);
    } else {
        changeStyle(css, 1);
    }
//==[ Add event to menu ]=======================================================
menuElem = document.getElementById("menu");
    for (var i = 0; i < menuElem.childNodes.length; i++) {
        var curNode = menuElem.childNodes[i];
        if (curNode.nodeName == "LI") {
            curNode.onmouseover = function () {this.className = "enter"}
            curNode.onmouseout = function () {this.className = ""}
            if (curNode.lastChild.nodeName == "UL"    // IE
                ||
                curNode.lastChild.previousSibling.nodeName == "UL"    // Gecko
            )
                curNode.firstChild.className = "subMenu";
        }
    }
}
</script>
<style type='text/css'>
@import url("./menu.css");
body {overflow-x: hidden}
ul {margin-left: 20px}
td {border: 1px solid #269CF7}    /* for Opera */
</style>
</head>

<body>
<div class='menu' onMouseOver='menuElem.style.display = "block"' onMouseOut='menuElem.style.display = "none"'>
<span id='menuText'>МЕНЮ</span>
<ul id='menu' onClick='menuElem.style.display = "none"'>
    <li><a href='#JS_sprav'>Справочник по JavaScript</a>
        <ul>
            <li><a href='#stand_comp'>Стандарты и совместимость</a></li>
            <li><a href='#object_model'>Объектная модель JavaScript</a></li>
            <li><a href='#model_event'>Модели событий JavaScript</a></li>
        </ul>
    </li>
</ul>
</div>
</body>
</html>