Описание:
Меню автоматически открывается в левой части экрана при приближении мышки. И если вы убирете мышку с окна то меню автоматически закроется.
Демонстрация:
Поднесите мышку к бордюру в левой части экрана для открытия меня и убрав мышку меню закроется.
Установка:
Шаг 1: Сначала вставьте, предварительно выделив и скопировав текст в <head> секцию вашей странички:
<style>
<!--
#slidemenubar, #slidemenubar2{ position:absolute; left:-155px; width:160px;top:170px; border:1.5px solid green; background-color:lightyellow;layer-background-color:lightyellow; font:bold 12px Verdana; line-height:20px;}
-->
</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 на другой). Последняя строка это растояние между текстом в строках меню.