HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - Drop Down Menue

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

Drop Down Menue

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   JavaScript
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
adicss
Forumsteilnehmer


Anmeldungsdatum: 08.06.2006
Beiträge: 6

BeitragVerfasst am: 29.07.2006 22:37:39    Titel: Drop Down Menue Antworten mit Zitat

Hier ein sehr schöner Code mit dem ich nicht anfangen kann...!


Code:
<html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: Orange web soft team - http://javer.narod.ru/dropdinst.htm
-->

<script>
var ns ;
var ie ;
var n6;
var W;
function BrowserCheck() {
var b = navigator.appName
if (b=="Netscape") {this.b = "ns";ns=true;}
else if (b=="Microsoft Internet Explorer") {this.b = "ie";ie=true;}
else this.b = b
this.version = navigator.appVersion;
this.v = parseInt(this.version);
if(ns&&this.v>4){ns=false;n6=true;};
if(ns||n6){W=window.innerWidth-16}else{W=document.body.offsetWidth-20;}
}

function TreeItem(id,parid,name,link,target,image)
{
this.vname="DdMenu"+TreeItem.dmcount;
TreeItem.dmcount++;
this.image=image;
this.name=name;
this.frname="";
this.id=id;
this.parentItem=null;
this.parid=parid;
this.link=link;
this.target=target;
this.items=new Array();
this.itemCount=0;
this.Opened=true;
this.fntColor="#202080";
this.selFntColor="#4040A0";
this.fntSize=2;
this.css=null;
this.bckColor="#CCDDFF";
this.selBckColor="#FFFFFF";
this.alinkColor="#ffff00";
this.arrIm="/data/ex_823/dhtml_menu_img.gif";
this.xpos=0;
this.ypos=0;
this.selected=0;
this.height=600;
this.width=150;
this.iHeight=21;
this.imWidth=18;
this.focus=-1;
this.bSize=2;
this.tW=0;
this.tH=0;
this.bColor="#AACCFF"
this.WriteCSS = TreeItemWriteCSS;
this.Show = TreeItemShow;
this.Add = TreeItemAdd;
this.WriteDiv = TreeItemWriteDiv;
this.Get = TreeItemGet;
this.A = TreeItemA;
this.align="vert";
this.moveHandler=TreeItemMove;

this.downHandler=TreeItemDown;

this.Reset=TreeItemReset;
this.EventInit=TIEventInit;
this.Write=TreeItemWrite;
this.normText="";
this.selText=""
eval(this.vname + "=this");
}

function TreeItemGet(id)
{
if(id==this.id) return this;
for(var i=0;i<this.itemCount;i++)
{
It=this.items[i].Get(id);
if(It!=null) return It;
}
return null;
}
function TreeItemA(id,parid,name,link,target,image)
{
It=new TreeItem(id,parid,name,link,target,image);
this.Add(It);
}
function TreeItemAdd(item)
{
item.Opened=false;
It=this.Get(item.parid);
status="item got "+item.id;
if(item.parid==this.id)
{

item.width=this.width;
item.bckColor=this.bckColor;
item.selBckColor=this.selBckColor;
item.fntColor=this.fntColor;
item.fntSize=this.fntSize;
item.iHeight=this.iHeight;
item.imWidth=this.imWidth;
item.arrIm=this.arrIm;
item.selFntColor=this.selFntColor;
this.items[this.itemCount]=item;
item.parentItem=this;
item.bSize=this.bSize;
item.bColor=this.bColor;
//if(ie||n6)
item.visibility="hidden";
//if(ns)item.visibility="hide";
this.itemCount++;
return;
}
if(It!=null) {It.Add(item);return;}
}

