Problem mit Navigation

Basti_rsl2

Ich arbeite immer noch an meinem Navi Problem. Und zwar weiß ich nicht wie ich es in meine Seite einbinde.

Auf meiner Seite befindet sich Links die Navigation in einer Tabelle und rechts daneben das iframe. Nun habe ich mir erstmal ein Navigation in einer lehren html Page gebastelt. Hier der Code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Menü</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 


#dropmenudiv{ 
   position:absolute; 
   background-color: CABF92; 
   font:normal 12px/18px Arial; 
   z-index:100; 
   color: #FFFFFF; 
   border-top: 1px solid white; 
   border-right: 1px solid white; 
   border-bottom: 0 solid white; 
   border-left: 1px solid white; 
} 


#dropmenudiv a{ 
   width: 100%; 
   display: block; 
   text-indent: 3px; 
   border-bottom: 1px solid white; 
   padding: 1px 0; 
   text-decoration: none; 
   font-weight: bold; 
   font-family: Arial, Helvetica, sans-serif; 
   font-size: 12px; 
   font-style: normal; 
   color: #FFFFFF; 
   border-top-width: 1px; 
   border-right-width: 1px; 
   border-left-width: 1px; 
   border-top-style: none; 
   border-right-style: none; 
   border-left-style: none; 
} 


#dropmenudiv a:hover{ 
   background-color: E8E1C4; 
   font-family: Arial, Helvetica, sans-serif; 
   font-size: 12px; 
   color: #FFFFFF; 
} 


/* Sample CSS definition for the example list. Remove if desired */ 
.navlist li { 
   width: 130; 
   display: block; 
   text-indent: 5px; 
   border-bottom: 1px dashed white; 
   padding: 1px 0; 
   font-weight: bold; 
   font-family: Arial, Helvetica, sans-serif; 
   font-size: 12px; 
   color: #FFFFFF; 
   list-style-type: none; 
   cursor: hand; 
} 


navlist{ 
   font-family: Arial, Helvetica, sans-serif; 
   font-size: 12px; 
   color: #FFFFFF; 
   border-top-style: none; 
   border-right-style: none; 
   border-bottom-style: solid; 
   border-left-style: none; 
   list-style-type: none; 
   cursor: hand; 
   display: table; 
} 






</style> 
<script type="text/javascript"> 






//Contents for menu 1 
var menu1=new Array() 


menu1[0]='[url='/aktuell.html']News[/url]' 
menu1[1]='[url='/archiv.html.']Archiv[/url]' 
menu1[2]='[url='/termine.html']Termine[/url]' 


//Contents for menu 2, and so on 
var menu2=new Array() 
menu2[0]='[url='/geschichte.htnl']Geschichte[/url]' 
menu2[1]='[url='/sektionen.html']Sektionen[/url]' 
menu2[2]='[url='/Mitglieder.html']Mitglieder[/url]' 
menu2[3]='[url='/nordkurve.html/']Nordkurve RSL[/url]' 
menu2[4]='[url='/away.html/']Away[/url]' 
menu2[5]='[url='/presse.html']Presse[/url]' 


//Contents for menu 3 
var menu3=new Array() 
menu3[0]='[url='/20032004']2003/2004[/url]' 
menu3[1]='[url='/20042005.html']2004/2005[/url]' 
menu3[2]='[url='/20052006.html']2005/2006[/url]' 
menu3[3]='[url='/ground.html/']Groundhopping[/url]' 
menu3[4]='[url='/Feierindex.html/']Feiern[/url]' 


//Contents for menu 4 
var menu4=new Array() 
menu4[0]='[url='/vereingesch.html']Geschichte[/url]' 
menu4[1]='[url='/fakten.html']Fakten[/url]' 
menu4[2]='[url='/stadion.html']Stadion[/url]' 
menu4[3]='[url='/saison.html/']Saison[/url]' 


