Динамическое меню (управление мышкой).

Источник информации: Dynamic Web design studio

Описание:

Меню автоматически открывается в левой части экрана при приближении мышки. И если вы убирете мышку с окна то меню автоматически закроется.

Демонстрация:

Поднесите мышку к бордюру в левой части экрана для открытия меня и убрав мышку меню закроется.

Установка:

Шаг 1: Сначала вставьте, предварительно выделив и скопировав текст в <head> секцию вашей странички:

<style>  </style>

Шаг 2: Потом вставьте, предварительно выделив и скопировав текст в <body> секцию вашей странички:

<script language="JavaScript1.2"> /* Sliding Menu Bar Script- By Dynamic Web Design (www.dynamic-design.com.ua) For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamic-design.com.ua/develop/ */ if (document.all) document.write('<div id="slidemenubar2" style="left:-150" onMouseover="pull()" onMouseout="draw()">') </script> <layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()"> <script language="JavaScript1.2"> var sitems=new Array() var sitemlinks=new Array() //extend or shorten this list sitems[0]="Домой" sitems[1]="Take our survey!" sitems[2]="Меню и навигация" sitems[3]="Эффекты с документами" sitems[4]="Прокрутка" sitems[5]="Эффекты с изображением" sitems[6]="Ссылки и кнопки" sitems[7]="Динамические часы и дата" sitems[8]="Текстовая анимация" sitems[9]="Browser Window" sitems[10]="Информация о системе пользователя" sitems[11]="Cascading Style Sheets" sitems[12]="Другое" //These are the links pertaining to the above text. sitemlinks[0]="http://www.dynamic-design.com.ua" sitemlinks[1]="http://www.dynamic-design.com.ua" sitemlinks[2]="http://www.dynamic-design.com.ua" sitemlinks[3]="http://www.dynamic-design.com.ua/script" sitemlinks[4]="http://www.dynamic-design.com.ua" sitemlinks[5]="http://www.dynamic-design.com.ua" sitemlinks[6]="http://www.dynamic-design.com.ua" sitemlinks[7]="http://www.dynamic-design.com.ua" sitemlinks[8]="http://www.dynamic-design.com.ua/script" sitemlinks[9]="http://www.dynamic-design.com.ua" sitemlinks[10]="http://www.dynamic-design.com.ua" sitemlinks[11]="http://www.dynamic-design.com.ua" sitemlinks[12]="http://www.dynamic-design.com.ua" for (i=0;i<=sitems.length-1;i++) document.write('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>') </script> </layer> <script language="JavaScript1.2"> function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers) setTimeout("window.onresize=regenerate",400) } window.onload=regenerate2 if (document.all){ document.write('</div>') themenu=document.all.slidemenubar2.style rightboundary=0 leftboundary=-150 } else{ themenu=document.layers.slidemenubar rightboundary=150 leftboundary=10 } function pull(){ if (window.drawit) clearInterval(drawit) pullit=setInterval("pullengine()",50) } function draw(){ clearInterval(pullit) drawit=setInterval("drawengine()",50) } function pullengine(){ if (document.all&&themenu.pixelLeft<rightboundary) themenu.pixelLeft+=5 else if(document.layers&&themenu.left<rightboundary) themenu.left+=5 else if (window.pullit) clearInterval(pullit) } function drawengine(){ if (document.all&&themenu.pixelLeft>leftboundary) themenu.pixelLeft-=5 else if(document.layers&&themenu.left>leftboundary) themenu.left-=5 else if (window.drawit) clearInterval(drawit) } </script>

Конфигурация меню:

Для изменения содержания и ссылок меню вам нужно отредактировать значения sitems[] и sitemlinks[] в HTML коде Шага 2.
Для изменения положения меню на страничке, отредактируйте код скопированый в Шаге 1. Вот часть списка который вам нужно отредактировать:

top:170px;
border:1.5px solid green;
background-color:lightyellow;
layer-background-color:lightyellow;
font:bold 12px Verdana;
line-height:20px;

Первая строка, положение окна вертикально в пикселях (сейчас 170px и может быть другое). Вторая строка это размер и цвет рамки окружающей меню (измените 1.5px и зеленый на другое). Третья и четвертая строки цвет background меню. Пъятая строка значение фонта меню (измените 12px и Verdana на другой). Последняя строка это растояние между текстом в строках меню.