function TreeItemWriteDiv()
{
if(this.itemCount<1) return false;
document.write("<DIV ID='"+this.vname+"'><table border='"+this.bSize+"' width='"+this.tW+"' height='"+this.tH+"' bordercolor='"+this.bColor+"' ><tr><td>");
for(var i=0;i<this.itemCount;i++)
{
ref=this.items[i].name;
im="";im1="";cl="";scl="";
cl=" color='"+this.fntColor+"'";scl=" color='"+this.selFntColor+"'";
if(this.items[i].image!="")im1="<img src='"+this.items[i].image+"' width='"+this.imWidth+"' height='"+this.iHeight+"' border=0>";
w=this.width-this.imWidth-this.iHeight;
if(this.items[i].itemCount>0&&this.arrIm!="")im="<img src='"+this.arrIm+"' height='"+this.iHeight+"' width='"+this.iHeight+"' border=0>";
this.items[i].normText="<table border='0' width='"+this.width+"' cellspacing='0' height='"+this.iHeight+"' cellpadding='0'><tr><td width ="+this.imWidth+">"+im1+"</td><td width= '"+this.width+"' ><font "+cl+" size='"+this.fntSize+"'><div id='"+this.items[i].vname+"t' >"+ref+"</div></font></td><td width="+this.iHeight+">"+im+"</td></tr></table>";
this.items[i].selText="<table border='0' width='"+this.width+"' cellspacing='0' height='"+this.iHeight+"' cellpadding='0'><tr><td width ="+this.imWidth+">"+im1+"</td><td width= '"+this.width+"' ><font "+scl+" size='"+this.fntSize+"'>"+ref+"</font></td><td width="+this.iHeight+">"+im+"</td></tr></table>";
document.write("<DIV ID='"+this.items[i].vname+"i' >");
document.write(this.items[i].normText);
document.write("</DIV>\r\n");
if(ie){this.items[i].ilayer=document.all[this.items[i].vname+"i"];this.items[i].tlayer=document.all[this.items[i].vname+"t"];}
if(n6){this.items[i].ilayer=document.getElementById(this.items[i].vname+"i");
this.items[i].tlayer=document.getElementById(this.items[i].vname+"t");
this.items[i].tlayer.style.color=this.items[i].fntColor;
this.items[i].tlayer.style.fontSize=6+2*this.items[i].fntSize+"pt";
};
if(ns)this.items[i].ilayer=eval("document."+this.vname+".document."+this.items[i].vname+"i");
}
document.write("</td></tr></table></DIV>\r\n");
for(var i=0;i<this.itemCount;i++)
{
this.items[i].WriteDiv();
}
if(ie){this.layer=document.all[this.vname];this.css=this.layer.style;}
if(n6){this.layer=document.getElementById(this.vname);this.css=this.layer.style;}
if(ns){this.layer=eval("document."+this.vname);this.css=this.layer;}
}
function TIEventInit()
{
 for(var i=0;i<this.itemCount;i++)
 {
 this.items[i].EventInit();
 }
for(var i=0;i<this.itemCount;i++){
var style=this.items[i].ilayer;
style.onmouseover=new Function(this.vname+".moveHandler("+i+");return false;");
style.onmousedown=new Function(this.vname+".downHandler("+i+");return false;");
if(ns)style.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}

status="Menu inited"+this.id;
}
function TreeItemWriteCSS()
{
var dx;
var dy;
var bCol=(ns)?"layer-background-color:" : "background-color:";
if(this.align=="vert"){
Height=this.itemCount*this.iHeight+2*this.bSize;
Width=this.width+2*this.bSize;
dx=0;
dy=this.iHeight;
}else
{
Height=this.iHeight+2*this.bSize;Width=(this.width+2)*this.itemCount+2*this.bSize;
dy=0;
dx=this.width+2;
}
this.tH=Height; this.tW=Width;
if(this.itemCount>0){
if(this.parentItem==null)document.write("<STYLE TYPE='text/css'><!--");
document.write("#"+this.vname+" {position:absolute;");
document.write(";left:"+this.xpos+"px;top:"+this.ypos+"px;width:"+Width+"px;");
document.write("visibility: "+this.visibility+"; cursor: hand; z-index:1;}\r\n");
for(var i=0;i<this.itemCount;i++)
{
var nxpos=this.xpos+this.width;
var nypos=this.ypos+i*this.iHeight;
if(this.align!="vert")
{
nxpos=this.xpos+i*this.width;
nypos=this.ypos+this.iHeight;
}
if(nxpos+this.width>W) nxpos=nxpos-2*this.width;
this.items[i].xpos=nxpos;this.items[i].ypos=nypos;
 document.write("#"+this.items[i].vname+"i {position:absolute;"+bCol+this.items[i].bckColor);
document.write(";top:"+(i*dy+this.bSize)+"px;left:"+(i*dx+this.bSize)+"px"+";width:"+this.width+"px;");
document.write("height:"+this.iHeight+"px; z-index:1;}\r\n");

this.items[i].WriteCSS();
}
if(this.parentItem==null)document.write("--></STYLE>\r\n");
}
}
function TreeItemShow(o)
{
if(this.itemCount<1) return;
this.focus=-1;
if(o==1)
{
this.css.visibility=(ns)? "show":"visible";
}
else
{
for(var i=0;i<this.itemCount;i++)this.items[i].Show(0);
this.css.visibility=(ns)? "hide":"hidden";
}
}


