Этот кусок кода вставляется в html файл.(На примере своего сайта)
<script language="JavaScript" src="funcs2.js"></script>
<!--
MENU <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
===================================================
-->
<button id="textMenu" style="visibility:hidden;" value="
d0;
1=Главная страница=./index.html;
2b=Обо мне=#;
3b=Компютеры=./comps.html;
4=Рыбалка=./strah.html;
5=Карта сайта=./map.html;
d2;
21b=Фото=#;
22=Резюме=./resume;
23=Связь=./post.html;
24=Гостевая книга=http://www.narod.ru/guestbook/?owner*4784702&messageshtml*guestbook/allmessages.gd&mainhtml*guestbook/readmessage.gd;
d21;
211=Фотоальбом №1=#;
212=Фотоальбом №2=#;
213=Фотоальбом №3=#;
d3;
31=Железо=#;
32=Программирование=#;
33=*nix=#;
"></button>
<noscript>
Scripts no used this browser!!! Without menu.
</noscript>
<script language="JavaScript">
writeMenu("textMenu");
// автоматически прятать меню через 3 сек.
setTimeout("InGo();", 3000);
</script>
<!--
===================================================
MENU <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
-->
/*
ВСЁ, ЧТО КРАСНЫМ - УДАЛИТЬ!!!
Пояснение:
цифра - это пункт меню (НомерСтрокиМеню)
буква "b" после цифры - обозначение наличия подменю (значек »)
буква "d" перед цифрой - группировка подменю
строка разделена символом "=" следующим образом: НомерСтрокиМеню=ТекстСтрокиМеню=СсылкаСтрокиМеню; обязательно завершаемая точкой с запятой ";".
символ "*" в СсылкеСтрокиМеню - заменяется символом "=" в конечной ссылке.
"d0" - Главное меню (обязательно должно быть)
Содержание файла funcs2.js:
*/
// Автор:Орлов В.И.
// Ася: 5279603
// wiliams wintik74 Will
//------------------------------------------------------------------//
//Определение браузера.
function Bra(){
this.o=(navigator.userAgent.indexOf("Opera")!=-1)?true:false;
this.n=(navigator.userAgent.indexOf("Netscape")!=-1)?true:false;
this.i=(navigator.userAgent.indexOf("MSIE")!=-1)?true:false;
this.c=(navigator.userAgent.indexOf("Chrom")!=-1)?true:false;
this.m=(navigator.userAgent.indexOf("Mozilla")!=-1 && (!this.o)&&(!this.n)&&(!this.i)&&(!this.c))?true:false;
this.d=(document.getElementById)?true:false;
}
var bra = new Bra();
//Задание параметров меню.
nowSMenu =lastSMenu=nowMenu=lastMenu=new String("d0");
outM=outSM=0;
widthMenu =135; // ширина меню в пикселах
mTop =0 // Отступ сверху пикс
perenos =1; // переносить ли текст в меню 1-да, 0-нет
NMenu ="М Е Н Ю"; // Надпись в шапке меню.
VNMenu =0 //1 - скрыть шапку или 0 - показать шапку меню
CMenu ="green"; // Цвет меню
CMenuO ="darkGreen"; // Цвет выбранного меню
CMenuText ="lightgreen"; // Цвет текста меню
CMenuTextO="yellow"; // Цвет текста выбранного меню и метки подменю
CTPunkt ="green"; // Цвет верхней границы пункта меню
CBPunkt ="lightgreen"; // Цвет нижней границы пункта меню
CLPunkt ="lightgreen"; // Цвет левой границы пункта меню
CRPunkt ="green"; // Цвет правой границы пункта меню
//------------------------------------------------------------------//
function trueObj(obj){ return document.getElementById(obj) ? 1:0;}
//------------------------------------------------------------------//
function onMenu(obj){nowMenu=obj.id;}
//------------------------------------------------------------------//
function outMenu(obj){
lastMenu=obj.id;
outM=setTimeout("hideMenu('d','d'+lastSMenu);",500);
}
//------------------------------------------------------------------//
function outSubMenu(obj){
lastSMenu=obj.id;
whereSM(obj,CMenuText,CMenu);
}
//------------------------------------------------------------------//
function onSubMenu(obj){
nowSMenu=obj.id;
whereSM(obj,CMenuTextO,CMenuO);
if(lastMenu==nowMenu) {
clearTimeout(outM);
};
if(lastMenu.length>nowSMenu.length){
hideMenu(nowSMenu,lastMenu);
};
var str= new String("d"+obj.id);
if(trueObj(str)){
document.getElementById(str).style.visibility="visible";
document.getElementById(str).style.top=obj.offsetParent.offsetTop+obj.offsetTop;
document.getElementById(str).style.left=obj.offsetParent.offsetLeft+obj.offsetWidth;
};
if(nowSMenu.length<=lastSMenu.length && nowSMenu!=lastSMenu){
oneHideMenu("d"+lastSMenu);
};
}
//------------------------------------------------------------------//
function whereSM(obj,t,f){
TName = new String(obj.id.toString());
while(TName.length>0){
document.getElementById(TName).style.backgroundColor=f;
document.getElementById(TName).style.color=t;
TName=TName.substr(0,TName.length-1);
};
}
//------------------------------------------------------------------//
function oneHideMenu(id){if(trueObj(id)) document.getElementById(id).style.visibility="hidden";}
//------------------------------------------------------------------//
function hideMenu(begin,end){
var Amenu=new String(end);
for(i=end.length;i>begin.length;i--){
Amenu=Amenu.substr(0,i);
if(Amenu=="d0") break;
oneHideMenu(Amenu);
};
}
//------------------------------------------------------------------//
function createTextMenu(name){
var str=document.getElementById(name).value;
str=str.replace(/;\s{2,}/g,";");
str=str.replace(/\r*/g,"");
str=str.replace(/\n*/g,"");
str=str.replace(/=\t{1,}/g,"=");
str=str.replace(/=\s{2,}/g,"=");
str=str.replace(/^;/g,"");
str=str.replace(/;$/g,"");
str=str.replace(/;{2,}/g,";");
str=str.replace(/^\s+/g,"");
var arr=str.split(";");
return arr;
}
//------------------------------------------------------------------//
function writeMenu(tM){
var textIns="";
textIns += "<style>.punkt{width:100%;padding-left:4;border-style:solid;border-top-width:1;border-bottom-width: 1;border-left-width:1;border-right-width:1;border-top-color:"+CTPunkt+";border-bottom-color:"+CBPunkt+";border-left-color:"+CLPunkt+";border-right-color:"+CRPunkt+";color:"+CMenuText+";background-color:"+CMenu+";font-size:12;font-family:arial;text-align:left;cursor:pointer;cursor:hand;}</style>";
if(trueObj(tM)){
var divend=parentdiv=i=0;
var str2=createTextMenu(tM);
for(i=0;i<str2.length;i++){
if(str2[i].substr(0,1)=="d"){
if(divend==1){
textIns += "\n<dg/div>";
stEndDiv=" visibility:hidden;\">";
}else{
stEndDiv="\">";
};
textIns += "\n<div id=\""+str2[i]+"\" onMouseOver=\"onMenu(this);\" onMouseOut=\"outMenu(this); status='';\" style=\"position:absolute; left:0; top:0; width:"+widthMenu+"; background-color:"+CMenu+"; z-index:1000; white-space:"+((perenos)?"normal":"nowrap")+";";
textIns += stEndDiv;
divend=1;
}else{
str3=new String(str2[i]);
str4=str3.split("=");
str4[2]=str4[2].replace(/\*/g,"=");
textIns += "\n";
if(str2[i].indexOf("b=")+1){
textIns += "<table style=\"width:100%;\" onMouseOver=\"onSubMenu(this); status='"+str4[2]+"';\" onMouseOut=\"outSubMenu(this);\" class=\"punkt\" onClick=\"OpenUrl(\'"+str4[2]+"\');\" id=\""+str4[0].substr(0,str4[0].length-1)+"\"><tr><td>"+str4[1]+"</td> <td style=\"text-align:right; background-color:transparent; color:"+CMenuTextO+";\"> » </td></tr></table>";
}else{
textIns += "<table style=\"width:100%;\" onMouseOver=\"onSubMenu(this); status='"+str4[2]+"';\" onMouseOut=\"outSubMenu(this);\" class=\"punkt\" onClick=\"OpenUrl(\'"+str4[2]+"\');\" id=\""+str4[0]+"\"><tr><td>"+str4[1]+"</td></tr></table>";
};
};
};
textIns += "\n</div>";
document.write(textIns);
}else{
document.write("Для создания меню не правильно задан ID тега. id=\""+((!tM) ? "не задан" : tM)+"\"");
};
// Следующая строка мне не нравится, но оставил, так как у меня она особо не на что не влияет. Можно закомментировать.
// Планировалось в будущем, что меню будет плавно следовать за скролом страницы. Реализовал на сайте http://remkom-sauna.narod.ru/
setInterval("document.getElementById('d0').style.top=((bra.n) ? window.pageYOffset:document.body.scrollTop)+mTop;",200);
document.getElementById('d0').innerHTML = document.getElementById('d0').innerHTML + "<div id='NameMenu' Title='"+NMenu+"' class='punkt' onMouseOver='this.style.backgroundColor=\""+CMenuO+"\";' onMouseOut='this.style.backgroundColor=\""+CMenu+"\";' style='background:"+CMenu+"; white-space:inherit; text-align:center; position:absolute; left:"+widthMenu+"; top:0; height:100%; width:12px;' onClick='InGo();'></div>";
document.getElementById('NameMenu').innerHTML = '<button id="InID" type="botton" style="position:absolute; left:1; height:12px; width:15px; margin:0px; padding:-1px; border:1px;"></button><br>'+NMenu;
document.getElementById('NameMenu').style.height=document.getElementById('d0').clientHeight-((bra.i) ? 0 : 2);
document.getElementById('InID').style.background="URL(./of.gif)";
document.getElementById('NameMenu').style.visibility=(VNMenu) ? "hidden" : "visible";
// Следующие две строки - сам градусник. Если не нужен, то удалить (не забыв про функции) или закоментировать.
// У меня это простой ДИВ с картинкой "
"
var WaitStr = "<div id='Wait' style='visibility:hidden; z-index:999; width:100px; height:15px; text-align:center; background:white; border-style:solid; border-width:1px; color:red; position:absolute; top:"+Math.round(this.window.document.body.clientHeight/2)+"px; left:"+Math.round(this.window.document.body.clientWidth/2)+"px;'><img src='./img/wait.gif'></img> Wait</div>";
document.write(WaitStr);
}
//------------------------------------------------------------------//
function InGo(ts){
StartGrad();
var wMenu = parseInt(document.getElementById('d0').style.width);
var Mleft = parseInt(document.getElementById('d0').style.left);
if(Mleft == 0){
OnGo(0,wMenu*-1)
//Файлики on.gif и of.gif - картинки размером примерно 13Х13 меняющиеся при развернутом и свернутом меню.
document.getElementById('InID').style.background="URL(./on.gif)";
StopGrad()
}else{
OnGo(Mleft,0)
document.getElementById('InID').style.background="URL(./of.gif)";
StopGrad()
};
}
//------------------------------------------------------------------//
function OpenUrl(url){
if(url.indexOf("index")==-1 && url.indexOf("#")==-1) {
//Тут у меня все ссылки открываются во фрейме "ifrm". Если фрейм не устраивает, следующую строку надо переделать (это не сложно).
document.getElementById('ifrm').src=url;
StartGrad();
}
if(url.indexOf("index")>=1) {
//(window.location) ? window.location.reload() : location.reload();
parent.location.href="http://www.wiliams.narod.ru";
}
lastMenu=this.id;
outM=setTimeout("hideMenu('d','d'+lastSMenu);",50);
}
//Следующие две функции - градусник! ) т.е. картинка отображающая ожидание загрузки страницы.
//------------------------------------------------------------------//
function StartGrad(){document.getElementById('Wait').style.visibility="visible";}
//------------------------------------------------------------------//
function StopGrad(){document.getElementById('Wait').style.visibility="hidden";}
// следующие две функции взяты с http://javascript.ru/blog/Andrej-Paranichev/Osnovy-programmnoj-animacii-JavaScript
//------------------------------------------------------------------//
function OnGo(fr,t){
var element = document.getElementById("d0");
var from = fr; // Начальная координата X
var to = t; // Конечная координата X
var duration = 1000; // Длительность - 1 секунда
var start = new Date().getTime(); // Время старта
setTimeout(function() {
var now = (new Date().getTime()) - start; // Текущее время
var progress = now / duration; // Прогресс анимации
var result = (to - from) * delta(progress) + from;
element.style.left = result + "px";
if (progress < 1) // Если анимация не закончилась, продолжаем
setTimeout(arguments.callee, 10);
}, 10);
}
//------------------------------------------------------------------//
function delta(progress) {
function d(progress) {
for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (progress >= (7 - 4 * a) / 11)
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
};
}
return 1 - d(1 - progress);
}
Комментариев не так уж и много, но думаю разобраться не сложно и идея понятна.
На этом всё!!!
Оставить запись с благодарностью..