//Contents for menu 5 
var menu5=new Array() 
menu5[0]='[url='/gb.html']Gästebuch[/url]' 
menu5[1]='[url='/#.html']Forum[/url]' 
menu5[2]='[url='/#.html']Forum alt[/url]' 
menu5[3]='[url='/downloads.html/']Downloads[/url]' 
menu5[3]='[url='/voting.html/']Voting[/url]' 
menu5[3]='[url='/#.html/']Chat[/url]' 


//Contents for menu 6 
var menu6=new Array() 
menu6[0]='[url='/lunksultras.html']Ultra Links[/url]' 
menu6[1]='[url='/linksall.html']Sonstige[/url]' 




       
var disappeardelay=100  //menu disappear speed onMouseout (in miliseconds) 
var horizontaloffset=5 //horizontal offset of menu from default location. (0-5 is a good v????*?alue) 


/////No further editting needed 


var ie4=document.all 
var ns6=document.getElementById&&!document.all 


if (ie4||ns6) 
document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 


function getposOffset(what, offsettype){ 
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; 
var parentEl=what.offsetParent; 
while (parentEl!=null){ 
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; 
parentEl=parentEl.offsetParent; 
} 
return totaloffset; 
} 




function showhide(obj, e, visible, hidden, menuwidth){ 
if (ie4||ns6) 
dropmenuobj.style.left=dropmenuobj.style.top=-500 
dropmenuobj.widthobj=dropmenuobj.style 
dropmenuobj.widthobj.width=menuwidth 
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") 
obj.visibility=visible 
else if (e.type=="click") 
obj.visibility=hidden 
} 


function iecompattest(){ 
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body 
} 


function clearbrowseredge(obj, whichedge){ 
var edgeoffset=0 
if (whichedge=="rightedge"){ 
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth 
if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure) 
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth 
} 
else{ 
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset 
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight 
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up? 
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight 
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window ????*?then) 
edgeoffset=dropmenuobj.y 
} 
} 
return edgeoffset 
} 


function populatemenu(what){ 
if (ie4||ns6) 
dropmenuobj.innerHTML=what.join("") 
} 




function dropdownmenu(obj, e, menucontents, menuwidth){ 
if (window.event) event.cancelBubble=true 
else if (e.stopPropagation) e.stopPropagation() 
clearhidemenu() 
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv 
populatemenu(menucontents) 


if (ie4||ns6){ 
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth) 
dropmenuobj.x=getposOffset(obj, "left") 
dropmenuobj.y=getposOffset(obj, "top") 
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px" 
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px" 
} 


return clickreturnvalue() 
} 


function clickreturnvalue(){ 
if (ie4||ns6) return false 
else return true 
} 


function contains_ns6(a, b) { 
while (b.parentNode) 
if ((b = b.parentNode) == a) 
return true; 
return false; 
} 


function dynamichide(e){ 
if (ie4&&!dropmenuobj.contains(e.toElement)) 
delayhidemenu() 
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) 
delayhidemenu() 
} 


function hidemenu(e){ 
if (typeof dropmenuobj!="undefined"){ 
if (ie4||ns6) 
dropmenuobj.style.visibility="hidden" 
} 
} 


function delayhidemenu(){ 
if (ie4||ns6) 
delayhide=setTimeout("hidemenu()",disappeardelay) 
} 


function clearhidemenu(){ 
if (typeof delayhide!="undefined") 
clearTimeout(delayhide) 
} 


</script> 
<link href="navigation.css" rel="stylesheet" type="text/css"> 
</head> 


<body bgcolor="#CABF92"> 
<p class="navlist"> </p> 
<p class="navlist">
 
  <!-- Activate menu onclick instead 
[url='default.htm']Webmaster Links[/url]
 
--> 
</p> 


