Klappmenü

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Klappmenü

    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.

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

    verschieb*
    Kissolino.com

    Kommentar


    • #3
      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...?!

      Code:
      <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>
      Zuletzt geändert von Laborant; 25.02.2005, 17:12.

      Kommentar


      • #4
        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.
        Angehängte Dateien
        Mit freundlichen Grüßen
        Werner

        Kommentar


        • #5
          quick 'n dirty .... statt:
          Code:
          if (ie4||ns6)
          document.onclick=checkcontained
          
          //setze
          if (ie4||ns6)
          document.onmouseover=checkcontained
          ich würd es aber lassen.
          Kissolino.com

          Kommentar


          • #6
            Original geschrieben von Wurzel
            quick 'n dirty .... statt:
            Code:
            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.

            Kommentar


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

              Kommentar


              • #8
                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.
                Angehängte Dateien
                INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


                Kommentar


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

                  Kommentar


                  • #10
                    ja. dort funktioniert das menu unten. aber wieso komme ich von der startseite nicht weiter?
                    INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


                    Kommentar

                    Lädt...
                    X