Ankündigung

Einklappen
Keine Ankündigung bisher.

Dynamisches Navigations-Menü

Einklappen

Neue Werbung 2019

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

  • Dynamisches Navigations-Menü

    Hallo,

    was ich seit Stunden versuche zu erreichen steht beschreibt bereits der Titel dieses Themas.

    Ich habe eine Navigation mit verschiedenen Hauptpunkten und wieder verschiedenen Unterpunkten.

    Was ich möchte ist, dass die Unterpunkte nur beim Klick auf den jeweiligen Hauptpunkt angezeigt werden.

    Bsp:

    - Hauptpunkt 1
    - Hauptpunkt 2

    Klick auf Hauptpunkt 1:
    - Hauptpunkt 1
    > Unterpunkt 1
    > Unterpunkt 2
    > Unterpunkt 3
    - Hauptpunkt 2

    Da ich ein Layout verwende, welches von den einzelnen Pages inkludiert wird, muss ich dem Layout immer die aktuelle Navigation übermitteln. Sollte sich an der Website aber mal was ändern (z.B. kommt ein dritter Hauptpunkt dazu), dann muss ich immer alle einzelnen Pages umschreiben und für jeden Link die Konstruktion der Navigation wieder manuell umschreiben.

    Das geht doch sicher einfacher, oder? Leider stehe ich gerade absolut auf dem Schlauch, wie ich diese Sache routiniere.

    Evtl. mit Arrays? Aber ich komme nicht auf den richtigen Algo im Moment...

    Über einen Tipp wäre ich sehr dankbar.

    Lg

  • #2
    Da ich ein Layout verwende, welches von den einzelnen Pages inkludiert wird, muss ich dem Layout immer die aktuelle Navigation übermitteln.
    Dann hast du doch bereits eine Datei, die nur geändert werden muss. Oder verstehe ich dich falsch?
    War der Beitrag hilfreich? Dann Bedank dich mit einem klick auf .

    Kommentar


    • #3
      Liegt es am css
      Was ich möchte ist, dass die Unterpunkte nur beim Klick auf den jeweiligen Hauptpunkt angezeigt werden.
      oder macht dir der aufbau der ul li verschachtelungen probleme
      dann muss ich immer alle einzelnen Pages umschreiben und für jeden Link die Konstruktion der Navigation wieder manuell umschreiben.
      bei zweiterem fragt sich natürlich, wie du zu den daten (welche seiten gibt es, wie gehören diese zusammen) kommt.

      Kommentar


      • #4
        Wenn es an der Menüstruktur liegt, dann könnte ich dir hiermit aushelfen:
        PHP-Code:
        $menu = array(
            
        'Hauptpunkt 1' => array(
                
        'Unterpunkt 1.1',
                
        'Unterpunkt 1.2' => array(
                    
        'Unterpunkt 1.2.1',
                ),
            ),
            
        'Hauptpunkt 2' => array(
                
        'Unterpunkt 2.1',
                
        'Unterpunkt 2.2',
            ),
            
        'Hauptpunkt 3' => array(
                
        'Unterpunkt 3.1',
                
        'Unterpunkt 3.2',
                
        'Unterpunkt 3.3',
                
        'Unterpunkt 3.4'=> array(
                    
        'Unterpunkt 3.4.1',
                    
        'Unterpunkt 3.4.2',
                ),
            ),
        );
        function 
        build_menu(array $menu)
        {
            
        $html_list '<ul>';
            foreach(
        $menu as $key => $item)
                
        $html_list .= '<li>'.(is_array($item)?$key.build_menu($item):$item).'</li>';
            
        $html_list .= '</ul>';
            return 
        $html_list;
        }
        $menu_html build_menu($menu); 
        War der Beitrag hilfreich? Dann Bedank dich mit einem klick auf .

        Kommentar


        • #5
          Dynamische Navigation

          Hallo,

          vielen Dank für die schnellen Antworten!

          @Dreamwatcher:
          Danke für den Tipp, aber soweit war ich bereits (bis auf die Tatsache, dass mir dein Algo viel besser gefällt als meiner).

          Durch diese Methode sieht nachher meine Navigation aber so aus:
          - Hauptpunkt 1
          > Unterpunkt 1.1
          > Unterpunkt 1.2
          > Unterpunkt 1.2.1
          - Hauptpunkt 2
          > Unterpunkt 2.1
          > Unterpunkt 2.2
          ...

          Es werden alle überhaupt existierenden Punkte/Unterpunkte angezeigt.

          Ich möchte jedoch, dass immer nur die Unterpunkte desjenigen Hauptpunktes angezeigt werden, auf den geklickt wurde. Beispiel:
          Besucher wählt Hauptpunkt 2, dann soll das Menü so aussehen:
          - Hauptpunkt 1
          - Hauptpunkt 2
          > Unterpunkt 2.1
          > Unterpunkt 2.2
          - Hauptpunkt 3

          Wie kann ich deine Funktion so erweitern, dass ich ihr einen Befehl mitgebe, mit dem er die Navigation bis zum Hauptpunkt 2 quasi oberflächlich aufbaut, dann die Unterpunkte einbaut und dann wieder oberflächlich die anschließenden Hauptpunkte ohne Unterpunkte dran baut?
          Dieser Algo muss natürlich auch für tiefergehende Verschachtelungen noch funktionieren, immer mit demselben Prinzip (Würde Unterpunkt 2.1 angewählt werden, so müsste noch ein Unterpunkt 2.1.1 angehängt werden, dann wieder oberflächlich weiter mit Unterpunkt 2.2, Hauptpunkt 3 etc.)

          Hat das jemand verstanden?

          Kommentar


          • #6
            Es kommt nun darauf an, welche Informationen du hast.
            Wenn du genau abbilden kannst, wo du dich in deinem Navigationsbaum befindest wäre es natürlich besser.
            Andernfalls kann man andere Strategien verfolgen.
            Allerdings lohnt es sich jetzt nicht hier Code oder Ideen zu posten wenn der Ist-Zustand nicht klar ist.
            War der Beitrag hilfreich? Dann Bedank dich mit einem klick auf .

            Kommentar


            • #7
              Eine Vorab-Frage: Kommst du mit Klassen klar ?
              [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

              Kommentar


              • #8
                http://www.odi.ch/prog/css/nav/1.php

                sowas in der art ?

                Kommentar


                • #9
                  PHP-Code:
                  <?php

                  class Menue extends ArrayObject {

                      static private 
                  $renderCallback;

                      private 
                  $caption;
                      private 
                  $href;
                      private 
                  $isActive false;

                      public function 
                  __construct($caption null$href null)
                      {
                          if ( 
                  null === self::$renderCallback ) {
                              
                  self::setRenderCallback(function($environment, array $data = array()) {
                                  if ( 
                  $environment === 'stage-start' ) {
                                      return 
                  '<ul>';
                                  }
                                  else if ( 
                  $environment === 'stage-end' ) {
                                      return 
                  '</ul>';
                                  }
                                  else if ( 
                  $environment === 'item-start' ) {
                                      if ( 
                  $data['isActive'] ) {
                                          return 
                  '<li class="active">';
                                      }

                                      return 
                  '<li>';
                                  }
                                  else if ( 
                  $environment === 'item-end' ) {
                                      return 
                  '</li>';
                                  }
                                  else if ( 
                  $environment === 'link' ) {
                                      return 
                  '<a href="'.$data['href'].'">'.$data['caption'].'</a>';
                                  }
                              });
                          }

                          
                  $this->caption = (string) $caption;
                          
                  $this->href = (string) $href;
                      }
                     
                      public function 
                  offsetSet($offset$menue)
                      {
                          if ( ! 
                  $menue instanceof $menue ) {
                             throw new 
                  RuntimeException('Bad Content');
                          }

                          if ( 
                  false !== strpos($offset'/'0) ) {
                              throw new 
                  RuntimeException(
                                  
                  'menu names can not contain `/`-character'
                              
                  );
                          }

                          
                  parent::offsetSet($offset$menue);
                      }

                      public function 
                  __toString()
                      {
                          
                  $data = array(
                              
                  'caption' => $this->caption,
                              
                  'href' => $this->href,
                              
                  'isActive' => $this->isActive,
                          );

                          
                  $return '';

                          if ( ! empty(
                  $this->caption) ) {

                              
                  $return call_user_func(self::$renderCallback'item-start'$data);
                              
                  $return .= ! empty($this->href
                                  ? 
                  call_user_func(self::$renderCallback'link'$data)
                                  : 
                  $this->caption;
                          }

                          if ( 
                  $this->count() > ) {
                              
                  $return .= call_user_func(self::$renderCallback'stage-start'$data);
                              
                  $return .= join(PHP_EOLarray_map('strval'$this->getArrayCopy()));
                              
                  $return .= call_user_func(self::$renderCallback'stage-end'$data);
                          }

                          if ( ! empty(
                  $this->caption) ) {
                              
                  $return .= call_user_func(self::$renderCallback'item-end'$data);
                          }

                          return 
                  $return;
                      }

                      public function 
                  query($queryString)
                      {
                          if ( empty(
                  $queryString) ) {
                              return 
                  true;
                          }

                          
                  $query explode('/'trim($queryString'/'));
                          
                  $current array_shift($query);

                          if ( 
                  $this->offsetExists($current) ) {
                              
                  $this->offsetGet($current)->isActive true;
                              return 
                  $this->offsetGet($current)->query(join('/'$query));
                          }

                          return 
                  false;
                      }

                      public static function 
                  setRenderCallback(Closure $callback)
                      {
                          
                  self::$renderCallback $callback;
                      }

                  }
                  optional function wrapper:
                  PHP-Code:
                  function menue_set_render_callback(Closure $callback)
                  {
                      
                  Menue::setRenderCallback($callback);
                  }

                  function 
                  Menue($caption null$url null)
                  {
                      return new 
                  Menue($caption$url);

                  Usage:
                  PHP-Code:
                  $menue Menue();
                  $menue['google'] = Menue('google''http://www.google.de');
                  $menue['google']['mail'] = Menue('google mail''http://www.gmail.com');
                  $menue['yahoo'] = Menue('yahoo''http://www.yahoo.com');

                  $menue->query('google/mail');

                  echo 
                  $menue
                  per CSS schließt du einfach Knoten die nicht sichtbar sein sollen, weil nicht aktiv.

                  Code:
                  li:not(.active) ul {
                     display:none;
                  }
                  [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

                  Kommentar


                  • #10
                    Hallo,

                    huii das ist ja live-support hier!

                    @Dreamwatcher:
                    Ich habe alle Infos, ich muss sie nur aufgebaut bekommen
                    Angenommen, der Besucher klickt auf einen Unterpunkt, dann wird er auf eine neue Seite verlinkt, auf der das Navigationsmenü erneut aufgebaut wird. Als "Baubefehl" hätte ich den aktuellen Unterpunkt verwendet, der dann von einer Funktion aus die dementsprechend aussehende Navigation aufbaut, in eine Session speichert und der layout.php übergibt. So war es mein Plan

                    Ich bin gerade bei folgender Überlegung:
                    Mein Navigationsmenü hat a Hauptpunkte, b Unterpunkte und c Unterunterpunkte und d Unterunterunterpunkte (also 4 Ebenen).
                    Jeden dieser Haupt-/Unterpunkte habe ich in ein 4-dimensionales Array gespeichert und kann diese nach Belieben von meiner Navigations-Built-Funktion verwenden.

                    Wie wäre es nun, wenn ich die Nav-Built-Funktion immer mit einem Parameter aufrufe, der den aktuell selektierten Link repräsentiert (z.B. 1-2-1 für Hauptpunkt 1, Unterpunkt 2, Unterunterpunkt 1), und diese Funktion dann ein 4-dimensionales Array aufbaut, in welchem nur die Links stehen, die nachher auch in der Navigation angezeigt werden sollen? Anhand des Link-Pseudonyms lässt sich ja rauslesen, welche Punkte alle "offen" dargestellt werden müssen (in diesem Fall Hauptpunkt 1, Unterpunkt 2, Unterunterpunkt 1).

                    Ist diese Überlegung zu umständlich? Ich weiß nämlich noch nicht genau, wie ich den Algo der Funktion mache.

                    @tr0y:
                    Hui, ich kenne lediglich die allergröbsten Grundlagen zum Thema Klassen. So grundsätzlich, dass ich sie noch nie gebrauchen konnte.
                    Allerdings ist auch die Idee mit CSS nicht schlecht. Problem ist dann nur, dass immer nur der aktivierte Link angezeigt wird, oder? Ein Treeview-ähnliches Bild wird damit kaum möglich sein, da ich keine verschachtelten <ul> für Unterpunkte verwende, sondern einfach eingerückte <li>, also alle gleichwertig...

                    Kommentar


                    • #11
                      Zitat von K.Beutler Beitrag anzeigen
                      @tr0y:
                      Hui, ich kenne lediglich die allergröbsten Grundlagen zum Thema Klassen. So grundsätzlich, dass ich sie noch nie gebrauchen konnte.
                      Allerdings ist auch die Idee mit CSS nicht schlecht. Problem ist dann nur, dass immer nur der aktivierte Link angezeigt wird, oder? Ein Treeview-ähnliches Bild wird damit kaum möglich sein, da ich keine verschachtelten <ul> für Unterpunkte verwende, sondern einfach eingerückte <li>, also alle gleichwertig...
                      Ich rate davon ab mit li's rumzuspielen und Pseudo-Strukturen zu implementieren die viel leichter mit verschachtelten ULs zu realisieren sind. Das "Einrücken" kannst du immer noch via CSS erledigen, kein Grund die Sache zu verkomplizieren.

                      Mein Sourcecode oben erzeugt genau diese Verschachtelung und ermöglicht einen "Pfad" in dieser Verschachtelung als "aktiv" zu kennzeichnen.
                      [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

                      Kommentar


                      • #12
                        Hallo,

                        ok danke, ich werde den Rat mit den verschachtelten <ul> gleich umsetzen.

                        Dein Beispiel mit den Klassen ist sicher eine super Sache, aber ich verstehe da leider nur Bahnhof und versuche mich deshalb erst einmal an einer "einfacheren" Lösung, selbst wenn sie viel umständlicher und rechenzeitintensiver sein sollte.

                        Ich bin gerade dabei, meine in ein mehrdimensionales Array gespeicherten Navigations-Punkte auslesen zu lassen, scheitere aber an einem:

                        Angenommen, meine mehrdimensionales Array hat 3 Hauptpunkte, von denen jeder ein Array mit Unterpunkten hat --> dann habe ich ja 6 Inhalte in der ersten Array-Dimension (3x Hauptpunkt und 3x Unterarray).
                        Jetzt möchte ich nur die Hauptpunkte anzeigen lassen, wie kann ich das realisieren?

                        Beispiel:
                        Code:
                        $nav = array('Hauptpunkt1', array('unterpunkt1'), 'Hauptpunkt 2', array('Unterpunkt 2'), 'Hauptpunkt 3', array('Unterpunkt 3'));
                        
                        echo $nav[0] . '<br/>' . $nav[2] . '<br/>' . $nav[4];
                        So soll das mit einem Algo erreicht werden, quasi dass alle Hauptpunkte ohne die Sub-Arrays ausgelesen werden. Wie kann ich das realisieren?
                        Kann ich irgendwie erfragen, ob $nav[1] ein Array ist und falls zutreffend dann einfach überspringen? Gibts da ne Funktion?


                        EDIT: Ah, selbst rausgefunden --> is_array()

                        Kommentar

                        Lädt...
                        X