Forum

[tekkmedia]

Hallo zusammen,

wir haben ca. 100 Kategorien auf der 1. Ebene, die auch alle auf der Startseite so dargestellt werden sollen, 3 Spalten Layout.

Wenn wir aber in der linken Spalte die Navigation dafür ausgeben wird es von der Höhe her im Layout einfach zu groß, zuviel zum scrollen nach unten.

Gibt es eine Möglichkeit die Navigation auf zu splitten?

So das wir in der linken Spalte die ersten 50 Elemente der Navigation haben und in der rechten Spalte die nächsten 50+ Elemente der Navi?

LG Dennis

[Gregor.Harlan]

Hallo,

Gibt es eine Möglichkeit die Navigation auf zu splitten?

Ja, die gibt es.

Wie sieht denn aktuell dein Navigationstemplate aus?

Gruß, Gregor

[tekkmedia]

Das freut mich zu hören

Hier mein Navigations Template:

Code: Alles auswählen

<?php
// EXPLODE PATH
$PATH = explode("|",$this->getValue("path").$this->getValue("article_id")."|");

// GET CURRENTS
$path1 = (isset ($PATH[1])) ? $PATH[1] : '';
$path2 = (isset ($PATH[2])) ? $PATH[2] : '';
$path3 = (isset ($PATH[3])) ? $PATH[3] : '';
$sitePath = '';
$titlePath = '';
$navLeftCol = '';



/* START 1st level categories */
$navLeftCol .= '<div class="nav">';
foreach (OOCategory::getRootCategories() as $lev1) {

   if ($lev1->isOnline()):
      if ($lev1->getId() == $path1) {
         $navLeftCol .= '<a href="'.$lev1->getUrl().'" style="border-top: none" class="navsel" title="'.$lev1->getName().'">'.$lev1->getName().'</a>';
         if ($lev1->getId() != "1") {
            $sitePath .= ' ›› <a href="'.$lev1->getUrl().'">'.$lev1->getName().'</a></li>';
         }
         $titlePath .= ' >> '.$lev1->getName();
      }
      // 1st level - no active link
      else {
         $navLeftCol .= '<a href="'.$lev1->getUrl().'" style="border-top: none" class="nav" title="'.$lev1->getName().'">'.$lev1->getName().'</a>';
      }

      // 1st level had categories? -> go on
      $lev1Size = sizeof($lev1->getChildren());

   if ($lev1->getId() == $path1) {
      if ($lev1Size != "0"):
         # $navLeftCol .= '<ul class="nav2nd">';


         // START 2nd level categories
         foreach ($lev1->getChildren() as $lev2):

            if ($lev2->isOnline()):

            // 2nd level - active link
               if ($lev2->getId() == $path2) {
                  $navLeftCol .= '<a href="'.$lev2->getUrl().'" style="border-top: none" class="navsel" title="'.$lev2->getName().'">&nbsp;&nbsp;&raquo; '.$lev2->getName().'</a>';
                  $sitePath .= ' ›› <a href="'.$lev2->getUrl().'">'.$lev2->getName().'</a>';
                  $titlePath .= ' >> '.$lev2->getName();
               }
               // 2nd level - no active link
               else {
                  $navLeftCol .= '<a href="'.$lev2->getUrl().'" style="border-top: none" class="nav2" title="'.$lev2->getName().'">&nbsp;&nbsp;&raquo; '.$lev2->getName().'</a>';
               }

            endif;

         endforeach;
         // END 2nd level categories

         # $navLeftCol .= '</ul>';
      endif; // END by if ($lev1Size != "0"):

   }
   endif; // END by if ($lev1->isOnline())
}
$navLeftCol .= '</div>';
// END 1st level categories

if ($REX['CUR_CLANG'] == 1) $breadcrumb = 'You are here: <a href="/index.php?clang=1">Startpage</a> '.$sitePath;
else $breadcrumb = 'Sie befinden sich hier: <a href="/index.php">Startseite</a> '.$sitePath;


?>

[Xong]

Hi!

Warum löst ihr das Problem nicht mit CSS?

LG,
Xong

[Gregor.Harlan]

Hallo,

probier es mal so (ungetestet):

Code: Alles auswählen

<?php
// EXPLODE PATH
$PATH = explode("|",$this->getValue("path").$this->getValue("article_id")."|");

// GET CURRENTS
$path1 = (isset ($PATH[1])) ? $PATH[1] : '';
$path2 = (isset ($PATH[2])) ? $PATH[2] : '';
$path3 = (isset ($PATH[3])) ? $PATH[3] : '';
$sitePath = '';
$titlePath = '';
$navLeftCol = '';
$navRightCol = '';



