| |
автор: MIGUR (09.07.2004 в 01:46) |
|
| | Привет всем помогите в решении такой проблемы:
Есть меню которое находится в файле menu (Jscript Script File) при установки его на страницу положение меню указывается в кординатах x и y при попытке запихнуть его в таблицу меню оказывается поверх него т.е выходит из табл.
НУжно сделать так чтобы menu находилось в таблице кто знает помогите:help: | |
| |
|
|
| |
автор: Olegatronics (09.07.2004 в 13:34) |
|
| |
для: MIGUR
(09.07.2004 в 01:46)
| | | Указать положение по Y, то бишь по вертикали... | |
| |
|
|
| |
|
|
| |
для: MIGUR
(09.07.2004 в 01:46)
| | | >при установки его на страницу положение меню указывается в кординатах x и y при попытке запихнуть его в таблицу меню оказывается поверх него
Это происходит потому что меню реализовано на слоях. В принципе, можно его запихнуть и в таблицу. Только надо править код.
1. Поставить блок, ответственный за вывод меню, прямо в ячейку таблицы нужной таблицы.
2. Убрать слои при выводе меню. Что нибудь там <div id="divMenu'+i+ '" style="position:absolute; .... надо убрать.
3. Восстановить после этого работоспособность кода (Первоначально работать не будет - точно)
Писать меню самому не очень хочется. Воспользуемся готовым.
Вот описание меню не в слоях, а в таблице. Там где я его нашел оно уже исчезло. Потому выкладываю здесь без ссылки на ресурс.
<html>
<head>
<title>Выпадающее меню на JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
Создаем стили, только для эффективного отображения нашего меню.
<style type="text/css">
.menu{
color : Gray;
font-family : sans-serif;
text-align : left;
text-decoration : none;
font-size : medium;
font-weight : bold;
}
a{
color : Green;
text-align : left;
font-size : medium;
font-style : italic;
text-decoration : none;
font-weight : bold;
}
</style>
<script language="JavaScript" type="text/javascript">
Два массива, первый определяет текст ссылок, второй сами ссылки.
var txt = new Array(); var links = new Array();
txt[0] = "Яндекс"; links[0] = "www.yandex.ru"
txt[1] = "Туковс"; links[1] = "www.tucows.com"
txt[2] = "Гугл"; links[2] = "www.google.com"
txt[3] = "Рамблер"; links[3] = "www.rambler.ru"
txt[4] = "Мета-юкрейн"; links[4] = "www.meta-ukraine.com"
txt[5] = "Арнольд"; links[5] = "www.r0.ru"
txt[6] = "Я"; links[6] = "www.ya.ru"
txt[7] = "Апорт"; links[7] = "www.aport.ru"
txt[8] = "Альтависта"; links[8] = "www.altavista.com"
txt[9] = "Масяня"; links[9] = "www.mult.ru"
txt[10]= "Программы"; links[10]= "www.download.ru"
var verify
Функция для создания меню. В зависимости от указанного значения глобальной переменной, выводит
контекстное меню.
function myFun(){
var test = document.getElementById("remove0");
if(test){
remFun()
}
if(verify == "first"){
find = document.getElementById("bg0");
find.bgColor="lime"
selector = 2
iterator = 0
}
else if(verify == "second"){
find = document.getElementById("bg1");
find.bgColor="lime"
selector = 5
iterator = 3
}
else{
find = document.getElementById("bg2");
find.bgColor="lime"
selector = 10
iterator = 6
}
for(counter=iterator; counter <= selector; counter++){
Переменная ex нужна для порядкового номера id.
var ex = counter - iterator;
var a = document.createElement("a");
a.href = links[counter];
a.id = "remove" + ex;
var node = document.createTextNode(txt[counter]);
a.appendChild(node);
var getEl = document.getElementById("removeThis" + ex)
getEl.bgColor = "yellow"
getEl.appendChild(a)
}
}
Удаление и изменение цвета.
function remFun(){
for(counter=0; counter<=4; counter++){
var remover = document.getElementById("removeThis" + counter);
if(remover){
remover.bgColor = "white";
if(counter < 3){
var tdrem = document.getElementById("bg" + counter);
tdrem.bgColor = "white"
}
var removeable = document.getElementById("remove" + counter);
if(!removeable){
return
}
else{
remover.removeChild(removeable)
}
}
}
}
Изменение цвета таблицы, когда на ней установлен курсор.
function hasCh(example){
var rem = document.getElementById(example);
var ver = rem.hasChildNodes()
if(!ver){
remFun()
}
else{
rem.bgColor="lightblue"
}
}
Изменение цвета таблицы, когда курсор покидает ячейку.
function hasCh2(example){
var rem = document.getElementById(example);
var ver = rem.hasChildNodes()
if(ver){
rem.bgColor="yellow"
}
}
</script>
</head>
<body>
А вот с таблицей придется поэкспериментировать. В частности с аттрибутом width, а также изменять
width ячеек. Это зависит от длины текста ссылки. То есть, желательно, проверить, чтобы при наведении курсора,
таблицу не форматировало произвольно. Код, который я здесь написал, корректно смотрится в IE6, NN7.1 и MF1.4 при
разрешении 1024x768 и, кажется, в более высоком разрешении, также неплох.
Его можно скопировать и просмотреть в действии, а затем заняться его изучением, если он подходит конечно.
Его слабая сторона - необходимо заранее определить длину таблицы, т. е. меню не будет выпадать поверх текста, как
в слоях.
<table border="0" width="280" align="left" height="186">
<tbody>
<tr>
<td rowspan=7 onMouseOver="remFun()"> </td>
<td colspan=2 onMouseOver="remFun()"> </td>
<td rowspan=7 onMouseOver="remFun()"> </td>
</tr>
<tr id="myid0">
<td onMouseOver="verify='first'; myFun()" width="150" id="bg0"><a class="menu" href="javascript:void(0)">Первое меню</a></td>
<td width="130" id="removeThis0" onMouseOver="hasCh('removeThis0')" onMouseOut="hasCh2('removeThis0')"></td>
</tr>
<tr id="myid1">
<td onMouseOver="verify='second'; myFun()" width="150" id="bg1"><a class="menu" href="javascript:void(0)">Второе меню</a></td>
<td width="130" id="removeThis1" onMouseOver="hasCh('removeThis1')" onMouseOut="hasCh2('removeThis1')"></td>
</tr>
<tr id="myid2">
<td onMouseOver="verify='third'; myFun()" width="150" id="bg2"><a class="menu" href="javascript:void(0)">Третье меню</a></td>
<td width="130" id="removeThis2" onMouseOver="hasCh('removeThis2')" onMouseOut="hasCh2('removeThis2')"></td>
</tr>
<tr id="myid3">
<td onMouseOver="remFun()"> </td>
<td width="130" id="removeThis3" onMouseOver="hasCh('removeThis3')" onMouseOut="hasCh2('removeThis3')"></td>
</tr>
<tr id="myid4">
<td onMouseOver="remFun()"> </td>
<td width="130" id="removeThis4" onMouseOver="hasCh('removeThis4')" onMouseOut="hasCh2('removeThis4')"></td>
</tr>
<tr id="myid5">
<td colspan=2 onMouseOver="remFun()"> </td>
</tr>
</tbody>
</table>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: MIGUR
(09.07.2004 в 01:46)
| | | Дизайнер привет, если ты в этом разбираешся то нимог бы помочь с этим вопросом :PLEASE:
>>>>>ФАИЛ MENU т.е (Jscript Script File)
<?php
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
//Opera didn't seem to like the padding in the layers, it messes up the background-images, so here's a version without it.
if(bw.opera5) document.write("<style>DIV.clSlide{padding:0px; background-image:url(' ')}\nDIV.clSlideSub{padding:0px; background-image:url(' ')}\nDIV.clSlideSub2{padding:0px; background-image:url(' ')}</style>")
function makeMenuObj(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.ref=bw.dom || bw.ie4? document:bw.ns4?eval(nest+"document.layers." +obj+".document"):0;
this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.offsetLeft;
this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.offsetTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.movey=b_movey
this.moveIt=b_moveIt; this.moveBy=b_moveBy; this.status=0;
this.bgImg=b_bgImg; this.obj = obj + "Object"; eval(this.obj + "=this");
this.clipTo=b_clipTo;
return this
}
function b_showIt(){this.css.visibility="visible"; this.status=1}
function b_hideIt(){this.css.visibility="hidden"; this.status=0}
function b_movey(y){this.y=y; this.css.top=this.y}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y}
function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x;this.css.top=this.y}
function b_bgImg(img){if(bw.ie||bw.dom)this.css.backgroundImage="url('"+img+"')"
else this.css.background.src=img
}
function b_clipTo(t,r,b,l,w){if(bw.ns4){this.css.clip.top=t;this.css.clip.right=r
this.css.clip.bottom=b;this.css.clip.left=l
}else{this.css.clip="rect("+t+","+r+","+b+","+l+")"; if(w){this.css.width=r; this.css.height=b}}}
function SlideMenuInit(){
oSlideMenu=new makeMenuObj('divSlideCont')
oSlideMenu.moveIt(menux,menuy)
oSlide=new Array()
for(i=0;i<menus.length;i++){
oSlide[i]=new makeMenuObj('divSlide'+i,'divSlideCont')
oSlide[i].subs=menus[i].subs
oSlide[i].sub=new Array()
oSlide[i].moveIt(0,mainheight*i)
oSlide[i].starty=oSlide[i].y
if(bw.opera) oSlide[i].css.paddingLeft="10px"
if(!menus[i].seperator) oSlide[i].bgImg(level0_regular)
for(j=0;j<oSlide[i].subs;j++){
oSlide[i].sub[j]=new makeMenuObj('divSlideSub'+i+"_"+j,'divSlideCont')
oSlide[i].sub[j].moveIt(10,oSlide[i].y+subheight*j+between)
oSlide[i].sub[j].starty=oSlide[i].sub[j].y
oSlide[i][j]=new Array()
oSlide[i][j].subs=menus[i][j].subs
oSlide[i][j].sub=new Array()
img=level1_round
if(oSlide[i][j].subs!=0){
if(j!=oSlide[i].subs-1) img=level1_sub
else img=level1_sub_round
oSlide[i].sub[j].css.color="white"
}else{
if(j!=oSlide[i].subs-1)img=level1_regular
}
oSlide[i].sub[j].origimg=img
oSlide[i].sub[j].bgImg(img)
for(a=0;a<oSlide[i][j].subs;a++){
oSlide[i][j].sub[a]=new makeMenuObj('divSlideSub'+i+"_"+j+"_"+a,'divSlideCont')
oSlide[i][j].sub[a].moveIt(20,oSlide[i].sub[j].y+subheight*a+between-2)
oSlide[i][j].sub[a].starty=oSlide[i][j].sub[a].y
oSlide[i][j][a]=new Array()
oSlide[i][j][a].subs=menus[i][j][a].subs
oSlide[i][j][a].sub=new Array()
if(a!=oSlide[i][j].subs-1) img=level2_regular
else img=level2_round
oSlide[i][j].sub[a].origimg=img
oSlide[i][j].sub[a].bgImg(img)
}
}
}
oSlideMenu.showIt()
}
var active=-1;var going;var isthere; var sactive=-1; var sisthere=-1; var s2active=-1; var s2isthere=-1
function swmenu(num,snum,s2num){
if(snum!=-1){
if(oSlide[num][snum].subs==0) return
}
if(s2num!=-1){
if(oSlide[num][snum][s2num].subs==0) return
}
if((num!=active || snum!=sactive || s2num!=s2active) && !going){going=true;isthere=0;sisthere=0;moveUp(num,snum,s2num)}
}
function moveUp(num,snum){
if(snum==-1){
for(i=0;i<oSlide.length;i++){
if(oSlide[i].y>oSlide[i].starty+pxspeed && active!=i) oSlide[i].moveBy(0,-pxspeed)
else{if(active!=i) oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty); isthere=i}
}
if(isthere<oSlide.length-1) setTimeout("moveUp("+num+","+snum+")",timspeed)
else swmenu2(num,snum)
}else{
if(num==oSlide.length-1) isthere=num
if(sactive!=-1){ //Is out!
//Slide subs
j=0
for(i=sactive+1;i<oSlide[num].sub.length;i++){
j++
if(oSlide[num].sub[i].y>oSlide[num].sub[i].starty+pxspeed) oSlide[num].sub[i].moveBy(0,-pxspeed)
else{oSlide[num].sub[i].moveIt(oSlide[num].sub[i].x,oSlide[num].sub[i].starty); sisthere=i}
}
//Slide main
for(i=num+1;i<oSlide.length;i++){
if(oSlide[i].y>oSlide[i].starty + oSlide[num].sub[sactive].y +subheight*j ) oSlide[i].moveBy(0,-pxspeed)
else{oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty + oSlide[num].sub[sactive].y +subheight*j ); isthere=i}
}
}else{ //Slide to the one clicked
for(i=num+1;i<oSlide.length;i++){
if(oSlide[i].y>oSlide[i].starty + snum*between+between) oSlide[i].moveBy(0,-pxspeed)
else{oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty + snum*between+between); isthere=i}
}
}
if(isthere<oSlide.length-1 || (sactive!=-1 && sisthere<oSlide[num].sub.length-1 && sactive!=oSlide[num].sub.length-1)) setTimeout("moveUp("+num+","+snum+")",timspeed)
else swmenu2(num,snum)
}
}
function swmenu2(num,snum){
isthere=0;
sisthere=0;
if(active>-1 && snum==-1){
//Hiding submenus
for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].hideIt()}
oSlide[active].bgImg(level0_regular)
oSlide[active].moveIt(0,oSlide[active].starty)
}
if(sactive>-1){
//Hiding submenus
for(j=0;j<oSlide[active][sactive].sub.length;j++){oSlide[active][sactive].sub[j].hideIt()}
oSlide[active].sub[sactive].bgImg(oSlide[active].sub[sactive].origimg)
oSlide[active].sub[sactive].moveIt(10,oSlide[active].sub[sactive].starty)
//Move back to place
for(i=sactive+1;i<oSlide[active].sub.length;i++){
oSlide[active].sub[i].moveIt(oSlide[active].sub[i].x,oSlide[active].sub[i].starty)
}
}
active=num
//Showing submenus
if(snum>-1){
sactive=snum
for(j=0;j<oSlide[num][snum].sub.length;j++){oSlide[num][snum].sub[j].showIt()}
oSlide[num].sub[snum].moveBy(10,3)
oSlide[num].sub[snum].bgImg(level1_round2)
}else{
sactive=-1
for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].showIt()}
oSlide[num].moveBy(10,3)
oSlide[num].bgImg(level0_round)
}
if(num!=oSlide.length-1) moveDown(num,snum)
else{
isthere=num
moveDown(num,snum)
}
}
function moveDown(num,snum){
//if(num==oSlide.length-1) isthere=num
for(i=num+1;i<oSlide.length;i++){
if(snum==-1){
if(oSlide[i].y<(oSlide[num].subs-1)*subheight+oSlide[i].starty+between-pxspeed) oSlide[i].moveBy(0,pxspeed)
else{oSlide[i].moveIt(oSlide[i].x,(oSlide[num].subs-1)*subheight+oSlide[i].starty+between); isthere=i}
}else{
if(oSlide[i].y<(oSlide[num].subs-1)*subheight+oSlide[i].starty+between-pxspeed + (oSlide[num][snum].subs-1)*subheight+between) oSlide[i].moveBy(0,pxspeed)
else{oSlide[i].moveIt(oSlide[i].x,(oSlide[num].subs-1)*subheight+oSlide[i].starty+between + (oSlide[num][snum].subs-1)*subheight+between); isthere=i}
}
}
if(snum!=-1){
for(i=snum+1;i<oSlide[num].sub.length;i++){
if(oSlide[num].sub[i].y<(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub[i].starty+between-pxspeed) oSlide[num].sub[i].moveBy(0,pxspeed)
else{oSlide[num].sub[i].moveIt(oSlide[num].sub[i].x,(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub[i].starty+between); sisthere=i}
}
}
if(snum==-1){
if(isthere<oSlide.length-1) setTimeout("moveDown("+num+","+snum+")",timspeed)
else going=false
}else{
if(isthere<oSlide.length-1 || (sisthere<oSlide[num].sub.length-1 && snum!=oSlide[num].sub.length-1)) setTimeout("moveDown("+num+","+snum+")",timspeed)
else going=false
}
}
var test=0
menus=new Array(); var a=0; var b=0; var c=0; var d=0
function makeMenu(type,text,lnk,target,end){
str=""; tg="";
if(target) tg='target="'+target+'"'
if(!lnk) lnk="#"
self.status=lnk
if(a==0) str='<div id="divSlideCont">\n'
if(type=="top"){
menus[a]=new Array();
if(text=="seperator"){
str+='\t<div id="divSlide'+a+'" class="clSlide"></div>\n'
menus[a].seperator=1
}else{
str+='\t<div id="divSlide'+a+'" class="clSlide"><a href="'+lnk+'" '+tg+' onclick="swmenu('+a+',-1,-1); if(bw.ie || bw.ns6) this.blur(); '
if(lnk=="#") str+='return false'
str+='" class="clSlideLinks"> '+text+'</a><br></div>\n'
}
menus[a].subs=0; a++; b=0
}else if(type=="sub"){
str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(b)+'" class="clSlideSub"><a '+tg+' onclick="swmenu('+(a-1)+','+b+',-1); if(bw.ie || bw.ns6) this.blur(); '
if(lnk=="#") str+='return false'
str+='" href="'+lnk+'" class="clSlideSubLinks"> '+text+'</a><br></div>\n'
b++; menus[a-1].subs=b; menus[a-1][b-1]=new Array(); c=0; menus[a-1][b-1].subs=0
}else if(type=="sub2"){
str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(b-1)+'_'+c+'" class="clSlideSub2"><a '+tg+' href="'+lnk+'" class="clSlideSub2Links"> '+text+'</a><br></div>\n'
c++; menus[a-1][b-1].subs=c; menus[a-1][b-1][c-1]=new Array(); d=0; menus[a-1][b-1][c-1].subs=0
}
if(end) str+="</div>"
document.write(str)
}
function preLoadBackgrounds(){
for(i=0;i<arguments.length;i++){
this[i]=new Image()
this[i].src=arguments[i]
}
return this
}
?>
|
>>>>> На странице меню прописывается так:
<?php
$menu="
//Menu 0
makeMenu('top','ГЛАВНАЯ','index.php')
//Menu 1
makeMenu('top','HTML')
makeMenu('sub','НОВЫЕ СКРИПТЫ','index.php?dir=html&page=1')
makeMenu('sub','ВСЕ СКРИПТЫ','index.php?dir=html&page=2')
//Menu 2
makeMenu('top','PORTFOLIO')
makeMenu('sub','ART','index.php?dir=port&page=1')
makeMenu('sub','SITE','index.php?dir=port&page=2')
//Menu 3
makeMenu('top','СВЯЗЬ')
makeMenu('sub','ФОРУМ','index.php?dir=connect&page=3')
makeMenu('sub','ГОСТЕВАЯ КНИГА','index.php?dir=connect&page=2')
makeMenu('sub','ЧАТ','index.php?dir=connect&page=1')
makeMenu('sub','E-MAIL','')
//Menu 4
makeMenu('top','LINKS','index.php?dir=links&page=1')
//Menu 5
makeMenu('top','MIGUR','index.php?dir=MIGUR&page=mig')";
<script>
between=28
mainheight=25
subheight=22
pxspeed=13
timspeed=15
menuy=65 // ОУ
menux=50 // ОХ
level0_regular=\"img/1-1.gif\"
level0_round=\"img/1-2.gif\"
level1_regular=\"img/2-1.gif\"
level1_round=\"img/2-2.gif\"
level1_sub=\"img/level1_sub.gif\"
level1_sub_round=\"#\"
level1_round2=\"#\"
level2_regular=\"#\"
level2_round=\"#\"
preLoadBackgrounds(1-1,1-2,2-1,2-2)
$menu
onload=SlideMenuInit;
</script>
?>
|
| |
| |
|
|
| |
|
|
| |
для: MIGUR
(11.07.2004 в 04:00)
| | | Ну что ж, попробовал я его адаптировать… примерно по тому сценарию, что я описал выше. Получилось запихнуть его в таблицу, но проблемы вылезли в другом месте. Только пришел я к выводу, что легче написать другое меню, чем адаптировать это. Поищи меню не на слоях, а в таблицах. Пример такого меню я привел выше.
Предлагаю более простой способ решения проблемы.
Так как размеры меню известны, то не вставляя меню в таблицу можно создать под ним область без текста. Теми же самыми таблицами. А меню так и останется в слоях поверх таблицы.
| |
| |
|
|
|
