[Bubble]

Hallo zusammen,

ich nutze für die Navigation immer eine PHP Abfrage. So, dass ich nicht auf jeder einzelnen HTML Seite die Navigation einfügen muss.

Hierfür füge ich lediglich in meine Mainfile folgendes ein:

<div id="navigation"><?php include('content/_navigation.php'); ?></div>

Das PHP dazu sieht so aus:

PHP-Code:

<?php

if (count($navigation) > 0)
  {
  echo '<ul>';

  foreach ($navigation as $value)
    {
    if ($value['bereich'] == $bereich)
      {
      echo '<li id="'.$value['id'].'" class="on"><a href="'.$value['link'].'">'.$value['name'].'</a></li>';
      }
    else
      {
      echo '<li id="'.$value['id'].'"><a href="'.$value['link'].'">'.$value['name'].'</a></li>';
      }
    }

  echo '</ul>

  <div class="vspacer"></div>';
  }

?>

und so:

PHP-Code:

<?php

$navigation = array();
$navigation['home'] = array('name' => 'Home', 'link' => 'home.html', 'bereich' => 'home', 'id' => 'home');
$navigation['unternehmen'] = array('name' => 'Unternehmen', 'link' => 'unternehmen.html', 'bereich' => 'unternehmen', 'id' => 'unternehmen');
$navigation['dienstleistungen'] = array('name' => 'Dienstleistungen', 'link' => 'dienstleistungen.html', 'bereich' => 'dienstleistungen', 'id' => 'dienstleistungen');
$navigation['produkte'] = array('name' => 'Produkte', 'link' => 'produkte.html', 'bereich' => 'produkte', 'id' => 'produkte');
$navigation['referenzen'] = array('name' => 'Referenzen', 'link' => 'referenzen.html', 'bereich' => 'referenzen', 'id' => 'referenzen');
$navigation['kontakt'] = array('name' => 'Kontakt', 'link' => 'kontakt.html', 'bereich' => 'kontakt', 'id' => 'kontakt');

?>

Ich möchte nun aber eine Navigation nutzen, die bei einem Mousehover nach unten hin "ausfährt". Sprich eine Subnavigation. So dass ein Listenpunkt noch mehrere Unterpunkte hat.

Sieht im HTML so aus:

    <ul id="topnav">
        <li><a href="">Home</a></li>
        <li>
            <a href="">About</a>
            <span>
                <a href="">The Company</a> |
                <a href="">The Team</a> |
                <a href="">Careers</a>
            </span>
        </li>
        <li>
            <a href="">Services</a>
            <span>
                <a href="">What We Do</a> |
                <a href="">Our Process</a> |
                <a href="">Testimonials</a>
            </span>
        </li>
        <li>
            <a href="">Portfolio</a>
            <span>
                <a href="">Web Design</a> |
                <a href="">Development</a> |
                <a href="">Identity</a> |
                <a href="">SEO &amp; Internet Marketing</a> |
                <a href="">Print Design</a>
            </span>
        </li>
        <li><a href="">Contact</a></li>
    </ul>

Ich bin an dieser Sache schon so lange dran und habe es nie hinbekommen.

Ich weiss einfach nicht, wie ich die 2 PHP Datein umschreiben muss, dass es funktioniert.

Wenn mir diesbezüglich jemand weiterhelfen könnte wäre ich unendlich dankbar. Ich bin nämlich mit meinem Latein am Ende.

Beste Grüße

Cathrin

[explanator]

Du verwendest für die Erstellung deiner Liste eine Iteration. Dafür liest du die Schlüssel und Werte aus einem mehrdimensionalen Array ein.
Dieses Vorgehen macht man eigentlich nur wenn die Daten aus einer Datenbank kommen und dann dynamisch eine Liste daraus kreiert wird.

Da du eigentlich die Navigation als Array vorliegen hast und mit include() einbindest, könntest du dir den gesamten Schleifenvorgang sparen, wenn du die Navigation schon als Html direkt über das include() lädst.

Also so zum Beispiel:
_navigation.php

PHP-Code:

<?php
<ul id="topnav">
        <li><a href="">Home</a></li>
        <li>
            <a href="">About</a>
            <ul>
                <li><a href="">The Company</a> | </li>
                <li><a href="">The Team</a> | </li>
                <li><a href="">Careers</a></li>
            </ul>
        </li>
        
        /* gekürzt */
        
