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

Источник информации: 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">') </script> <layer id="slidemenubar"> <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]="/index.html" sitemlinks[1]="/develop/" sitemlinks[2]="ex_menu.html" sitemlinks[3]="ex_doc.html" sitemlinks[4]="ex_scrooll.html" sitemlinks[5]="ex_images.html" sitemlinks[6]="ex_links.html" sitemlinks[7]="ex_date.html" sitemlinks[8]="ex_animation.html" sitemlinks[9]="ex_brouser.html" sitemlinks[10]="ex_os.html" sitemlinks[11]="ex_css.html" sitemlinks[12]="rizne.html" 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 } var dragapproved=false var x1,x2 if (document.layers) themenu.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP) function move(e){ if (document.all&&event.button==1&&dragapproved){ if(temp1+event.clientX-x1>leftboundary) themenu.pixelLeft=Math.min(rightboundary,temp1+event.clientX-x1) else themenu.pixelLeft=Math.max(leftboundary,temp1+event.clientX-x1) } else if (document.layers){ if(themenu.left+e.x-x2>leftboundary) themenu.left=Math.min(rightboundary+2,themenu.left+e.x-x2) else themenu.left=Math.max(leftboundary-2,themenu.left+e.x-x2) }} function drags(e){ if (document.all){ dragapproved=true temp1=themenu.pixelLeft x1=event.clientX document.onmousemove=move } else{ themenu.captureEvents(Event.MOUSEMOVE) x2=e.x }} function stopit(){ if (document.all){ dragapproved=false } if (document.layers) themenu.releaseEvents(Event.MOUSEMOVE) } if (document.all){ document.all.slidemenubar2.onmousedown=drags document.all.slidemenubar2.onmouseup=new Function("dragapproved=false") document.onselectstart=new Function("return false") } else if (document.layers){ themenu.onmousedown=drags themenu.onmousemove=move themenu.onmouseup=stopit } </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 на другой). Последняя строка это растояние между текстом в строках меню.