Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Раскрывающееся меню, как переставить на другую сторону? (https://javascript.ru/forum/events/1571-raskryvayushheesya-menyu-kak-perestavit-na-druguyu-storonu.html)

Resager 15.08.2008 20:36
Раскрывающееся меню, как переставить на другую сторону?
 
Нашёл очень удобный и полезный скрипт, но не как не могу изменить в нём одну деталь.....
Всё по порядку:
В окне эксплорера, слева появляется прямоугольник, при наведении на который выдвегается слева меню.
Так вот, как сделать так, чтобы сам прямоугольник, да и самоменю было справа?

скачал скрипт с сайта (то есть авторскими правами обладает - http://bjs.stsland.ru/)

текст HTML-файла (канечно тут много лишнего, но..)

<body bgcolor=white leftMargin=0 topMargin=0>
<title>ААХ</title>
<META content="text/html; charset=windows-1251" http-equiv=Content-Type>
<script language=JavaScript1.2 src="nav.js"></SCRIPT>


текст Ява-скрипта nav.js

<!--


YOffset=10; // no quotes!!
staticYOffset=10; // no quotes!!
staticMode="smooth";
slideSpeed=10 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
hdrFontFamily="Verdana";
hdrFontSize="3";
hdrFontColor="white";
hdrBGColor="#AA00FF";
hdrAlign="right";
hdrVAlign="center";
hdrHeight="20";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#AAAAAA";
linkTarget="_top";
linkAlign="left";
menuBGColor="black";
menuIsStatic="yes";
menuHeader="Menu&nbsp;";
menuWidth=160; // Must be a multiple of 10! no quotes!!
barBGColor="#СССССС";
barFontFamily="Verdana";
barFontSize="3";
barFontColor="white";
barText="DYNAMIC FX";
barVAlign="top";
barWidth=200; // no quotes!!

IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion >= "4")

function moveOut() {
if (window.cancel) {clearTimeout(cancel);}
if (window.moving2) {clearTimeout(moving2);}
if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) {
if (IE) {ssm2.style.pixelLeft += 10;}
if (NS) {document.ssm2.left += 10;}
moving1 = setTimeout('moveOut()', slideSpeed)}
else {clearTimeout(moving1)}};
function moveBack() {
cancel = setTimeout('moveBack1()', waitTime)}
function moveBack1() {
if (window.moving1) {clearTimeout(moving1)}
if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-menuWidth))) {
if (IE) {ssm2.style.pixelLeft -= 10;}
if (NS) {document.ssm2.left -= 10;}
moving2 = setTimeout('moveBack1()', slideSpeed)}
else {clearTimeout(moving2)}};

lastY = 0;
function makeStatic(mode) {
if (IE) {winY = document.body.scrollTop;var NM=ssm2.style}
if (NS) {winY = window.pageYOffset;var NM=document.ssm2}
if (mode=="smooth") {
if ((IE||NS) && winY!=lastY) {
smooth = .2 * (winY - lastY);
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
if (IE) NM.pixelTop+=smooth;
if (NS) NM.top+=smooth;
lastY = lastY+smooth;}
setTimeout('makeStatic("smooth")', 1)}
else if (mode=="advanced") {
if ((IE||NS) && winY>YOffset-staticYOffset) {
if (IE) {NM.pixelTop=winY+staticYOffset}
if (NS) {NM.top=winY+staticYOffset}}
else {
if (IE) {NM.pixelTop=YOffset}
if (NS) {NM.top=YOffset-7}}
setTimeout('makeStatic("advanced")', 1)}}

function initSlide() {
if (IE) {
ssm2.style.pixelLeft = -menuWidth;
ssm2.style.visibility = "visible"}
else if (NS) {
document.ssm2.left = -menuWidth;
document.ssm2.visibility = "show"}
else {alert('Choose either the "smooth" or "advanced" static modes!')}}

function startMenu() {
if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute;Left : 0px;Top : '+YOffset+'px;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')}
tempBar=""
for (i=0;i<barText.length;i++) {
tempBar+=barText.substring(i, i+1)+"<BR>"}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+(menuWidth-1)+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'">&nbsp;<font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>')}