</ul>
?>

An der Stelle wo du das include stehen hast musst du nicht mal was ändern.

Schneller ist es zudem auch noch und du sparst dir Schreiberei, weitere Fehlerquellen und hast auch gleich die Ausgabe des HTML vorliegen.

Im übrigen habe ich den HTML-Code der Liste mal verbessert, da man das mit verschachtelten Listen löst.

Die Ausgabedarstellung machst du dann wie gehabt mit CSS.

Wenn du wissen willst wie man Verschachtelte Listen anhand einer Rekursion dynamisch erstellt lies einfach mal diesen Artikel ⇒ Nested Sets – Verschachtelte Bume mit MySQL - Arne Klempert

[mermshaus]

Kannst auch mal hier schauen: PHP Forum: phpforum.de - Themen mit dem Stichwort rekursion

Dort sind einige Ansätze genannt, wie du Datenstrukturen in Bäume und schließlich HTML-Listen überführen kannst.

[Bubble]

Soooo, erstmal vielen lieben Dank für das ganze Feedback.

Ich habe jetzt folgendes mal probiert:

Habe den array weggelassen und die navi direkt über php komplett eingebunden.

PHP-Code:

<?php


  echo ' <ul id="topnav">
        <li><a href="">Home</a></li>
        <li>
            <a href="unternehmen.html">Unternehmen</a>
            <span>
                <a href=""></a> |
                <a href=""></a> |
                <a href=""></a> |
        <a href=""></a> |
        <a href=""></a> |
        <a href=""></a> |
        <a href=""></a>
            </span>
        </li>
        <li>
            <a href="dienstleistung.html">Dienstleistung</a>
            <span>
                <a href=""></a> |
                <a href=""></a> |
        <a href=""></a> |
        <a href=""></a> |
                <a href=""></a> |
        <a href=""></a>
        </span>
        </li>

    </ul>
  <div class="vspacer"></div>';


?>

Das funktioniert auch.

Problem ist jetzt nur, dass ich nicht weiss wie ich es machen soll, dass bei den Hauptmenüpunkten ein "active" oder "on" gesetzt wird.

Also wenn ich z. B. Home oder Unternehmen angeklickt habe, dass der Hover Effeckt dann bestehen bleibt. Also um zu wissen auf welcher Seite man sich grad befindet.

Das war vorher ja hierrüber geregelt:

PHP-Code:

<?php

if (count($navigation) > 0)
  {
  echo '<ul>';

  foreach ($navigation as $value)
    {
    if ($value['bereich'] == $bereich)
      {
      echo '<li id="'.$value['id'].'" class="on"><a href="'.$value['link'].'">'.$value['name'].'</a></li>';
      }
    else
      {
      echo '<li id="'.$value['id'].'"><a href="'.$value['link'].'">'.$value['name'].'</a></li>';
      }
    }

  echo '</ul>

  <div class="vspacer"></div>';
  }

?>

Hier wurde ja die Bedingung gesetzt mit der class="on".

Wie könnte ich das jetzt regeln?

Schonmal vielen Dank im vorraus.

lg Cathrin

[explanator]

PHP-Code:

switch($bereich)
{
  case ("home"):
  $active1 = 'class="on" ';
  break;
 
  case ("unternehmen"):
  $active2 = 'class="on" ';
  break;

  case ("dienstleistungen"):
  $active3 = 'class="on" ';
  break;

  default:
  $active1 = 'class="on" ';
  break;
} 


ins Menu fügst du dann ein:

<li <?php=$active1?>> <a href="" >Home</a></li>

usw.

Du hast die Liste nicht verschachtelt gelassen. Warum nicht?

[mermshaus]

Habe mal wieder ein wenig an einem Menü-Generator gebastelt:

- https://gist.github.com/mermshaus/5643279

Setup: Alle Dateien in ein Verzeichnis innerhalb des Docroots kopieren (oder natürlich direkt per Git klonen), dann das Verzeichnis im Browser anwählen.

Dann einfach rumklicken.

Eventuell muss noch die RewriteBase gesetzt werden, aber in der Regel sollte das auch so klappen.

Die Klasse nimmt derlei Eingaben entgegen…

