Ankündigung

Einklappen
Keine Ankündigung bisher.

PHP Mysql Accordion Menü erstellen

Einklappen

Neue Werbung 2019

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

  • maffy
    hat ein Thema erstellt PHP Mysql Accordion Menü erstellen.

    PHP Mysql Accordion Menü erstellen

    Ich möchte gerne ein Accordion Menü aus einer DB Abfrage erstellen.
    Leider komme ich da nicht weiter wie ich das machen kann.


    1. Wie kann ich die Daten Gruppieren:

    Die Daten sehen z.B. so aus!

    MenueName = Home Ebene1 = 1 Ebene2 = 0 Hauptmenü

    MenueName = Daten Ebene1 = 2 Ebene2 = 0 Hauptmenü

    MenueName = GPX Ebene1 = 2 Ebene2 = 1 Untermenü
    MenueName = Bilder Ebene1 = 2 Ebene2 = 2 Untermenü

    MenueName = Gästebuch Ebene1 =3 Ebene2 = 0 Hauptmenü

    Ich habe bisher folgenden Code:


    PHP-Code:
    <?PHP

        
    include "edit/config.inc.php";
        include 
    "zugriff.inc.php";

        
    // Hier entsteht das Menü, alle Datensätze auswählen
        // und nach Ebene1 und dann nach Ebene2 sortieren!
        
    $sql2 "SELECT * FROM {$pfx}content ORDER BY Ebene1, Ebene2 DESC";
        
    $menu_result mysql_query($sql2$conn);

        
    $level 0// Ebene ermitteln
        
        
    print "<ul>";
        
        while (
    $menu_row = @mysql_fetch_assoc($menu_result)) {
        
            
    $ebene1            $menu_row['Ebene1'];
            
    $ebene2            $menu_row['Ebene2'];
            
    $getanhang         $menu_row['URLAnhang'];
            
    $seitentitel     $menu_row['Seitentitel'];
            
    $menuename        $menu_row['MenueName'];    
            
            print 
    "<li><a href='$getanhang' title='$seitentitel'>$menuename</a></li>";    
        
        }
        
        print 
    "</ul>";    


    ?>

  • maffy
    antwortet
    Falls es jemand gebrauchen kann

    dies kommt in den Header:
    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
      $(document).ready(function() { 
        $(".accordion .accord-header").click(function() { 
          if($(this).next("div").is(":visible")){ 
            $(this).next("div").slideUp("slow"); 
          } else { 
            $(".accordion .accord-content").slideUp("slow"); 
            $(this).next("div").slideToggle("slow"); 
          } 
        }); 
      }); 
    </script>
    Das ist die Datei die das Menü erzeugt:

    PHP-Code:
    <?PHP

        
    // Hier entsteht das Menü, alle Datensätze auswählen 
        // und nach dem Hauptmenü sortieren! 

        
    $menu "";

        
    $sql1 "select * from ".CONTENT." where ParentLevel = 0 order by id asc"
        
    $nodeResult mysql_query($sql1,$conn); 
        
    $counter 0
         
        
    $menu .= "<div  class=\"accordion\">\n"
             
        while(
    $row mysql_fetch_assoc($nodeResult)) 
        { 
         
            
    // Hauptmenüs 
            
    $id             $row['id']; 
            
    $MenuName       $row['MenuName']; 
            
    $GetAnhang      $row['GetAnhang']; 
            
    $ParentLevel     $row['ParentLevel']; 
            
            
    $getmenu =     

            
    // Untermenüs 
            
    $sql2 "select id, GetAnhang, MenuName  from ".CONTENT." where ParentLevel = $id"
            @
    $childResult mysql_query($sql2,$conn); 
                     
            
    $Anzahl1 mysql_num_rows($childResult); 
                             
            
    // Wenn es kein Untermeü gibt Hauptmenü normal anzeigen 
            
    if($Anzahl1 == ""){ 
             
                
    $menu .= "<div class=\"header\"><a href='#'>".$MenuName."</a></div>\n";             
                 
            } else { 
             
                
    // Wenn es ein Untermeü gibt Hauptmenü als Accordion anzeigen            
                
    $menu .= "<div class=\"accord-header\"><span><a href='#'>".$MenuName."</a></span></div>\n"
                 
                
    // Wenn es ein Untermenü gibt anzeigen 
                
                
    $menu .= "<div class=\"accord-content\">\n";
                         
                while(
    $child mysql_fetch_array($childResult)) 
                {        

                       
    $getAnhang stripslashes($child['GetAnhang']);
                    
    $MenueName stripcslashes($child['MenuName']);
                    
    $cid $child['id'];
                                          
                    
    $menu .= "<span id=\"submenue\"><a href='#'>".$MenueName."</a></span> <br />\n";    
                    
                }
                
                
    $menu .= "</div>\n";
                                 
            } 
                                                       
        } 
         
        
    $menu .= "</div>";


    ?>

    Einen Kommentar schreiben:


  • maffy
    antwortet
    Danke auch, für die schön Hilfe in diesem tollen Forum.

    Einen Kommentar schreiben:


  • maffy
    antwortet
    Hat sich erledigt. Habe den Fehler gefunden.

    Einen Kommentar schreiben:


  • ChrisvA
    antwortet
    Schau dir mal den JS Teil an und verstehe ihn. Dann stellst du fest, dass der sich genau so verhält, wie du es siehst.
    Anschließend solltest du auch in der Lage sein, deine Ausgabe in PHP so anzupassen, dass er alles anzeigt.

    Einen Kommentar schreiben:


  • maffy
    antwortet
    Es währe schön, wenn mir da jemand helfen kann.

    Ich weis nicht warum nur das erste Untermenü im Accordion angezeigt wird.
    Im Quellcode stehen alle Untermenüs drinnen.

    Einen Kommentar schreiben:


  • maffy
    antwortet
    dieser Code funktioniert fast. Bei den Untermenüs wird nur das erste angezeigt.

    Code:
    <html>
    <head>
    <title>Accordion Menü mit PHP und MYSQL</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta charset="utf-8" />
    
    <style>
    .root
    {
    background-color: #000000;
    color: #FFCF00;
    font-family: Verdana;
    font-size: 14pt;
    font-weight: bold;
    height: 20;
    padding: 5;
    margin: 5;
    }
    
    .child
    {
    background-color: #D1D1D1;
    color: #000000;
    font-family: Verdana;
    font-size: 10pt;
    font-weight: bold;
    text-decoration: underline;
    height: 20;
    padding: 5;
    margin: 5;
    }
    
    body
    {
    color: #000000;
    font-family: Verdana;
    font-size: 8pt;
    font-weight: normal;
    }
    a
    {
    color: #000000;
    }
    
    .header { background: #EFEFEF; }
    
    .accordion { border: 1px solid #666;padding: 1px; width: 300px; }
    .accord-header { background: #EFEFEF; }
    .accord-header:hover { cursor: pointer; }
    .accord-content { display: none; }
    		
    </style>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $(".accordion .accord-header").click(function() {
          if($(this).next("div").is(":visible")){
            $(this).next("div").slideUp("slow");
          } else {
            $(".accordion .accord-content").slideUp("slow");
            $(this).next("div").slideToggle("slow");
          }
        });
      });
    </script>
    
    
    </head>
    
    <body>
    
    	<?PHP
    
    	include "edit/config.inc.php";
    	include "zugriff.inc.php";
    
    	// Hier entsteht das Menü, alle Datensätze auswählen
    	// und nach dem Hauptmenü sortieren!
    
    
    /*
      <div class="accordion">
      <div class="accord-header">Header 1</div>
      <div class="accord-content">This is the content for the first header.</div>
      <div class="accord-header">Header 2</div>
      <div class="accord-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </div>
    */
    
    	$sql1 = "select * from ".CONTENT." where ParentLevel = 0 order by id asc";
    	$nodeResult = mysql_query($sql1,$conn);
    	$counter = 0;
    	
    	print "<div class=\"accordion\">\n";
    		
    	while($row = mysql_fetch_assoc($nodeResult))
    	{
    	
    		// Hauptmenüs
    		$id 			= $row['id'];
    		$MenuName 		= utf8_decode($row['MenuName']);
    		$GetAnhang 		= utf8_decode($row['GetAnhang']);
    		$ParentLevel 	= $row['ParentLevel'];	
    
    		// Untermenüs
    		$sql2 = "select * from ".CONTENT." where ParentLevel = $id";
    		@$childResult = mysql_query($sql2,$conn);
    				
    		$Anzahl1 = mysql_num_rows($childResult);
    						
    		// Wenn es kein Untermeü gibt Hauptmenü normal anzeigen
    		if($Anzahl1 == ""){
    		
    			print "<div class=\"header\">$MenuName</div>\n";			
    			
    		} else {
    		
    			// Wenn es ein Untermeü gibt Hauptmenü als Accordion anzeigen
    			
    			print "<div class=\"accord-header\">$MenuName</div>\n";
    			
    			// Wenn es ein Untermenü gibt anzeigen
    					
    			while($child = mysql_fetch_assoc($childResult))
    			{
    				print "<div class=\"accord-content\">";		
    				
    				print "<a href=\"".$child['GetAnhang']."\">".$child['MenuName']."</a>";
    				print "</div>\n";
    			
    			}
    	
    		}
    											
    	}
    	
    print "</div>";	
    		
    	?>
    
    </body>
    </html>

    Einen Kommentar schreiben:


  • maffy
    antwortet
    Ich habe nun folgende Seite erstellt. Aber das Accordion funktioniert leider nicht richtig.

    Wenn ich auf ein klicke wird das untere geöffnet aber nur ein Untermenü angezeigt.

    PHP-Code:
    <html>
    <head>
    <title>Unbenanntes Dokument</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta charset="utf-8" />

    <style>
    #root
    {
    background-color: #000000;
    color: #FFCF00;
    font-family: Verdana;
    font-size: 14pt;
    font-weight: bold;
    height: 20;
    padding: 5;
    margin: 5;
    }

    #child
    {
    background-color: #D1D1D1;
    color: #000000;
    font-family: Verdana;
    font-size: 10pt;
    font-weight: bold;
    text-decoration: underline;
    height: 20;
    padding: 5;
    margin: 5;
    }

    body
    {
    color: #000000;
    font-family: Verdana;
    font-size: 8pt;
    font-weight: normal;
    }
    a
    {
    color: #000000;
    }

    .accordion { border: 1px solid #666;padding: 1px; width: 300px; }
    .accord-header { background: #EFEFEF; }
    .accord-header:hover { cursor: pointer; }
    .accord-content { display: none; }
            
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $(".accordion .accord-header").click(function() {
          if($(this).next("div").is(":visible")){
            $(this).next("div").slideUp("slow");
          } else {
            $(".accordion .accord-content").slideUp("slow");
            $(this).next("div").slideToggle("slow");
          }
        });
      });
    </script>


    </head>

    <body>

        <?PHP

        
    include "edit/config.inc.php";
        include 
    "zugriff.inc.php";

        
    // Hier entsteht das Menü, alle Datensätze auswählen
        // und nach dem Hauptmenü sortieren!


    /*
      <div class="accordion">
      <div class="accord-header">Header 1</div>
      <div class="accord-content">This is the content for the first header.</div>
      <div class="accord-header">Header 2</div>
      <div class="accord-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </div>
    */

        
    $sql1 "select * from ".CONTENT." where ParentLevel = 0 order by id asc";
        
    $nodeResult mysql_query($sql1,$conn);
        
    $counter 0;
        
        print 
    "<div class=\"accordion\">\n";
            
        while(
    $row mysql_fetch_assoc($nodeResult))
        {
        
            
    $id             $row['id'];
            
    $MenuName         utf8_decode($row['MenuName']);
            
    $GetAnhang         utf8_decode($row['GetAnhang']);
            
    $ParentLevel     $row['ParentLevel'];
                        
            print 
    "<div class=\"accord-header\">$MenuName</div>\n";
                    
            
    $sql2 "select * from ".CONTENT." where ParentLevel = $id";
            @
    $childResult mysql_query($sql2,$conn);
            
            
    $num_rows mysql_num_rows($childResult);
            
            
    // Wenn keine Datensätze dann nichts ausgeben
            
    if($num_rows !="")
                    
            while(
    $child mysql_fetch_assoc($childResult))
            {
                print 
    "<div class=\"accord-content\">";
                print 
    "<a href=\"".$child['GetAnhang']."\">".$child['MenuName']."</a>";
                print 
    "</div>\n";
            }
            
                        
        }
        
            print 
    "</div>";    
        
    ?>

    </body>
    </html>

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    Zitat von maffy Beitrag anzeigen
    Wenn du lesen kannst, steht alles in meiner Frage drinnen.
    deine Frage ist schwer zu verstehen.
    So wie ich es sehe solltest Du Dir den Link mal durchlesen und ggf. Deine DB-Struktur dahingehend anpassen

    Einen Kommentar schreiben:


  • ChrisvA
    antwortet
    Zitat von maffy Beitrag anzeigen
    Wenn du lesen kannst, steht alles in meiner Frage drinnen.
    Komisch, deiner Frage kann ich das aber nicht entnehmen, dass du irgendeinen der Tipps dort umgesetzt hast, da du weder nested Sets benutzt, noch die erste mit einem Parent Key.

    Einen Kommentar schreiben:


  • maffy
    antwortet
    Zitat von der_dirk Beitrag anzeigen
    http://phpperformance.de/hierarchisc...sql-rekursion/

    Ich verständlich geschrieben und in deutsch.

    Hat mich auch gehilft

    Gruß
    Dirk
    Wenn du lesen kannst, steht alles in meiner Frage drinnen.

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    http://phpperformance.de/hierarchisc...sql-rekursion/

    Ich verständlich geschrieben und in deutsch.

    Hat mich auch gehilft

    Gruß
    Dirk

    Einen Kommentar schreiben:


  • akretschmer
    antwortet
    Zitat von beliar284 Beitrag anzeigen
    beschäftige dich mit folgendem Thema : "Nested Sets" .. dann erledigt sich deine Menü-Frage quasi von selbst
    oder mir rekursiven Abfragen.

    Einen Kommentar schreiben:


  • beliar284
    antwortet
    beschäftige dich mit folgendem Thema : "Nested Sets" .. dann erledigt sich deine Menü-Frage quasi von selbst

    Einen Kommentar schreiben:


  • maffy
    antwortet
    Ich habe folgende DB Strucktur:

    PHP-Code:
    $queries[] = "
    CREATE TABLE "
    .CONTENT." (
      `URLAnhang` varchar(30) NOT NULL default '',
      `MenueName` varchar(35) default NULL,
      `Ebene1` smallint(6) default NULL,
      `Ebene2` smallint(6) default NULL,
      `Seitentitel` varchar(85) default NULL,
      `Content` text,
      `KastenNr` smallint(6) default NULL,
      `datum` DATE NOT NULL,
      `autor` varchar(75) default NULL,
      PRIMARY KEY  (`URLAnhang`)
    ); 
    "

    Das erste Menü hat folgende Einträge (Ebene1 = 1 und Ebene2 = 0)
    Ein Untermenü für das erste Menü bekommt dann Ebene1 = 1 und Ebene2 = 1

    usw.

    Nun möchte ich gerne ein Menü daraus erstellen das sich mit dem JQuerry Accordion Menü öffnen lässt.

    Mfg Maffy

    Einen Kommentar schreiben:

Lädt...
X