function TreeItemMove(i)
{
if(this.itemCount<1)return;
sel=i;
if(sel!=this.focus||sel==0)
{
this.items[this.selected].Show(0);
this.items[sel].Show(1);
if(sel!=this.focus){
var c1=this.items[this.selected].bckColor;
var c2=this.items[sel].selBckColor
if(ie||n6){
this.items[this.selected].ilayer.style.backgroundColor=c1;
this.items[sel].ilayer.style.backgroundColor=c2;
this.items[this.selected].ilayer.style.background=c1;
this.items[sel].ilayer.style.background=c2;
this.items[this.selected].tlayer.style.color=this.items[this.selected].fntColor;
this.items[sel].tlayer.style.color=this.items[sel].selFntColor;
//this.items[sel].tlayer.style.fontSize="8pt"
//for(r in this.items[sel].tlayer.style) alert(r+"="+this.items[sel].tlayer.style[r]);
}
if(ns)
{
var style=this.items[this.selected].ilayer;
var style1=this.items[sel].ilayer;
style.document.bgColor=c1;
style1.document.bgColor=c2;
this.Write(this.selected,this.items[this.selected].normText);
this.Write(sel,this.items[sel].selText);
}

}
this.selected=sel;this.focus=sel;
}
}

function TreeItemDown(i)
{
sel=i;
if(this.items[sel].link!=""){
location.href=this.items[sel].link;
}
}
function TreeItemReset()
{
for(var i=0;i<this.itemCount;i++)this.items[i].Show(0);
this.focus=-1;
}
function TreeItemWrite(i,text)
{
if(n6||ie) this.items[i].ilayer.innerHTML=text;
if(ns){
var style=this.items[i].ilayer;
style.document.open();
style.document.write(text);
style.document.close();
}
}
TreeItem.dmcount=0;



