Klappmenü

[Laborant]

Hallo zusammen,

Ich bin wirklich mehr der php Typ, hab von Javascript nicht sehr viel Ahnung (um genau zu sein gar keine) und muss jetzt eine Website zusammenbasteln welche natürlich auch eine Navigation enthällt.
Diese soll aus einem Klappmenü bestehen wie sie auch auf der Seite www.jmp-dental.de zu sehen ist.
Der einzige Unterschied ist, dass sich mein Menü nach unten öffnen soll und nicht nach oben.
Ich hab schon probiert mit dem Code von JMP zu arbeiten, aber ich werde mehr und mehr verwirrter je länger ich daran sitze

Ich glaube, dass hier einige kompetente Leute sind für die so ein menü ein Kinderspiel ist oder die mir einen Link zu einen Tutorial o.ä. geben können.

Kann mir bitte jemand dabei helfen?
Am besten wäre, wenn mir jemand den kompletten JS Code und ein oder zwei Menübalken als Beispiel geben könnte damit ich mir das möglichst einfach selber zusammmenbauen kann.

Wäre echt sehr nett!!

Liebe Grüße
Der Laborant.

[Wurzel]

suchen war zu schwierig?
http://www.php-resource.de/forum/sea...der=descending

verschieb*

[Laborant]

Suchen kommt immer vor dem Posten. Das weiß ich bereits
Hab ich auch schon gemacht. Leider wurde das hier noch nicht behandelt.
Hier geht es immer um Menüs bei denen man erst klickt und dann geklappt wird.
Möchte das aber als Mouseover-Klappmenü ohne Klicken

Aber ich kann's nochmal anders probieren.
Wie mache ich es, dass sich folgendes Menü beim Mouseover ausklappt und beim Mouseout wieder einklappt?
Das Ganze dann nicht als Liste sondern mit Bildern...?!

<style>
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
//list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--

//Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02)
//For full source code and more DHTML scripts, visit [url]http://www.dynamicdrive.com[/url]
//This credit MUST stay intact for use

var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}

if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(fold.gif)"
}
}
}

if (ie4||ns6)
document.onclick=checkcontained

//-->
</script>

<ul>
   <li id="foldheader">News</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.cnn.com">CNN</a></li>
      <li><a href="http://www.abcnews.com">ABC News</a></li>
      <li><a href="http://www.news.bbc.co.uk">BBC News</a></li>
   </ul>

   <li id="foldheader">Webmaster</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
      <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
      <li><a href="http://www.freewarejava.com">Freewarejava.com</a></li>
   </ul>

   <li id="foldheader">Nested Example</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.dynamicdrive.com">outer 1</a></li>
      <li><a href="http://www.dynamicdrive.com">outer 2</a></li>
      <li id="foldheader">Nested</li>
      <ul id="foldinglist" style="display:none" style=&{head};>
         <li><a href="http://www.dynamicdrive.com">nested 1</a></li>
         <li><a href="http://www.dynamicdrive.com">nested 2</a></li>
      </ul>
      <li><a href="http://www.dynamicdrive.com">outer 3</a></li>
      <li><a href="http://www.dynamicdrive.com">outer 4</a></li>
   </ul>
</ul>

[novara]

Hey, ich hatte selbiges Problem und habe dann nach längerem suchen etwas gefunden, mußt Du ein wenig umstricken da ich die Menüpunkte aus ner DB hole, das sollte aber das kleinste Problem sein. Bei dem Menü kannste einstellen ob das Menü bei MouseOver oder Klick angezeigt wird, ob Du es horizontal oder vertikal haben möchtest.

[Wurzel]

quick 'n dirty .... statt:

if (ie4||ns6)
document.onclick=checkcontained

//setze
if (ie4||ns6)
document.onmouseover=checkcontained

ich würd es aber lassen.

[Laborant]

Original geschrieben von Wurzel
quick 'n dirty .... statt:

if (ie4||ns6)
document.onclick=checkcontained

//setze
if (ie4||ns6)
document.onmouseover=checkcontained

ich würd es aber lassen.

wieso würdest du es lassen?
@novara: danke, ich werds mir mal ansehen.

[Wurzel]

1. ist es wirklich dirty, man müsste den code umschreiben
2. schalte javascript ab und du siehst, was deine besucher sehen

[Abraxax]

Re: Klappmenü

Original geschrieben von Laborant
Diese soll aus einem Klappmenü bestehen wie sie auch auf der Seite www.jmp-dental.de zu sehen ist.

frage ... wo genau soll das menu sein?

ich sehe nur den screener hier .... siehe anhang.

unten die drei icons sind das einzige, was ich anklicken kann. mehr nicht.

[Laborant]

versuch's mal damit: http://www.jmp-dental.de/de/index2.html

[Abraxax]

ja. dort funktioniert das menu unten. aber wieso komme ich von der startseite nicht weiter?