/* START 1st level categories */
$navLeftCol .= '<div class="nav">';
$navRightCol .= '<div class="nav">';
$nav = '';
$count = 0;
foreach (OOCategory::getRootCategories() as $lev1) {

   if ($lev1->isOnline()):
      $count++;
      if ($count == 51) {
        $navLeftCol .= $nav;
        $nav = '';
      }
      if ($lev1->getId() == $path1) {
         $nav .= '<a href="'.$lev1->getUrl().'" style="border-top: none" class="navsel" title="'.$lev1->getName().'">'.$lev1->getName().'</a>';
         if ($lev1->getId() != "1") {
            $sitePath .= ' ›› <a href="'.$lev1->getUrl().'">'.$lev1->getName().'</a></li>';
         }
         $titlePath .= ' >> '.$lev1->getName();
      }
      // 1st level - no active link
      else {
         $nav .= '<a href="'.$lev1->getUrl().'" style="border-top: none" class="nav" title="'.$lev1->getName().'">'.$lev1->getName().'</a>';
      }

      // 1st level had categories? -> go on
      $lev1Size = sizeof($lev1->getChildren());

   if ($lev1->getId() == $path1) {
      if ($lev1Size != "0"):
         # $navLeftCol .= '<ul class="nav2nd">';


         // START 2nd level categories
         foreach ($lev1->getChildren() as $lev2):

            if ($lev2->isOnline()):

            // 2nd level - active link
               if ($lev2->getId() == $path2) {
                  $nav .= '<a href="'.$lev2->getUrl().'" style="border-top: none" class="navsel" title="'.$lev2->getName().'">&nbsp;&nbsp;&raquo; '.$lev2->getName().'</a>';
                  $sitePath .= ' ›› <a href="'.$lev2->getUrl().'">'.$lev2->getName().'</a>';
                  $titlePath .= ' >> '.$lev2->getName();
               }
               // 2nd level - no active link
               else {
                  $nav .= '<a href="'.$lev2->getUrl().'" style="border-top: none" class="nav2" title="'.$lev2->getName().'">&nbsp;&nbsp;&raquo; '.$lev2->getName().'</a>';
               }

            endif;

         endforeach;
         // END 2nd level categories

         # $navLeftCol .= '</ul>';
      endif; // END by if ($lev1Size != "0"):

   }
   endif; // END by if ($lev1->isOnline())
}
if ($count > 50)
  $navRightCol .= $nav;
else
  $navLeftCol .= $nav;
$navLeftCol .= '</div>';
$navRightCol .= '</div>';
// END 1st level categories

if ($REX['CUR_CLANG'] == 1) $breadcrumb = 'You are here: <a href="/index.php?clang=1">Startpage</a> '.$sitePath;
else $breadcrumb = 'Sie befinden sich hier: <a href="/index.php">Startseite</a> '.$sitePath;


?>

Du hast jetzt zwei Variablen: $navLeftCol und $navRightCol.

Warum löst ihr das Problem nicht mit CSS?

Wie soll das gehen?

Gruß, Gregor

[Xong]

Hallo Gregor!

Warum löst ihr das Problem nicht mit CSS?

Wie soll das gehen?

Da gibt es mehrere Möglichkeiten.

1. Möglichkeit
Alle Listenpunkte einfach links floaten und die Breite der Punkte maximal auf die Hälfte der Breite des Elternelements setzen.

2. Möglichkeit
Den Listenpunkten abwechselnd eine der Klassen odd und even geben. Per CSS werden alle Listenpunkte gefloatet und die mit der Klasse even bekommen einen linken Außenabstand, der der Breite der Elemente mit der Klasse odd entspricht.
Unterschied zur ersten Methode ist die Darstellung der Reihenfolge der Listenpunkte.

Diese beiden Methoden sind sehr einfach zu realisieren, allerdings gibt es noch weitere Möglichkeiten:
Multi-Column Lists

LG,
Xong

[Gregor.Harlan]

Hallo Xong,

tekkmedia möchte aber ja nicht die Punkte abwechselnd auf links und rechts verteilen, sondern die ersten 50 links, der Rest rechts. Außerdem (wenn ichs richtig verstanden habe) ist mit "rechts" ganz rechts gemeint, also zwischen den beiden Navigationsspalten ist noch die eigentliche Content-Spalte.

Gruß, Gregor

[Xong]

Hi Gregor!

tekkmedia möchte aber ja nicht die Punkte abwechselnd auf links und rechts verteilen, sondern die ersten 50 links, der Rest rechts.

Das wäre wie gesagt auch mit CSS möglich.

Außerdem (wenn ichs richtig verstanden habe) ist mit "rechts" ganz rechts gemeint, also zwischen den beiden Navigationsspalten ist noch die eigentliche Content-Spalte

Ich habe das mit dem "3 Spalten Layout" euphorisch überlesen. =)
Dachte, dass wäre eine Portalseite.

Für ein 3-Spalten-Layout ist die Aufteilung in zwei Listen natürlich sinnvoll.

LG,
Xong

[tekkmedia]

klappt perfekt, vielen dank