<ul class="navlist"> 
  <li class="navlist" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Aktuell</font> 

  <li class="navlist" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">Über 
    uns</font> 
  <li class="navlist" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()">Bilder</font> 

  <li class="navlist" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()">Verein</font> 

  <li class="navlist" onMouseover="dropdownmenu(this, event, menu5, '150px')" onMouseout="delayhidemenu()">Interaktiv</font> 

  <li class="navlist" onMouseover="dropdownmenu(this, event, menu6, '150px')" onMouseout="delayhidemenu()"><span class="navlist">Links</font> </span> 
    </span>  
[/list] 
</body> 
</html>

Alles anzeigen

Nun weiß ich aber absolut nicht wie das Submenü in meiner Navigationstabelle ausfahren soll.

Hat da eventuell jemand ne Lösung? Wäre sehr dankbar, da ich schon lange an diesem Problem arbeite.

Basti_rsl2

Ich wäre ja schon für einen kleinen Tip dankbar. Gibt es die Möglichkeit einen Layer über das iframe zulegen?

Ronald

Moin!

Also ohne daß ich mir den Quelltext jetzt näher angeschaut habe (spielt nämlich keine Rolle, da er nur für die Navigation und mir auch viel zu komplex ist): Du kannst mit CSS-Positionierung auch ein Aufklappmenü über eine Iframe klappen.

Bei einem Frameset geht das allerdings nicht und auch nicht aus einem Iframe heraus über ein anderes Iframe oder den HTML-Hintergrund.

G.a.d.M.

Ronald

Basti_rsl2

Und wie fang ich denn am besten an?

Ronald

Dazu müßte ich mal die HP komplett sehen und nicht nur eine Datei

Basti_rsl2

Die hast Du schon mehrmals gesehen. http://www.germania08rosslau.de

Sorry. Aber ich komm da absolut nicht weiter.

hier hast du mal mein menü:

http://www.germania08rosslau.de/navigation.html

Ronald

Ach das war es - schäm

Ich hab grad mal was getestet, geht aber leider wohl doch nicht so wie ich es geschrieben habe, jedenfalls nicht mit einem Aufklappmenü. Ich hatte es mit Grafiken getestet und damit ist es kein Problem - ich werd mal weiter überlegen, bin momentan aber wenig hoffnungsvoll.

G.a.d.M.

Ronald

Basti_rsl2

Grafiken wären auch nicht schlimm, oder?

Ronald

Aber sehr aufwendig und dann ist noch fraglich, ob es in der Kombination Javascript mit CSS klappt.

Ich denke mal weiter ...

Ronald

Ich hab grade mal auf meinem PC nachgeschaut, da liegt eine Version mit funktionierendem Aufklappmenü - hatte ich es dir nicht geschickt ?

Basti_rsl2

Doch, aber 1. finde ich es nicht mehr, und 2. sieht es anders aus. Kann ich das dann noch so mittels css anpassen dass es wie mein gebasteltes aussieht?

Basti_rsl2

ach und da war noch das Problem mit dem mouseover.

Ronald

Das Anpassen mit CSS dürfte das kleinste Problem sein, ich probiere es mal eben.

Dein Script hat übrigens div. Fehler.

Basti_rsl2

welches? navigation oder generell?

Ronald

Das Javascript innerhalb der navigation.html

Basti_rsl2

Hmm, hab die Basis aus dem Netz und hab es mir so angepasst und schonmal gefreut, dass es überhaupt funktioniert hat.

Ronald

Welche Daten sollen denn in das Menü rein, die von der HP oder die aus navigation.html ?

Basti_rsl2

navigation.html

Ronald

So, schau mal: http://web306.server3.webplus24.de/testseiten/germania/

Ich muß mir nur noch etwas einfallen lassen, damit die Navigation sich wieder schließt, wenn man nichts anklickt - das aber nicht mehr jetzt, ich muß ins Bett.

Soll ich dir den Quelltext schicken oder kopierst du ihn?

Basti_rsl2

ich kopier mir ihn. Vielen Dank schon mal. Und sag bescheid wenn Dir was eingefallen ist. Gute Nacht

Tags