var template = { html : "\n\n \n \n \n Animated Menu Example\n <\/title>\n <style>\n body, div, li, ul {\n padding: 0;\n margin: 0;\n }\n \n .head {\n position: relative;\n width: 100%;\n height: 6em;\n }\n\n #logo {\n position: absolute;\n background-color: white;\n color: red;\n z-index: 2;\n width: 50px;\n text-align: center;\n padding: 1em .5em;\n }\n \n #logo:hover {\n background-color: red;\n color: white;\n }\n \n ul#menu {\n position: absolute;\n top: 0;\n left: -300px;\n list-style-type: none;\n }\n ul#menu li {\n float: left;\n margin-left: 10px;\n }\n ul#menu li a, ul#menu li a:hover {\n display: block;\n padding: 1em .5em;\n text-decoration: none;\n font-weight: bold;\n }\n ul#menu li a {\n color: #EE6619;;\n }\n ul#menu li a:hover {\n color: white;\n background-color: #9C2905;\n }\n\n .content {\n width: 100%;\n height: 100%;\n }\n <\/style>\n <\/head>\n <body>\n <div class=\"head\">\n <div id=\"logo\">Лого<\/div>\n <ul id=\"menu\" style=''>\n <li><a href=\"\/\">главная<\/a>\n <\/li>\n <li><a href=\"\/about\">обо мне<\/a>\n <\/li>\n <li><a href=\"\/contacts\">контакты<\/a>\n <\/li>\n <\/ul>\n <\/div>\n <div class=\"content\">\n <p>\n Disclaimer: должен предупредить, что код, представленный далее — только пример реализации, он предназначен только для того, чтобы показать путь, но это не конечный результат. Конечно, вы можете использовать получившийся виджет в своем проекте, но знайте — можно сделать гораздо лучше, в общем, есть пространство для самовыражения и наворачивания. Кроме того, я старался описывать каждый шаг, что будет полезно новичку, но, без сомнения, будет раздражать профессионала. Впрочем, если ты профессионал, то тебе вряд ли чем-либо поможет данная статья.\n <\/p>\n <\/div>\n <script type=\"text\/javascript\" charset=\"utf-8\">\n %code%\n <\/script>\n <\/body>\n<\/html>\n", javascript : "\/\/ Прежде всего, прячем все-все наши переменные внутрь анонимной функции.\n\/\/ Это нужно для того, чтобы не засорять своими переменными глобальную область видимости, что позволит нам:\n\/\/ 1. быть уверенными в том, что чей-то чужой скрипт, изменяющий переменные с таким же названием не \n\/\/ повлияет на работу нашего скрипта.\n\/\/ 2. добиться более высокой работы странички - переменные с глобальной областью видимости иначе обрабатываются \n\/\/ сборщиком мусора и медленнее освобождают память.\n(function () {\n \/\/ Различные вспомогательные функции\n \/\/ Эта функция поможет нам определить, существует ли уже такая переменная, и передан ли аргумент в функцию.\n var isUndefined = function (o) {\n return typeof o === 'undefined';\n };\n \n \/\/ Эта функция позволит нам точно узнать, что перед нами - строка или что-то иное\n var isString = function (o) {\n return typeof o === 'string';\n };\n \n \/\/ Эта функция просто более короткая и удобная запись проверки на то, не является ли переменная null\n var isNull = function (o) {\n return o === null;\n };\n \n \/\/ это более короткая запись нахождения элемента по id\n var get = function (el) {\n return (el && el.nodeType) ? el : document.getElementById(el);\n };\n \n \/\/ универсальный навешивальщик обработчиков событий, который поможет нам придерживаться принципов UnObtrusive JavaScript\n \/\/ обрати внимание на паттерн - мы объявляем функцию, которая сразу же сама себя вызывает, и возвращает другую функцию как\n \/\/ результат своей работы. Таким образом, мы определим, как в конкретном браузере можно навесить обработчик события и\n \/\/ сразу закешируем правильный вариант в функции addEventListener, что позволит нам не терять времени на проверки впоследствии \n var addListener = function (el, type, fn) {\n if (document.body.addEventListener) {\n return function (el, type, fn) {\n if (isString(el)) { el = get(el); }\n el.addEventListener(type, fn, false);\n };\n } else if (document.body.attachEvent) {\n return function (el, type, fn) {\n if (isString(el)) { el = get(el); }\n el.attachEvent('on' + type, fn);\n };\n } else {\n return function (el, type, fn) {\n if (isString(el)) { el = get(el); }\n el['on' + type] = fn;\n };\n }\n }(); \/\/ обрати внимание на скобки в конце - именно так можно вызвать функцию сразу же после ее определения\n \n \/\/ универсальный удаляльщик обработчиков событий.\n var removeListener = function (el, type, fn) {\n if (document.body.removeEventListener){\n return function (el, type, fn) {\n if (isString(el)) { el = get(el); }\n el.removeEventListener(type, fn, false);\n };\n } else if (document.body.detachEvent) {\n return function (el, type, fn) {\n if (isString(el)) { el = get(el); }\n el.detachEvent('on' + type, fn);\n };\n } else {\n return function (el, type, fn) {\n if (isString(el)) { el = get(el); }\n el['on' + type] = function () { return true; };\n };\n }\n }();\n \n \n \/\/ Основная программа\n \n \/\/ Переменные\n \n \/\/ Это html элемент \"логотип\"\n var logo = get('logo');\n \/\/ Это элемент меню\n var menu = get('menu');\n \/\/ это переменная, в которую пишется id текущего активного таймера - мы ее запоминаем для того, чтобы не \n \/\/ запускать новую анимацию, когда старая еще работает.\n var timer = null;\n \/\/ эта переменная показывает, что анимация уже отработала и меню видимо и что можно запускать другую\n var isMenuVisible = false;\n\n var userActivityTimer = null;\n \n \/\/ это функция \"показать меню\"\n var activate = function () {\n \/\/ проверяем, не работает ли уже другая анимация и что меню уже спрятано\n if (isNull(timer) && !isMenuVisible) {\n \/\/ запускаем анимацию\n timer = setInterval(function () {\n \/\/ берем значене left у элемента меню, превращаем его в цифру\n var left = menu.style.left.replace('px', '') - 0;\n \/\/ если меню еще не выехало - сдвигаем его вправо\n if (left <= 50) {\n menu.style.left = left + 7 + 'px';\n } else {\n \/\/ меню уже выехало, можно сбросить timer в null и сказать, что меню уже видимо.\n isMenuVisible = true;\n clearInterval(timer);\n timer = null;\n }\n }, 5);\n }\n };\n \n \/\/ функция \"спрятать меню\", работает практически аналогично\n var deactivate = function () {\n if (isNull(userActivityTimer)) {\n userActivityTimer = setTimeout(function () {\n if (isNull(timer) && isMenuVisible) {\n timer = setInterval(function () {\n var left = menu.style.left.replace('px', '') - 0;\n if (left >= -300) {\n menu.style.left = left - 7 + 'px';\n } else {\n isUserWorking = false;\n isMenuVisible = false;\n clearInterval(timer);\n timer = null;\n clearTimeout(userActivityTimer);\n userActivityTimer = null;\n }\n }, 5);\n }\n }, 2000);\n }\n \n };\n \n \/\/ навешиваем наши обработчики событий.\n addListener(logo, 'mouseover', activate);\n addListener(logo, 'mouseout', deactivate);\n addListener(menu, 'mouseout', deactivate);\n \n \n \/\/ для того, чтобы в ie6 память не текла, нам надо сбросить все ссылки на\n \/\/ html элементы из javascript и удалить все обработчики событий. \n addListener(window, 'unload', function () {\n clearInterval(timer);\n timer = null;\n clearTimeout(userActivityTimer);\n userActivityTimer = null;\n removeListener(logo, 'mouseover', activate);\n removeListener(logo, 'mouseout', deactivate);\n removeListener(menu, 'mouseout', deactivate);\n logo = null;\n menu = null;\n removeListener(window, 'unload', arguments.callee); \/\/ arguments.callee == текущая функция\n });\n})();" };