Компьютерный форум OSzone.net  

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)
-   Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)
-   -   Выпыдающее меню (http://forum.oszone.net/showthread.php?t=31509)

CTOLbHuK 07-10-2003 17:54 215650

Как сделать выпадающее меню типа наводишь на него (или щелкаешь) и там открывается меню. Как это сделать? На страничке само собой.

Blast 07-10-2003 18:14 215651

CTOLbHuK
Лежит у меня давненько уже одна менюшка... хороша тем что полность настраивается от цвета и размера пунктов до шрифта, и делается это довольно легко... но только вот не знаю как она себя ведет на браузерах кроме ИЕ и Опера (на этих работает, только пробовал на Опере 7.11, про остальные не скажу...)
если есть интерес посмотреть забирай здесь.

Добавлено:

вот перечитал ридми там... работает на броузерах которые поддерживают модель DOM (соответственно, IE5++, NN6++, Mozilla ну и Опера, но далеко не все версии...)

Agent Comanche 07-10-2003 18:36 215652

CTOLbHuK
Выпадающее меню - скрытый div, который становится видимым при наступлении события onmouseover(при наведении курсора) или onclick(при нажании).
Цитата:

Как это сделать?
На JavaScript'e и желательно самому.

Volk 07-10-2003 22:40 215653

Agent Comanche
Цитата:

На JavaScript'e и желательно самому.
Ну , а если не силён в этом? Ведь спрашивают конкретную помощь!

Agent Comanche 08-10-2003 01:08 215654

Volk
Принцип я сказал, осталось лишь написать.

MelouN 08-10-2003 15:43 215655

А у меня белеберду какую то пишет, когдв в опере открываю!:(

Agent Comanche 08-10-2003 17:22 215656

ТАм воды много. Жуткий код.

Посему пишите сами ;)

Prisoner 20-10-2003 03:44 215657

Хм...  имхо, 4k все же лучше чем продукт из-под всяких генераторов %\. Да и к тому же, Агент, если есть компонент и он мне нужен, я ни в коем случае не буду переписывать его заново - придумывать велосипед, зачем?

PS Ничего личного, просто тему запостил с вопросом, а он решился как-то быстро... вот я и пишу всякие глупости :)

[s]Исправлено: Prisoner, 7:18 20-10-2003[/s]

e80 20-10-2003 10:47 215658

Тебе листинг своей менюшки сбросить (~3кб IE,MacIE,Netsc,Opera,Mozilla) или как,
а то идею уже действительно написали

Prisoner 21-10-2003 04:14 215659

e80
В принципе проблему я решил, но не откажусь поглядеть и на другие решения, по сему скинь, пожалуйста.

e80 21-10-2003 11:52 215660

Код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"></head>
<body topmargin=0 leftmargin=0>
<script language="javascript">
var code='code';var url="url";var sub="sub";var w="w";
var offc="#990000";
var onc="#cc7f7f";
var count=0;
var MyMenu = [
        {text:"Издател. дом",w:130},
{text:"Журнал 1",w:150,url:"test_java.htm",
sub:[
{text:"2002 год",w:100,url:"asdasd",
sub:[{text:"№1",w:210,url:"dafsadf"},
{text:"№2",w:210,url:"dafsadf"}
]
},
{text:"2003 год",w:100,
sub:[{text:"it1",w:210},
{text:"it2",w:210}
]
}
]
},
{text:"Журнал \"222222\"",w:150,
sub:[
{text:"2002 год",w:100,url:"asdasd",
sub:[{text:"№1",w:210,url:"dafsadf"},
{text:"№2",w:210,url:"dafsadf"}
]
},
{text:"2003 год",w:100,
sub:[{text:"it1",w:210},
{text:"it2",w:210}
]
}
]
},
{text:"Подписка",w:90,
sub:[
{text:"Журнал \"1\"",w:150},
{text:"Журнал \"2\"",w:150},
{text:"Представительства",w:150}
]},
{text:"Гостевая книга",w:110},
{text:"Контакты",w:75}
];
ver=navigator.appVersion;
nver=parseInt(ver);
agent=navigator.userAgent;
dom=document.getElementById?1:0;
opera=window.opera?1:0;
ie5=(ver.indexOf("MSIE 5")>-1&&dom&&!opera)?1:0;
ie6=(ver.indexOf("MSIE 6")>-1&&dom&&!opera)?1:0;
ie4=(document.all&&!dom&&!opera)?1:0;
ie=ie4||ie5||ie6;
mac=agent.indexOf("Mac")>-1;
ns6=(dom&&parseInt(ver)>=5)?1:0;
ie3=(ver.indexOf("MSIE")&&(nver<4));
hotjava=(agent.toLowerCase().indexOf('hotjava')!=-1)?1:0;
ns4=(document.layers&&!dom&&!hotjava)?1:0;
bw=(ie6||ie5||ie4||ns4||ns6||opera);
ver3=(hotjava||ie3);
opera7=((agent.toLowerCase().indexOf('opera 7')>-1) || (agent.toLowerCase().indexOf('opera/7')>-1));
operaOld=opera&&!opera7;

