nicht angemeldet
PulldownMenu mit DHTML (Link)
Hallo Forum...
Kennt jemand von Euch eine gute Site bei welchem die Navigation, wie auf dem Desktop, in einem PulldownMenu angelegt ist??
Möchte es mal nachbasteln...!
Merco
oli
-
Hi Oli,
versuch's mal bei
http://www.bratta.com/dhtml/
Gruß
Uwe-
Neee is nicht die Seite ist eben NICHT mehr Online, das ist es ja...!
Oli-
Hi Oli,
eins von den Scripts hatte ich noch auf der Festplatte:
HTH
Uwe-------------------
<html>
<head>
<title>Cross-browser DHTML Script - MenuBar2</title>
<style>
A:hover{color:red}
#divBg{position:absolute; width:100%; top:0; left:0; visibility:hidden; height:100}
#divBgColor{position:absolute; top:0; left:0; width:103%; height:30; clip:rect(0,107%,30,0); background-color:Silver; layer-background-color:Silver}
DIV.clSub{position:absolute; top:20; left:0; width:120; visibility:hidden; font-family:arial,helvetica; font-weight:normal; font-size:12px; padding:10px; background-color:Silver; layer-background-color:Silver}
DIV.clTop{position:absolute; font-family:arial,helvetica; font-weight:bold; font-size:13px; visibility:visible; left:100; top:20}
#divTop0{left:5%; top:5}
#divTop1{left:25%; top:5}
#divTop2{left:45%; top:5}
#divTop3{left:65%; top:5}
#divTop4{left:85%; top:5}
</style>
<script language="JavaScript1.2">
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts.
This may be used freely as long as this msg is intact!
********************************************************************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0//Do you want it to move with the page if the user scroll the page?
var moveOnScroll=truenumberOfMenus=5//How many menus do you have
//Do you want to hide all the other submenus when you click a new?
var hideAll=true/********************************************************************************
If you want to change the appearans on the text, or background or anything
do that in the style tag above, or in the table tag below.The different event handling on the different browsers makes this a little
tricky. I had to make all divs absolute positioned to make it work in netscape.
So if you ad or remove menuitems please play with the % values of each divTop
in the stylesheet. I have not had all that much luck with % placement before
in netscape so if you encounter any errors let me know and I'll see what I can do.
********************************************************************************//********************************************************************************
Object constructor
********************************************************************************/
function makeMenuBar(obj,nest,vis){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
this.hideIt=b_hideIt; this.showIt=b_showIt
if(ie && vis) this.css.visibility='hidden'
this.evnt=(n)? eval(nest+'document.'+obj):eval(obj);
this.go=0
this.height=n?this.css.document.height:eval(obj+'.offsetHeight')
this.top=b_gettop
this.obj = obj + "Object"; eval(this.obj + "=this")
}
//Get's the top position.
function b_gettop(){
var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
return gleft;
}
//The functions for showing and hiding
function b_showIt(){
this.css.visibility="visible"
}
function b_hideIt(){
this.css.visibility="hidden"
}
/********************************************************************************
Checking if the page is scrolled, if it is move the menu after
********************************************************************************/
function checkScrolled(){
if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled)
if(n) setTimeout('checkScrolled()',30)
}
/********************************************************************************
Inits the page, makes the menu object, moves it to the right place,
show it..
********************************************************************************/
function menuBarInit(){
oSub=new Array()
oTop=new Array()
for(i=0;i<numberOfMenus;i++){
oTop[i]=new makeMenuBar('divTop'+i,'divBg')
oSub[i]=new makeMenuBar('divSub'+i,'divBg.document.divTop'+i,1)
oSub[i].evnt.onmouseout=evOut;
}
//Moving menuBar
oMenu=new makeMenuBar('divBg')
scrolled=n?"window.pageYOffset":"document.body.scrollTop"
oMenu.css.top=eval(scrolled)
oMenu.css.visibility='visible'
if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();}
/********************************************************************************
Shows and hides the submenus
********************************************************************************/function evOut(){
if(ie)this.style.visibility='hidden'
else if(n) this.visibility='hidden'
}
//Canceling event bubbling in ie
function ieShow(num){
if(ie){
oSub[num].showIt()
window.event.cancelBubble=true
}
}
function extract(num){
if(hideAll){
for(i=0;i<oSub.length;i++){
if(num!=i) oSub[i].hideIt()
}
}
oSub[num].showIt();
}
onload=menuBarInit;
</script>
</head>
<body bgcolor="White">
<div id="divBg">
<div id="divBgColor"></div>
<div id="divTop0" class="clTop">
<a href="#" onmouseover="extract(0)">Choice 1</a>
<div id="divSub0" class="clSub">
<!-- To make the links link somewhere, just replace the #'s
with the link location -->
<a href="#" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Sub choice 1</a> <br>
<a href="#" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Sub choice 2</a><br>
<a href="#" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Sub choice 3</a><br>
<a href="#" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Sub choice 4</a><br>
<a href="#" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Sub choice 5</a><br><br>
</div>
</div>
<div id="divTop1" class="clTop">
<a href="#" onmouseover="extract(1)">Choice 2</a>
<div id="divSub1" class="clSub">
<!-- To make the links link somewhere, just replace the #'s
with the link location -->
<a href="#" onmouseover="ieShow(1)" onmouseout="ieShow(1)">Sub choice 1</a> <br>
<a href="#" onmouseover="ieShow(1)" onmouseout="ieShow(1)">Sub choice 2</a><br><br>
</div>
</div>
<div id="divTop2" class="clTop">
<a href="#" onmouseover="extract(2)">Choice 3</a>
<div id="divSub2" class="clSub">
<!-- To make the links link somewhere, just replace the #'s
with the link location -->
<a href="#" onmouseover="ieShow(2)" onmouseout="ieShow(2)">Sub choice 1</a> <br>
<a href="#" onmouseover="ieShow(2)" onmouseout="ieShow(2)">Sub choice 2</a><br><br>
</div>
</div>
<div id="divTop3" class="clTop">
<a href="#" onmouseover="extract(3)">Choice 4</a>
<div id="divSub3" class="clSub">
<!-- To make the links link somewhere, just replace the #'s
with the link location -->
<a href="#" onmouseover="ieShow(3)" onmouseout="ieShow(3)">Sub choice 1</a> <br>
<a href="#" onmouseover="ieShow(3)" onmouseout="ieShow(3)">Sub choice 2</a><br>
<a href="#" onmouseover="ieShow(3)" onmouseout="ieShow(3)">Sub choice 3</a><br><br>
</div>
</div>
<div id="divTop4" class="clTop">
<a href="#" onmouseover="extract(4)">Choice 5</a>
<div id="divSub4" class="clSub">
<!-- To make the links link somewhere, just replace the #'s
with the link location -->
<a href="#" onmouseover="ieShow(4)" onmouseout="ieShow(4)">Sub choice 1</a> <br>
<a href="#" onmouseover="ieShow(4)" onmouseout="ieShow(4)">Sub choice 2</a><br>
<a href="#" onmouseover="ieShow(4)" onmouseout="ieShow(4)">Sub choice 4</a><br>
<a href="#" onmouseover="ieShow(4)" onmouseout="ieShow(4)">Sub choice 5</a><br><br>
</div>
</div>
</div>
</body>
</html>
-
-
-
Kennt jemand von Euch eine gute Site bei welchem die Navigation, wie auf dem Desktop, in einem PulldownMenu angelegt ist??
Hi Oli,
schau doch mal hier nach:
http://developer.netscape.com/tech/javascript/index.html
Da befindet sich unter anderem ein Artikel
"The JavaScript Menu Components" der sich mit PullDown Menüs beschäftigt. Inkl. Demos und Source-Code etc.
Gruß Thomas
-
Kennt jemand von Euch eine gute Site bei welchem die Navigation, wie auf dem Desktop, in einem PulldownMenu angelegt ist??
Hi Oli,
schau doch mal hier nach:
http://developer.netscape.com/tech/javascript/index.html
Da befindet sich unter anderem ein Artikel
"The JavaScript Menu Components" der sich mit PullDown Menüs beschäftigt. Inkl. Demos und Source-Code etc.
Gruß Thomas
Hallo, Olli!
Ich hatte vor kurzem das gleiche Problem.
Es kam noch dazu, daß ich einige Links in einem neuen
Fenster und einige in einem Frame darstellen sollte.
Bin zwar kein JS-Profi, aber schau dir die Seite (ist
zwar noch nicht offiziell im Web)
mal unter http://test.prolib.de/mair/neu_prolib_de/index.htm
an, und klick mal den Punkt unsrer Angebot an.
GrußLudwig-
http://test.prolib.de/mair/neu_prolib_de/index.htm
an, und klick mal den Punkt unsrer Angebot an.
Hallo Ludwig,
ich bin zwar nicht der Oli, aber ich habe o.g. Seite besucht und "unser Angebot" angeklickt (IE5) - ist aber nichts passiert.
Fehler ???
Gruß Thomas
-
-
-
Hallo Oli!
Schau doch mal auf http://www.digmas.de
und klick, wenn die Seite geladen ist, auf die rechte Maustaste.
Meinst Du sowas?Bis dann Alex!
-
Hallo Oli!
Schau doch mal auf http://www.digmas.de
und klick, wenn die Seite geladen ist, auf die rechte Maustaste.
Meinst Du sowas?Bis dann Alex!
Funktioniert nur mit IE5
-
-
Kennt jemand von Euch eine gute Site bei welchem die Navigation, wie auf dem Desktop, in einem PulldownMenu angelegt ist??
Hi , nochmals Thomas
eine Seite passend zum Thema:
http://www.ncsa.uiuc.edu/General/Internet/WWW/index.html
Bye