Aufklappmenü - PHP und CSS - Verbesserungen

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

  • Aufklappmenü - PHP und CSS - Verbesserungen

    Ich habe auf meiner Webseite bereits ein Aufklappmenü mit CSS-Hover gehabt und wollte dann jeweil die aktuelle Seite hervorheben bzw. den aktuellen Unterpunkt "aufklappen".
    Nun habe ich folgenden Code geschrieben, gibt es da Verbesserungen, weil ich noch totaler Anfänger bin, Sicherheitsprobleme sehe ich keine, aber das hat ja nichts zu heißen...

    Beispiel Menüstruktur (aktulle Seite: "Startseite"), bei href="" ist jeweils noch die URL eingetragen
    Code:
           <ul>
        <li id="akt_up">Startseite</li>
    
        <li><a target="_top" href=""></a></li>
    
        <li><a target="_top" href=""></a></li>
    
        <li class="off">Software
    
          <ul class="menueliste">
            <li><a target="_top" href="" >Unterpunkt 1</a></li>
    
            <li><a target="_top" href="">Unterpunkt 2</a></li>
          </ul>
        </li>
      </ul>
    PHP Code für die Navigation:


    PHP-Code:
    //Auslesen der aktuellen Seite (alle Dateien sind im Hauptverzeichnis)
    $aktuell substr($_SERVER['SCRIPT_NAME'], );

    $seiten[] = array ( "name" => "Impressum""url" => "impressum.php""sonstiges" => 'accesskey="1"'); // Beispiel - Array 
    PHP-Code:
    $ausgabe '';

    foreach ( 
    $seiten as $seite )
    {
        if ( isset (
    $seite['sub']) )
        {
            
    $check false;
            
    $ausgabe .= "\t\t" '<li class="off" id="{[check]}">' 
    $seite['name'] . "\n" "\t\t\t" '<ul class="menueliste">' "\n";
            foreach ( 
    $seite['sub'] as $unterseite )
            {
                if (
    $unterseite['url'] == $aktuell)
                {
                    
    $ausgabe.= "\t\t\t\t" '<li id="akt_sub">' 
    $unterseite['name']. '</li>' "\n";
                    
    $check true;
                }
                
                else
                {
                    
    $ausgabe.= "\t\t\t\t" .'<li><a rel="nofollow" target="_top" 
    href="example.com/?url=' 
    $unterseite['url'] . '">' $unterseite['name']. 
    '</a></li>' "\n";
                }
            }
            if ( 
    $check )
                
    $ausgabe str_replace('id="{[check]}"''id="akt"'$ausgabe);
            else
                
    $ausgabe str_replace('id="{[check]}"'''$ausgabe);
            
    $ausgabe .= "\t\t\t</ul>\n\t\t</li>\n";
        }
        else
        {
            if ( 
    $seite['url'] == $aktuell )
            {
                
    $ausgabe.= "\t\t" '<li id="akt_up">' $seite['name']. "</li>\n";
            }
            else
            {
                
    $ausgabe.= "\t\t" '<li><a target="_top" href="http://example.com/?url=' $seite['url'] . '" ' 
    $seite['sonstiges'] .
     
    '>' $seite['name']. '</a></li>' "\n";
            }
                    
        
        }
    }
        echo 
    $ausgabe
    Zuletzt geändert von einermeiner; 19.06.2011, 16:28.

  • #2
    Bitte brich vorher deinen Code vernünftig um. Kein Mensch scrollt gerne horizontal.

    Danke
    Peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      So sollte es besser sein

      Kommentar


      • #4
        Dein Beispiel ist auch nicht gerade günstig gewählt.

        Klar könnte man sich als Leser selbst eine vollständigere Menüstruktur als Eingabe schreiben, nur erhöht das den Aufwand und damit die Chance auf viele Antworten.

        Ich würde außerdem den Algorithmus zur Darstellung definitiv noch in einer Funktion verpacken.

        Kommentar


        • #5
          Wie meinst du das mit dem Beispiel, habe nun noch eines, bei dem ein Unterpunkt die aktuelle Seite ist.
          Welchen Vorteil hat es als Funktion, dass es übersichtlicher wird oder noch etwas?

          Code:
          <div class="steuerung">
                <ul>
              
                    <li><a target="_top" href="http://example.com/?url=index.php" >Startseite</a></li>
                  <li class="off" id="akt">Videos
                      <ul class="menueliste">
                          <li id="akt_sub">FritzFax</li>
                          <li><a target="_top" href="http://example.com/?url=systemwiederherstellung.php">Systemwiederherstellung</a></li>
          
                          <li><a target="_top" href="">Macrium Reflect</a></li>
                      </ul>
                  </li>
                  <li class="off" >Betriebssystem
                      <ul class="menueliste">
                          <li><a target="_top" href="http://example.com/?url=gruppenrichtlinien.php">Gruppenrichtlinien XP</a></li>
                          <li><a target="_top" href="http://example.com/?url=suchen_statt_oeffnen.php">Suchen statt &ouml;ffnen</a></li>
                      </ul>
          
                  </li>
                  <li><a target="_top" href="http://example.com/?url=impressum.php" accesskey="1">Impressum</a></li>
              </ul>
          
            </div>

          Kommentar


          • #6
            Ich meine, dass ich bei einer Eingabe wie…

            PHP-Code:
            //Auslesen der aktuellen Seite (alle Dateien sind im Hauptverzeichnis)
            $aktuell substr($_SERVER['SCRIPT_NAME'], );

            $seiten[] = array ( "name" => "Impressum""url" => "impressum.php""sonstiges" => 'accesskey="1"'); // Beispiel - Array 
            …eine Ausgabe von genau einem Eintrag bekomme. Das ist nicht sonderlich spektakulär.

            Was das Auslagern in eine Funktion angeht: Du hast definierte Eingaben und Ausgaben, blockierst keine Variablennamen, kannst den Code ohne Redundanz an mehreren Stellen einsetzen, hast die Funktionalität für eine etwaige Wiederverwendung schön zusammen, …

            Kommentar


            • #7
              Hier noch ein Beispiel, das deckt dann ja alles ab, hoffe ich (einmal obere Ebene und einmal untere)
              PHP-Code:
              $seiten[] = array ( "name" => "Software""sub" =>
                               array(
                                   array( 
              "name" => "Antivir Werbung""url" => "antivir_werbung.php" ),
                                  array(
              "name" => "Fritzfax Anleitung""url" => "fritzfax_anleitung.php")
                                    )
                                 ); 

              Kommentar


              • #8
                Sorry, das wird so nichts. Wenn du Meinungen zu deinem Code hören möchtest, solltest du den Leuten wenigstens ein halbwegs brauchbares Testbeispiel liefern.

                Ich habe gerade versucht, mir was zusammenzudoktorn (was deine Aufgabe wäre), aber ich hänge mittlerweile fest, weil ich keinerlei Anhaltspunkte habe, was wann korrekterweise passieren oder dargestellt werden sollte.

                Du hast zum Beispiel CSS-IDs und -Klassen vergeben, lieferst aber kein Stylesheet mit. Bei deinem Menü geht es darum, dass der aktuell markierte Top-Level-Eintrag „ausgeklappt“ werden soll, aber du lieferst nur einen einzigen Top-Level-Eintrag als Testdaten mit. Außerdem zeigen deine Links aus irgendeinem Grund auf example.org (Pluspunkte für die Verwendung der Domain ), manche haben ein „nofollow“ gesetzt und insgesamt ist der Code ohne Kommentare nicht wirklich zu durchblicken.

                Mir ist klar, dass es für Anfänger nicht ganz leicht ist, zu entscheiden, was relevant ist und was nicht, fass diesen Post also bitte nicht falsch auf, aber es ist, wie es ist: In der aktuellen Form ist damit nicht viel anzufangen.



                Mein Versuch:

                PHP-Code:
                <?php

                function getMenu($seiten)
                {
                    
                //Auslesen der aktuellen Seite (alle Dateien sind im Hauptverzeichnis)
                    
                $aktuell substr($_SERVER['SCRIPT_NAME'], );

                    
                $ausgabe '';

                    foreach (
                $seiten as $seite) {
                        if (isset(
                $seite['sub'])) {
                            
                $check false;
                            
                $ausgabe .= "\t\t" '<li class="off" id="{[check]}">' .
                                    
                $seite['name'] . "\n" "\t\t\t" '<ul class="menueliste">' "\n";

                            foreach (
                $seite['sub'] as $unterseite) {
                                if (
                $unterseite['url'] == $aktuell) {
                                    
                $ausgabe.= "\t\t\t\t" '<li id="akt_sub">' .
                                            
                $unterseite['name'] . '</li>' "\n";
                                    
                $check true;
                                } else {
                                    
                $ausgabe.= "\t\t\t\t" '<li><a rel="nofollow" target="_top"
                    href="example.com/?url=' 
                $unterseite['url'] . '">' $unterseite['name'] .
                                            
                '</a></li>' "\n";
                                }
                            }

                            if (
                $check) {
                                
                $ausgabe str_replace('id="{[check]}"''id="akt"'$ausgabe);
                            } else {
                                
                $ausgabe str_replace('id="{[check]}"'''$ausgabe);
                            }

                            
                $ausgabe .= "\t\t\t</ul>\n\t\t</li>\n";
                        }
                        else {
                            if (
                $seite['url'] == $aktuell) {
                                
                $ausgabe.= "\t\t" '<li id="akt_up">' $seite['name'] . "</li>\n";
                            } else {
                                
                $ausgabe.= "\t\t" '<li><a target="_top" href="http://example.com/?url=' $seite['url'] . '" ' .
                                        
                $seite['sonstiges'] .
                                        
                '>' $seite['name'] . '</a></li>' "\n";
                            }
                        }
                    }

                    return 
                $ausgabe;
                }



                $seiten[] = array ( "name" => "Software""sub" =>
                                 array(
                                     array( 
                "name" => "Antivir Werbung""url" => "antivir_werbung.php" ),
                                    array(
                "name" => "Fritzfax Anleitung""url" => "fritzfax_anleitung.php")
                                      )
                                   );

                ?><!DOCTYPE html>

                <html lang="en">

                <head>
                    <meta charset="utf-8" />
                    <title>New</title>
                    <style type="text/css">

                #menu #akt {
                            background: red;
                }

                #menu #akt_sub {
                    background: green;
                }

                #menu #akt_up {
                    background: blue;
                }

                #menu .off {
                    background: gray;
                }

                #menu .menueliste {
                    background: turquoise;
                }

                    </style>
                </head>

                <body>
                    <ul id="menu">
                    
                    <?php echo getMenu($seiten); ?>

                    </ul>

                </body>

                </html>
                Zuletzt geändert von mermshaus; 22.06.2011, 00:08.

                Kommentar


                • #9
                  Ich versuches es noch einmal und hoffe, dieses Mal alles dabei zu haben, die vorigen Beiträge erstmal vergessen (keine Ahnung wo nofollow herkam)
                  Man soll doch im Forum immer example nutzen oder?


                  PHP-Code:

                  function aufklappmenue( array $seiten$aktuell)
                  {
                      
                  $ausgabe '';
                     
                      foreach ( 
                  $seiten as $seite )
                      {
                          if ( isset (
                  $seite['sub']) )  //Punkt mit Unterpunkten
                          
                  {
                              
                  $check false;
                  //Toplevel Eintrag (ohne Verlinkung) mit CSS
                              
                  $ausgabe .= "\t\t" '<li class="off" id="{[check]}">' 
                  $seite['name'] . "\n" "\t\t\t" '<ul class="menueliste">' "\n";
                  //Unterseiten werden gebildet
                              
                  foreach ( $seite['sub'] as $unterseite )
                              {
                                  if (
                  $unterseite['url'] == $aktuell)
                                  {
                                      
                  $ausgabe.= "\t\t\t\t" '<li id="akt_sub">' $unterseite['name']. '</li>' "\n";
                                      
                  $check true;
                                  }
                                 
                                  else
                                  {
                                      
                  $ausgabe.= "\t\t\t\t" .'<li><a target="_top" 
                  href="http://example.com/?url=' 
                  $unterseite['url'] . '">' 
                  $unterseite['name']. '</a></li>' "\n";
                                  }
                              }
                  //wenn einer der Unterpunkte die aktuelle Seite ist, dann soll der zum 
                  //Unterpunkt passende Top-Level-Eintrag mit einer ID versehen werden 
                  //(zur Hervorhebung), ansonsten wird der Platzhalter gelöscht
                              
                  if ( $check )
                                  
                  $ausgabe str_replace('id="{[check]}"''id="akt"'
                  $ausgabe);
                              else
                                  
                  $ausgabe str_replace('id="{[check]}"'''$ausgabe);
                              
                  $ausgabe .= "\t\t\t</ul>\n\t\t</li>\n";
                          }
                          else
                          {
                              if ( 
                  $seite['url'] == $aktuell )
                              {
                                  
                  $ausgabe.= "\t\t" '<li id="akt_up">' $seite['name']. 
                  "</li>\n";
                              }
                              else
                              {
                                  
                  $ausgabe.= "\t\t" '<li><a target="_top" 
                  href="http://example.com/?url=' 
                  $seite['url'] . '" ' $seite['sonstiges']
                   . 
                  '>' $seite['name']. '</a></li>' "\n";
                              }
                                     
                         
                          }
                      }
                          return 
                  $ausgabe;

                  Auf der Seite:
                  PHP-Code:
                  <?php $aktuell basename($_SERVER['SCRIPT_NAME'] );
                  //mehrdimensionales Array mit allen Seiten und Unterseiten
                  $seiten[] = array ( "name" => "Startseite""url" => "index.php" );
                  $seiten[] = array ( "name" => "HP ProBook 4720S""url" => "hp_probook_4720s_wt237ea_test.php" );

                  $seiten[] = array ( "name" => "Software""sub" =>
                                   array(
                                       array( 
                  "name" => "Antivir Werbung""url" => "antivir_werbung.php" ),
                                      array(
                  "name" => "Fritzfax Anleitung""url" => "fritzfax_anleitung.php")
                                        )
                                     );
                                     
                  $seiten[] = array ( "name" => "Videos""sub" =>
                                   array(
                                       array( 
                  "name" => "FritzFax""url" => "fritzfax_videoanleitung.php" ),
                                      array(
                  "name" => "Systemwiederherstellung""url" => "systemwiederherstellung.php"),
                                      array(
                  "name" => "Macrium Reflect""url" => "macrium_reflect.php")
                                        )
                                     );

                  $seiten[] = array ( "name" => "Downloads""url" => "downloads.php" );
                  $seiten[] = array ( "name" => "Kontakt""url" => "kontakt.php""sonstiges" => 'accesskey="9"');
                  $seiten[] = array ( "name" => "Quellen""url" => "quellen.php" );
                  $seiten[] = array ( "name" => "Datenschutzerkl&auml;rung""url"  => 
                  "datenschutz.php""sonstiges" => 'title="besondere Hinweise 
                   bez&uuml;glich Google Analytics"'
                  ); ?>

                  <div class="steuerung">
                  <ul>
                  <?php echo aufklappmenue($seiten$aktuell); ?>
                  </ul
                  </div>
                  CSS:
                  Code:
                  /* navigation */
                  .steuerung {
                      float:left;
                      margin:.4% 0 2% .5%;
                      width:218px;
                  }
                  .steuerung a , .steuerung li {
                      color:#00008b ;
                      display:block;
                  }
                  
                  .steuerung a:visited {
                      color:#800080;
                  }
                  .steuerung li:hover a {
                      font-weight:bolder;
                  }
                  li:hover.off a {
                      font-weight:normal;
                  }
                  .steuerung li {
                      background-image:url(bilder/navi_aqua.png);
                      background-repeat:no-repeat;
                      font-size:14px;
                      background-position:0 center;
                      list-style-type:none;
                      padding:11px;
                      position:relative;
                  }
                  
                  .off:hover ul , .steuerung li.over ul
                  {
                      display:block;
                  }
                  .off:before {
                      content:" >> ";
                      float:left;
                  }
                  .off:hover:before {
                      content:" ↓ ";
                  }
                  .menueliste
                  {
                      font-size:13px;
                      list-style-type:none;
                  }
                  .off ul
                  {
                      position:absolute ;
                      top: 0;
                      left: 198px;
                      display:none;
                  }
                  .steuerung .off .menueliste li:hover {
                      background-color:gray;
                  }
                  .steuerung .off .menueliste li:hover a {
                      color:white;
                  }
                  .steuerung .off .menueliste li
                  {
                      background-color:#add8e6 ; /*lightblue*/
                      padding:8px 2px 4px 6px;
                      background-image:none;
                      margin:0 0 0 10px;
                      border-bottom: 1px solid gray;
                      white-space:nowrap;
                  }
                  .steuerung li.off:hover {
                      background-position:0 0;
                      color:white;
                  }
                  .steuerung ul li:hover {
                      background-image:url(bilder/navi_aqua_hover.png);
                  }
                  .steuerung li:hover a {
                      color:white;
                  }
                  .off:hover li a {
                      color:#00008b;
                      background-image:none;
                  
                  }
                  /* Steuerung - Ausklappen der aktuellen Seite */
                  #akt ul
                  {
                      display:block;
                      position:relative;
                      top:0;
                      left:0;
                      margin:13px 16px 0 0;
                  
                  }
                  #akt .menueliste li
                  {
                      margin:0;
                      font-weight:normal;
                      width:215px;
                  }
                  
                  li#akt, #akt_up
                  {
                      background-position:0 0;
                      color:white;
                      background-image:url(bilder/navi_aqua_hover.png);
                      font-weight:bolder;
                  }
                  
                  #akt:before
                  {
                      content:" ↓ ";
                  }
                  #akt_up:before
                  {
                      content:" → ";
                  }
                      
                  .steuerung li#akt_sub
                  {
                      color:red;
                      font-weight:bolder;
                  }
                  #akt_sub:before
                  {
                      content:" → ";
                  }

                  Kommentar


                  • #10
                    Hallo,

                    so wie es aussieht, funktioniert das nur für eine feste Anzahl von Hierarchie-Ebenen. Wenn du die Funktion rekursiv umbaust, kannst du beliebig verschachtelte Menüs damit umsetzen. Kleine beispielhafte Starthilfe: Home page

                    Gruß,

                    Amica
                    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                    Super, danke!
                    [/COLOR]

                    Kommentar


                    • #11
                      Auch wenn ich es eigentlich gar nicht benötige, da ich nur 2 Ebenen habe, habe ich es mal mit der rekursiven versucht (scheint auch zu funktionieren, beim CSS müsste man vielleicht noch was anpassen, aber das habe ich nicht berücksichtigt):
                      PHP-Code:
                      <?php
                      function naviRecursive( array $seiten$aktuell$aktID='akt_up')
                      //$aktID für die ID Bestimmung der aktuellen Seite, je nachdem, ob es ein Ober- oder Unterpunkt ist
                      {
                          foreach ( 
                      $seiten as $seite )
                          {
                              if ( isset (
                      $seite['sub']) )
                              {
                                  
                      $ausgabe .= "\t\t" '<li class="off" id="{[check]}">' 
                      $seite['name'] . "\n" "\t\t\t" '<ul class="menueliste">' "\n";
                              
                                  
                      $recursive naviRecursive$seite['sub'], $aktuell"akt_sub");
                                  
                      $ausgabe .= $recursive[0] . "\t\t\t</ul>\n\t\t</li>\n";
                                  
                      $check $recursive[1];
                                  if ( 
                      $check )
                                      
                      $ausgabe str_replace('id="{[check]}"''id="akt"'$ausgabe);
                                  else
                                      
                      $ausgabe str_replace('id="{[check]}"'''$ausgabe);
                              }
                              else
                              {
                                  if ( 
                      $seite['url'] == $aktuell )
                                  {
                                      
                      $ausgabe.= "\t\t" '<li id="' $aktID '">' $seite['name']. "</li>\n";
                                      
                      $check true;
                                  }
                                  else
                                  {
                                      
                      $ausgabe.= "\t\t" '<li><a target="_top" 
                      href="http://example.com/?url=' 
                      $seite['url'] . '" ' $seite['sonstiges'
                      '>' $seite['name']. '</a></li>' "\n";
                                  }                
                              
                              }
                          }
                              return array ( 
                      $ausgabe$check);
                      }


                      ?>

                      Kommentar

                      Lädt...
                      X