var timer;
function hide(o){
ns4?o.visibility="hide":o.style.visibility="hidden";
}
function show(o){
ns4?o.visibility="show":o.style.visibility="visible";
}
function selectlayer(name){
return ns4?document.layers[name]:(document.all?document.all[name]:document.getElementById(name));
}
function hideb(ob,block,p){
  var res=0;
  if (block.length){
  for (var i=0;i<block.length;i++) {
    if (block[i].sub) {
  res=res+hideb(ob,block[i].sub,p);
};
if (block[i].id==ob) {
res++;
}
  };
  } else {
    if (block.sub) {
  res=res+hideb(ob,block.sub,p);
};
if (block.id==ob) {
  res++;
}
  }
  if (!res) for (i=0;i<block.length;i++) {
  hide(block[i].mm);
  hide(block[i].mmf);
  hide(block[i].mmb);
  };
return res;
};
function showb(ob,block,p){
  var res=0;
  if (block.length){
  for (var i=0;i<block.length;i++) {
if (block[i].sub) {if (block[i].id==ob) {
showb(ob,block[i].sub,1);
} else {
showb(ob,block[i].sub,0);
};
};
  };
  } else {
    if (block.sub) {
if (block.id==ob) showb(ob,block.sub,1)
else showb(ob,block.sub,0);
};
  }
  if (p==1) for (i=0;i<block.length;i++) {
show(block[i].mm);
show(block[i].mmf);
show(block[i].mmb);
 ns4?block[i].mm.bgColor=offc:block[i].mm.style.background=offc;
  };
};