function addItem(text, link, target) {
if (!target) {target=linkTarget}
document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" ALIGN="'+linkAlign+'" WIDTH="'+(menuWidth-1)+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'">&nbsp;<A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</LAYER></ILAYER></TD></TR>')}

function addHdr(text) {
document.write('<tr><td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'">&nbsp;<font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')}

function endMenu() {
document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial">&nbsp;</font></td></TR></table>')
if (IE) {document.write('</DIV>')}
if (NS) {document.write('</LAYER>')}
if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);}
}

// Insert Generated Text Below

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=100; // no quotes!!
staticYOffset=100; // no quotes!!
staticMode="advanced";
slideSpeed=20 // no quotes!!
waitTime=500; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes";
menuHeader="Навигация:";
menuWidth=110; // Must be a multiple of 10! no quotes!!
hdrFontFamily="Arial";
hdrFontSize="2";
hdrFontColor="#000000";
hdrBGColor="#DCFEFC";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="20";
linkFontFamily="Arial";
linkFontSize="2";
linkBGColor="#DCFEFC";
linkOverBGColor="#04FEFC";
linkTarget="_top";
linkAlign="Left";
barBGColor="#04FEFC";
barFontFamily="Verdana";
barFontSize="3";
barFontColor="#000000";
barText="ГЛАВНОЕ МЕНЮ";
barVAlign="center";
barWidth=20; // no quotes!!

startMenu()
addItem('Главная', 'Главная.vbs', '_blank');
addItem('Работа', 'Работа.vbs', '_blank');
addItem('Музыка', 'Музыка.vbs', '_blank');
addItem('Видео', 'Видео.vbs', '_blank');
addItem('Программы', 'Программы.vbs', '_blank');
addItem('games', 'games.vbs', '_blank');
addItem('Учёба', 'Учёба.vbs', '_blank');
addItem('Доки (дистр)', 'Доки (дистр).vbs', '_blank');
addItem('текущая папка', 'текущая папка.vbs', '_blank');
addItem('HDD', 'Скока_своб_мегоф_на_HDD_v3.vbs', '_blank');

endMenu()

window.onload=initSlide

//-->


Особенно волнует изменения в функциях
moveOut()
moveBack1()
function makeStatic(mode)
function initSlide()

Зачем вначале неиспользуемые переменные незнаю, в своём варианте я их давно удалил, выложил исходный чтобы вам было нагляднее (практически такой, как я качал скрипт (лишь цвета и пункты изменены))
Пожалуйста помогите, если есть возможность, обьясните как и что в этих функциях выполняется.

ZoNT 15.08.2008 21:00
жесть жесть... Какой древний скрипт...

Resager 15.08.2008 21:29
я юзаю его на рабочем столе (как обьект анимации) поэтому мне его возраст не волнует, главное, что нравится что он выдвижной, но вот с перемещением в обратную сторону возникли проблемы.

Resager 16.08.2008 20:15
Вы моя последняя надежда! Ресурс, полность посвящённый этому языку..... на других форумах общей тематики веб-дизайна мне не могут помоч. ((((
Если можете, обьясните тогда что делают в каждой из функций (если можно построчно)???

ZoNT 16.08.2008 20:33
у меня даже желания код посмотреть не возникает...

Андрей Параничев 16.08.2008 21:14
Если вот это не поможет, то я не смогу больше ничем помочь:
YOffset=10; // no quotes!!
staticYOffset=10; // no quotes!!
staticMode="smooth";
slideSpeed=10 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
hdrFontFamily="Verdana";
hdrFontSize="3";
hdrFontColor="white";
hdrBGColor="#AA00FF";
hdrAlign="right";
hdrVAlign="center";
hdrHeight="20";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#AAAAAA";
linkTarget="_top";
linkAlign="right";
menuBGColor="black";
menuIsStatic="yes";
menuHeader="Menu&nbsp;";
menuWidth=160; // Must be a multiple of 10! no quotes!!
barBGColor="#СССССС";
barFontFamily="Verdana";
barFontSize="3";
barFontColor="white";
barText="DYNAMIC FX";
barVAlign="top";
barWidth=200; // no quotes!!
 
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion >= "4")
 
function moveOut() {
if (window.cancel) {clearTimeout(cancel);}
if (window.moving2) {clearTimeout(moving2);}
if ((IE && ssm2.style.pixelRight<0)||(NS && document.ssm2.right<0)) {
if (IE) {ssm2.style.pixelRight += 10;}
if (NS) {document.ssm2.right += 10;}
moving1 = setTimeout('moveOut()', slideSpeed)}
else {clearTimeout(moving1)}};
function moveBack() {
cancel = setTimeout('moveBack1()', waitTime)}
function moveBack1() {
if (window.moving1) {clearTimeout(moving1)}
if ((IE && ssm2.style.pixelRight>(-menuWidth))||(NS && document.ssm2.right>(-menuWidth))) {
if (IE) {ssm2.style.pixelRight -= 10;}
if (NS) {document.ssm2.right -= 10;}
moving2 = setTimeout('moveBack1()', slideSpeed)}
else {clearTimeout(moving2)}};
 
lastY = 0;
function makeStatic(mode) {
if (IE) {winY = document.body.scrollTop;var NM=ssm2.style}
if (NS) {winY = window.pageYOffset;var NM=document.ssm2}
if (mode=="smooth") {
if ((IE||NS) && winY!=lastY) {
smooth = .2 * (winY - lastY);
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
if (IE) NM.pixelTop+=smooth;
if (NS) NM.top+=smooth;
lastY = lastY+smooth;}
setTimeout('makeStatic("smooth")', 1)}
else if (mode=="advanced") {
if ((IE||NS) && winY>YOffset-staticYOffset) {
if (IE) {NM.pixelTop=winY+staticYOffset}
if (NS) {NM.top=winY+staticYOffset}}
else {
if (IE) {NM.pixelTop=YOffset}
if (NS) {NM.top=YOffset-7}}
setTimeout('makeStatic("advanced")', 1)}}
 
function initSlide() {
if (IE) {
ssm2.style.pixelRight = -menuWidth;
ssm2.style.visibility = "visible"}
else if (NS) {
document.ssm2.right = -menuWidth;
document.ssm2.visibility = "show"}
else {alert('Choose either the "smooth" or "advanced" static modes!')}}
 
function startMenu() {
if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute;Right : 0px;Top : '+YOffset+'px;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" right="0" onmouseover="moveOut()" onmouseout="moveBack()">')}
tempBar=""
for (i=0;i<barText.length;i++) {
tempBar+=barText.substring(i, i+1)+"<BR>"}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><tr><td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD><td bgcolor="'+hdrBGColor+'" WIDTH="'+(menuWidth-1)+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'">&nbsp;<font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td></tr>')}
 
function addItem(text, link, target) {
if (!target) {target=linkTarget}
document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" ALIGN="'+linkAlign+'" WIDTH="'+(menuWidth-1)+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'">&nbsp;<A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</LAYER></ILAYER></TD></TR>')}
 
function addHdr(text) {
document.write('<tr><td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'">&nbsp;<font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')}
 
function endMenu() {
document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial">&nbsp;</font></td></TR></table>')
if (IE) {document.write('</DIV>')}
if (NS) {document.write('</LAYER>')}
if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);}
}
 
// Insert Generated Text Below
 
/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=100; // no quotes!!
staticYOffset=100; // no quotes!!
staticMode="advanced";
slideSpeed=20 // no quotes!!
waitTime=500; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes";
menuHeader="Навигация:";
menuWidth=110; // Must be a multiple of 10! no quotes!!
hdrFontFamily="Arial";
hdrFontSize="2";
hdrFontColor="#000000";
hdrBGColor="#DCFEFC";
hdrAlign="right";
hdrVAlign="center";
hdrHeight="20";
linkFontFamily="Arial";
linkFontSize="2";
linkBGColor="#DCFEFC";
linkOverBGColor="#04FEFC";
linkTarget="_top";
linkAlign="Right";
barBGColor="#04FEFC";
barFontFamily="Verdana";
barFontSize="3";
barFontColor="#000000";
barText="ГЛАВНОЕ МЕНЮ";
barVAlign="center";
barWidth=20; // no quotes!!
 
startMenu()
addItem('Главная', 'Главная.vbs', '_blank');
addItem('Работа', 'Работа.vbs', '_blank');
addItem('Музыка', 'Музыка.vbs', '_blank');
addItem('Видео', 'Видео.vbs', '_blank');
addItem('Программы', 'Программы.vbs', '_blank');
addItem('games', 'games.vbs', '_blank');
addItem('Учёба', 'Учёба.vbs', '_blank');
addItem('Доки (дистр)', 'Доки (дистр).vbs', '_blank');
addItem('текущая папка', 'текущая папка.vbs', '_blank');
addItem('HDD', 'Скока_своб_мегоф_на_HDD_v3.vbs', '_blank');
 
endMenu()
 
window.onload=initSlide


Я не проверял, делал на глаз.

Resager 21.08.2008 21:34
Андрей Параничев, большое спасибо!!! Благодарю бесконечно!!!!

Андрей Параничев 21.08.2008 21:45
Resager,
Не за что. Find & Replace "left" на "right" и одну td из таблицы переместил выше.

Resager 22.08.2008 21:56
а я все лефт менял на райт и ничего небыло... а вот тд, какой именно и в какой функции?


Часовой пояс GMT +3, время: 02:41.