|
JavaSript Меню со скроллингом
Здесь мы рассмотрим ещё один скрипт меню, его особенность в том, что оно занимает мало места на странице, так как появляется только при наведении на его хидер.
ПРИМЕР РАБОТЫ СКРИПТА СМОТРИМ ТУТ
Код:
<SCRIPT language=JavaScript1.2>
NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")
tempBar='';barBuilt=0;lastY=0;sI=new Array();moving=setTimeout('null',1);
function moveOut() {if (parseInt(ssm.left)<0) {clearTimeout(moving);
moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}};
function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}
function moveBack1() {if (parseInt(ssm.left)>(-menuWidth)) {clearTimeout(moving);
moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}}
function slideMenu(num){ssm.left = parseInt(ssm.left)+num;
if (NS) {bssm.clip.right+=num;bssm2.clip.right+=num;
if(bssm.left+bssm.clip.right>document.width)document.width+=num}}
function makeStatic() {
winY=(IE)?document.body.scrollTop:window.pageYOffset;
if (winY!=lastY&&winY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - YOffset + staticYOffset);}
else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset&&winY<=YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));}
else {smooth=0}
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
bssm.top=parseInt(bssm.top)+smooth
lastY = lastY+smooth;
setTimeout('makeStatic()', 10)}
function buildBar() {
if(barText.toLowerCase().indexOf('<img')>-1) {tempBar=barText}
else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<br>"}}
document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'" align=center><font style="'+barFontstyle+'"><B>'+tempBar+'</B></font></td>')}
function initSlide() {
if (NS6||IE){ssm=(NS6)?document.getElementById("thessm"):document.all("thessm");
bssm=(NS6)?document.getElementById("basessm").style:document.all("basessm").style;
bssm.clip="rect(0 "+ssm.offsetWidth+" "+(((IE)?document.body.clientHeight:0)+ssm.offsetHeight)+" 0)";
bssm.visibility="visible";ssm=ssm.style;if(NS6)bssm.top=YOffset}
else if (NS) {bssm=document.layers["basessm1"];
bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"];
bssm2.clip.left=0;ssm.visibility = "show";}
if (menuIsStatic=="yes") makeStatic();}
function buildMenu() {
if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+' ;Top : '+YOffset+' ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+' ;Top : 0px ;Z-Index : 21;'+((IE)?"width:1px":"")+'" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show" onload="initSlide()"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><TR><TD>')}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'">');
for(i=0;i<sI.length;i++) {
if(!sI[i][3]){sI[i][3]=menuCols;sI[i][5]=menuWidth-1}
else if(sI[i][3]!=menuCols)sI[i][5]=Math.round(menuWidth*(sI[i][3]/menuCols)-1);
if(sI[i-1]&&sI[i-1][4]!="no"){document.write('<TR>')}
if(!sI[i][1]){
document.write('<TD BGCOLOR="'+hdrBGColor+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+sI[i][5]+'" COLSPAN="'+sI[i][3]+'" style="'+hdrFontstyle+'"><b> '+sI[i][0]+'</TD>')}
else {if(!sI[i][2])sI[i][2]=linkTarget;
document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+sI[i][5]+'" HEIGHT="'+hdrHeight+'" COLSPAN="'+sI[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A href="/click?http://'+sI[i][1]+'" target="'+sI[i][2]+'" CLASS="ssmItems">'+sI[i][0]+'</DIV></LAYER></ILAYER></TD>')}
if(sI[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1}
if(sI[i][4]!="no"){document.write('</TR>')}}
document.write('</table>')
if (NS6){document.write('</TD></TR></TABLE>')}
if (IE||NS6) {document.write('</DIV></DIV>');setTimeout('initSlide();', 1)}
if (NS) {document.write('</LAYER></ILAYER></LAYER>')}}
function addHdr(name, cols, endrow){sI[sI.length]=[name, '', '', cols, endrow]}
function addItem(name, link, target, cols, endrow){if(!link)link="javascript://";sI[sI.length]=[name, link, target, cols, endrow]}
YOffset=100;
staticYOffset=20;
XOffset=1;
slideSpeed=10;
waitTime=200;
menuBGColor="#375A68";
menuIsStatic="yes";
menuWidth=100;
menuCols=3;
hdrBGColor="#66CCCC";
hdrFontstyle="color: #112222; font-family: verdana, arial, sans-serif; font-size:13px";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="18";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="#CCCC99";
linkOverBGColor="#BDC6E0";
linkTarget="_top";
linkAlign="left";
barBGColor="#CCCC99";
barFontstyle="color:#112222; font-family: verdana, arial, sans-serif; font-size:13px"
barVAlign="center";
barWidth=18;
barText='m e n u'; // <IMG> tag supported: '<img src="some.gif" border=0>'
addHdr('заголовок:');
addItem('ссылка 1', 'http://www.shram.kiev.ua', '+');
addItem('ссылка 2', 'http://www.shram.kiev.ua', '+');
addItem('ссылка 3', 'http://www.shram.kiev.ua', '+');
addHdr('заголовок:');
addItem('ссылка 4', 'http://www.shram.kiev.ua', '+');
addItem('ссылка 5', 'http://www.shram.kiev.ua', '+');
addItem('ссылка 6', 'http://www.shram.kiev.ua', '+');
buildMenu();
//-->
</SCRIPT>
Скрипт достаточно большой (около 6 Kb), но чтобы настроить меню потребуется лишь последний блок его кода, в котором можно менять любой параметр:
YOffset=100; координата вывода от верхнего края
staticYOffset=100; координата вывода от верхнего края в статике
XOffset=1; координата вывода от левого края
slideSpeed=10; скорость скольжения по странице (menuIsStatic="yes")
waitTime=200; время открытия - закрытия
menuBGColor="#375A68" цвет рамки меню
menuIsStatic="yes" если указать "no" то меню не будет смещаться по странице
menuWidth=100; ширина меню
menuCols=3; размер рамки
hdrBGColor="#66CCCC" фон, цвет и шрифт заголовка
hdrFontstyle="color: #112222; font-family: verdana, arial, sans-serif; font-size:13px"
hdrAlign="left" выравнивание текста заголовка
hdrVAlign="center"
hdrHeight="18" высота заголовка
linkFontFamily="Verdana" шрифт ссылок
linkFontSize="2" размер шрифта ссылок
linkBGColor="#CCCC99" цвет фона ссылок
linkOverBGColor="#BDC6E0"цвет фона ссылок при наведении
linkTarget="_top" открытие ссылки в новом окне
linkAlign="left" выравнивание текста ссылок
barBGColor="#CCCC99" цвет фона и шрифт бара menu
barFontstyle="color:#112222; font-family: verdana, arial, sans-serif; font-size:13px"
barVAlign="center" выравнивание текста бара menu
barWidth=18;ширина бара menu
barText='m e n u';текст бара menu
'<img src="bar.gif" border=0>' для вывода картинки вместо текста бара можно вставить
Далее идёт стандартный блок названия и адресов ссылок:
addHdr('заголовок:');
addItem('ссылка 1', 'http://adress', '+');
addItem('ссылка 2', 'http://adress', '+');
addItem('ссылка 3', 'http://adress', '+');
addHdr('заголовок:');
addItem('ссылка 4', 'http://..', '+');
addItem('ссылка 5', 'http://..', '+');
addItem('ссылка 6', 'http://..', '+');
Created/Updated: 25.05.2018
☕ Якщо ви вважаєте ці поради українською корисними, можете підтримати автора і, звичайно, отримуйте задоволення!
📩 Шановні, якщо хочете додати або відредагувати, надішліть повідомлення через форму контакту.