# Whitespace vor/nach dem Trenner ist egal.
# Habe das nur aus Übersichtsgründen angeglichen.
# Dass mit vier Spaces eingerückt wird, ist aber wichtig.

Item 1              ; /a
    Item 1.1        ; /a/a
Item 2              ; /b
    Item 2.1        ; /b/a
    Item 2.2        ; /b/b
    Item 2.3        ; /b/c
        Item 2.3.1  ; /whatever
Item 3              ; /c

…und generiert daraus grob dieses HTML:

<ul>
  <li><a href="/fiddle/mb/a">Item 1</a>
    <ul>
      <li><a href="/fiddle/mb/a/a">Item 1.1</a></li>
    </ul>
  </li>
  <li class="onpath"><a href="/fiddle/mb/b">Item 2</a>
    <ul>
      <li><a href="/fiddle/mb/b/a">Item 2.1</a></li>
      <li><a href="/fiddle/mb/b/b">Item 2.2</a></li>
      <li class="onpath"><a href="/fiddle/mb/b/c">Item 2.3</a>
        <ul>
          <li class="onpath selected"><a href="/fiddle/mb/whatever">Item 2.3.1</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="/fiddle/mb/c">Item 3</a></li>
</ul>

„/fiddle/mb“ wird automatisch ergänzt (kann konfiguriert werden). Das ist der Pfad auf dem Test-/Webserver vom Document Root bist zum „Projektverzeichnis“. Die Pfadangaben in der Menü-Definition sind relativ zu einem theoretischen „Projekt Root“.

Zudem werden die CSS-Klassen „onpath“ und „selected“ hinzugefügt (ebenfalls konfigurierbar). „selected“ bezeichnet das gerade aktive Menü-Element, „onpath“ bezeichnet alle Elternelemente dieses Menü-Elements.

Das wird automatisch anhand der aktuellen URL berechnet. Die lautet hier aktuell etwa: http://localhost/fiddle/mb/whatever

Da wird erst mal der uninteressante Pfadanteil bis zum Projektverzeichnis („http://localhost/fiddle/mb“) weggeschnitten. Dann wird das Menü-Element gesucht, das zur Pfadangabe „/whatever“ passt. Wenn das gefunden ist, hangelt sich der Code den Menü-Baum nach oben und kann so auch die Menü-Elemente identifizieren, die auf dem Pfad liegen.

Anders gesagt: Der Mechanismus basiert nicht darauf, dass „/foo“ auf dem Pfad zu „/foo/bar“ liegt, sondern analyisiert ausschließlich die definierte Hierarchie, also die linke Seite hier:

Item 2              ; /b
    ....
    Item 2.3        ; /b/c
        Item 2.3.1  ; /whatever

Die rechte Seite spielt keine Rolle und kann beliebig gewählt werden.

Das beigefügte CSS ist natürlich nur ein Beispiel. Die Ausgabe muss nicht als Dropdown gestylet werden.


Der Code selbst ist ziemlich scheußlich (habe das hauptsächlich geschrieben, um mal wieder mit Baumstrukturen zu experimentieren und geschickte Vorgehensweisen zu suchen und praktische Notwendigkeiten zu entdecken). Wie immer wird es derartige Komponenten schon in besser geben (im Zweifel bei Zend oder Symfony gucken).

[Bubble]

Vielen Dank für das Feedback.

Hatte jetzt erst die Gelegenheit mir alles anzusehen.

Ich werde das von dir direkt mal testen mermshaus. Genail. Vielen Dank!


@explanator:

Ahhh so macht man das. Argh. Gewusst wie.


Ich hatte es jetzt vorrübergehend so gelösts: ^^

PHP-Code:

if($bereich == 'home') {  
echo 
'<style type="text/css">
    ul#topnav li.home {
    background:url(../img/layout/navHOVER.jpg) 0 0 repeat-x;
    color:#ffffff;
    display:block;
    padding:11px 20px 9px 20px;
    box-shadow: 4px 1px 2px -4px #000000;
    }
</style>';
} 


EDIT: Ach so, ich hatte das jetzt mit span erstmal so gelassen, weil ich sonst wieder die ganze css abändern hätte müssen und ich kaum Zeit hatte. Eleganter ist natürlich die verschachtelte Liste.