function MenuBuild()//Building and configuring menu
{

is = new BrowserCheck()//Checking browser version
TE=new TreeItem(0,0,"items2","","");//creating menu object
TE.xpos=150;TE.ypos=55;//x and y position
TE.align="hor";//alignment "vert" - vertical "hor" - horizontal
TE.width=150;//column width
TE.fntSize="2";//font size
TE.iHeight=20;//item height
TE.imWidth=20;//icon image width
/*
TE.bckColor="#FFFFFF";//back color
TE.selBckColor="#FFEEEE";//back coloro for selected items
TE.fntColor="#202060";//font color
TE.selFntColor="#4040A0";//font color for selected items
TE.bSize=2;//border width
TE.bColor="#00A000";//border color
*/

// inserting items into menu

//A(ItemID,ParentID,"title",URL,icon URL);
TE.A(1,0,"About","","","/Bilder/Home.jpg");
TE.A(2,0,"Products ","","","Bilder/aristoteles.jpg");
TE.A(3,0,"Services ","","","Bilder/aristoteles.jpg");
TE.A(7,0,"E-mail","","","/data/ex_823/dhtml_menu_fold.gif");
TE.A(4,0,"Forum","","","/data/ex_823/dhtml_menu_fold.gif");
TE.A(5,1,"Stuff","/","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(6,1,"Goals","/","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(8,2,"JavaScript","","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(9,2,"JSP beans","","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(11,8,"Tree menu","/","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(12,8,"Drop Down menu","/","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(14,9,"file uploader","/","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(15,9,"charts","","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(16,9,"flash","","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(17,3,"Support","","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(18,3,"Component","","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(19,3,"Developing","","","/data/ex_823/dhtml_menu_doc.gif");

TE.WriteCSS();
TE.WriteDiv();
TE.Reset();
}
function MenuInit()//Inits menu Events
{
TE.EventInit();
}
function Reset()//Reseting menu
{
TE.Reset();
}
</script>
</head>
<body>

<script language="JavaScript">
<!--
function MenuBuild()//Building and configuring menu
{

is = new BrowserCheck()//Checking browser version
TE=new TreeItem(0,0,"items2","","");//creating menu object
TE.xpos=150;TE.ypos=30;//x and y position
TE.align="hor";//alignment "vert" - vertical "hor" - horizontal
TE.width=120;//column width
TE.fntSize="2";//font size
TE.iHeight=20;//item height
TE.imWidth=20;//icon image width

// inserting items into menu

//A(ItemID,ParentID,"title",URL,icon URL);
TE.A(1,0,"ASICs","#about_efw","","Bilder/ASICs.jpg");
TE.A(2,0,"Globales","#news","","Bilder/Globales.gif");
TE.A(3,0,"Philosophie","#products","","Bilder/aristoteles.jpg");
TE.A(4,0,"Organization","#organization","","Bilder/Ioannis.jpg");
TE.A(5,0,"Career","#career","","Bilder/career.jpg");

TE.A(6,1,"Home","#about1","","Bilder/Home.jpg");
TE.A(7,1,"<nobr>Mission</nobr>","#about2","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(8,1,"Core Values","#about3","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(12,1,"EFW History","#about7","","/data/ex_823/dhtml_menu_doc.gif");

TE.A(13,2,"<nobr>Latest</nobr>","#latest_news","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(14,2,"<nobr>Archives</nobr>","#archives","","/data/ex_823/dhtml_menu_doc.gif");

TE.A(15,3,"Ground Sys","#prod1","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(16,3,"Airborne","#prod2","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(17,3,"Helmet","#prod3","","/data/ex_823/dhtml_menu_doc.gif");

TE.A(18,16,"OH58D","#oh58d","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(19,16,"V22","#v22","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(20,16,"A10","#a10","","/data/ex_823/dhtml_menu_doc.gif");


TE.A(21,4,"Engineering","#eng","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(22,4,"Manufacturing","#manf","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(23,4,"Procurement","#proc","","/data/ex_823/dhtml_menu_doc.gif");

TE.A(24,21,"Hardware","#hw","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(25,21,"Software","#sw","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(26,21,"Systems","#sy","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(27,21,"Test","#tst","","/data/ex_823/dhtml_menu_doc.gif");

TE.A(28,5,"Why EFW","#why","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(29,5,"Openings","#open","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(30,5,"Benifits","#benif","","/data/ex_823/dhtml_menu_doc.gif");


TE.WriteCSS();
TE.WriteDiv();
TE.Reset();
}
function MenuInit()//Inits menu Events
{
TE.EventInit();
}
function Reset()//Reseting menu
{
TE.Reset();
}
MenuBuild();
MenuInit();
//-->
</script>
<table class=header border=0 cellpadding=0 cellspacing=0 width=750>
<tr>
<td class=head_td width=150><a href="/"><img height="40px" src="/images/red_ball0.gif"></a></td>
<td class=head_td width=120><a href="#">About EFW</a></td>
<td class=head_td width=120><a href="#">News</a></td>
<td class=head_td width=120><a href="#">Products</a></td>
<td class=head_td width=120><a href="#">Organization</a></td>
<td class=head_td width=120><a href="#">Careers</a></td>
</tr>
</table>
</form>
<HR>
<p>
<body onMouseDown="Reset()"><BR></p>
</body>
</html>

<iframe name=I1 src="ioannis.htm" scrolling="no" target="contents"></iframe>




...ich weiss nämlich nicht wie ich die die drop Down Untermenüs (mit href="www.internetseite.de")!? verlinken soll!
Kann mir vieleicht jemand die Lösung zusenden, ich bedanke mich und entschuldige mich für die Einfachkeit der Aufgabe und für die Länge des Codes, habe aber so gut wie keine Ahnung/Zeit selber nach der Lösung zu suchen!

Grüsse
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   JavaScript
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.