function hidem(obb) {
  for (var i=0;i<MyMenu.length;i++) {
     hideb(obb,MyMenu[i],1);
  }
};
function showm(obb,obb2) {
  clearTimeout(timer);
  hidem(obb);
  count++;
ns4?obb2.bgColor=onc:obb2.style.background=onc;
  for (var i=0;i<MyMenu.length;i++) {
     showb(obb,MyMenu[i],0);
  }
};
function hidetimer(obb) {
count--;
ns4?obb.bgColor=offc:obb.style.background=offc;
if (count==0) {
timer=setTimeout("hidem('0')",1000);
        }
};
function ourl(t){
  open(t);
  return 0;
};
function CreateItem(x,y,w,items,lev,_id,s){
document.write( ns4?
'<layer id=mmf'+_id+' z-index="'+(9+lev*3)+'" left="'+(x+2)+'" top="'+(y+2)+'" width="'+w+'" height="20"'+' bgcolor="#aaaaaa"'+' style="" ></layer>'+
'<layer id=mmb'+_id+' z-index="'+(10+lev*3)+'" left="'+x+'" top="'+y+'" width="'+(w+1)+'" height="21"'+' bgcolor="black"'+' style=""></layer>'+
'<layer id=mm'+_id+' z-index="'+(11+lev*3)+'" left="'+(x+1)+'" top="'+(y+1)+'" width="'+(w-1)+'" height="19"'+' bgcolor="'+offc+'" style=""  onmouseout="hidetimer(this)" onmouseover="showm(\''+_id+'\',this)" '+(items.url?'onclick="window.open(\''+items.url+'\',\'_self\')"':"")+'><center>'+(items.url?'<a href="'+items.url+'">':'')+'<font style="font: 12px">'+(items.text+((s)?' ...':''))+'</center>'+(items.url?'</a>':'')+'</font></layer>'
:
'<div id=mmf'+_id+' style="width: '+w+'px; height: 20px; position: absolute; top: '+(y+2)+'px; left: '+(x+3)+'px; background: #BB8080; z-index:'+(9+lev*3)+'"></div>'+
'<div id=mmb'+_id+' align="center" style="width: '+(w+1)+'px; cursor: hand; position: absolute; left: '+(x-1)+'px; top: '+(y-1)+'px; height: 21px; background: #330000; text-align: left;  z-index:'+(10+lev*3)+'"></div>'+
'<div id=mm'+_id+' align="center" style="width: '+(w-1)+'px; cursor: hand; position: absolute; left: '+x+'px; top: '+y+'px; height: 19px;color:white; background:'+offc+'; text-align: left;  z-index:'+(11+lev*3)+'" onmouseout="javascript:hidetimer(this)" onmouseover="javascript:showm(\''+_id+'\',this)" '+(items.url?'onclick="window.open(\''+items.url+'\',\'_self\')"':"")+'><center>'+items.text+((s)?' ...':'')+'</center></div>'
);
};
function CreateBlock(x,y,block,lev,_id){
for (var i=0;i<block.length;i++){
CreateItem( x, ((lev!=1)?y+i*20:y), block[i].w, block[i], lev, _id+'_'+i, (block[i].sub)?1:0);
block[i].mm=selectlayer('mm'+_id+'_'+i);
block[i].mm.mitem=block[i];
block[i].id=_id+'_'+i;
block[i].mmf=selectlayer('mmf'+_id+'_'+i);
block[i].mmb=selectlayer('mmb'+_id+'_'+i);
if (block[i].sub) {
CreateBlock(6+(lev==1?x:x+block[i].w-6),3+((lev!=1)?((lev!=0?3:15)+y+i*20):y+18),block[i].sub,lev+1,_id+'_'+i);
}
x=(lev==1?x+block[i].w:x);
};
};
function CreateMenu(menu) {
  CreateBlock(76,110,menu,1,'');
};
CreateMenu(MyMenu);
hidem('0');
count=0;
</script>

</body>
</html>

Енто одна из версий

Добавлено:

<off>Блин, какого он в тегах code /code
смайликов навставлял ?????</off>

Prisoner 21-10-2003 20:40 215661

За код спасибо, за смайлики в коде тоже :).

mar 23-10-2003 17:42 215662

Я тут, по-моему когда-то уже кидала:
http://www.bio.pu.ru/~mar/javascript/menu.htm
работает в IE от 4, NN от 4, Mazilla, OPERA - все
исапользуется DOM, слои и тд в зависимости от типа броузера
Тип броузера отличается не по имени/версии, а по поддержке опций
Код закомментирован

lossen 24-10-2003 07:29 215663

e80
че-то не пашет... весь код скопировал вставил и пустая страница... (IE6)

e80 24-10-2003 12:00 215664

lossen, я тете на мыло ее затулил,
а не пашет скорее всего потому, что форум теги побил, и смайликов навставлял

Prisoner 24-10-2003 14:42 215665

e80
Продублируй если не трудно и на мою мыльницу ибо проблема такая же...


Время: 02:09.

Время: 02:09.
© OSzone.net 2001-