2013-09-25 9 views
5

Ich bin derzeit ein joomla Menü-Modul zu schaffen, aber Ive über einige Fragen kommen ..PHP aufgeteilt ul gleichmäßig in drei Spalten Joomla Menu Modul

Ich versuche, das Untermenüpunkte in drei Spalten aufgeteilt, zur Zeit bin ich mit diesem:

$counter = 0; 

if($item->level == 2): 
    $counter += count($item); 
endif; 

if($item->level == 1): 
    $counter = 0; 
endif; 

if($counter%3 == 0 && $item->level == 2){ 
     echo '</ul><ul class="col-lg-3">'; 
    } 

aber dies nur Gruppen, um sie in 3s

Hier ist die gesamte default.php:

<?php 

// No direct access 
defined('_JEXEC') or die; 

// Note. It is important to remove spaces between elements. 
$counter = 0; 

?> 

<ul class="nav navbar-nav <?php echo $class_sfx; ?> nav-mega"<?php 
$tag = ''; 
if ($params->get('tag_id') != null) 
{ 
    $tag = $params->get('tag_id') . ''; 
    echo ' id="' . $tag . '"'; 
} 
?>> 

<?php 
    foreach ($list as $i => &$item) { 

     if($item->level == 2): 
      $counter += count($item); 
     endif; 

     if($item->level == 1): 
      $counter = 0; 
     endif; 

     $class = 'item-' . $item->id; 
     if ($item->id == $active_id) { 
      $class .= ' current'; 
     } 

     if (in_array($item->id, $path)){ 
      $class .= ' active'; 
     }elseif ($item->type == 'alias'){ 
      $aliasToId = $item->params->get('aliasoptions'); 
      if (count($path) > 0 && $aliasToId == $path[count($path) - 1]) { 
       $class .= ' active'; 
      }elseif (in_array($aliasToId, $path)){ 
       $class .= ' alias-parent-active'; 
      } 
     } 

     if ($item->deeper){ 
      $class .= ' deeper dropdown'; 
     } 

     if ($item->parent){ 
      $class .= ' parent'; 
     } 

     if (!empty($class)){ 
      $class = ' class="' . trim($class) . '"'; 
     } 

     echo '<li' . $class . '>'; 

     // Render the menu item. 
     switch ($item->type){ 
      case 'separator': 
      case 'url': 
      case 'component': 
       require JModuleHelper::getLayoutPath('mod_blogmenu', 'default_' . $item->type); 
      break; 

      default: 
       require JModuleHelper::getLayoutPath('mod_blogmenu', 'default_url'); 
      break; 
     } 

     // The next item is deeper. 
     if($counter%3 == 0 && $item->level == 2){ 
      echo '</ul><ul class="col-lg-3">'; 
     } 

     if ($item->deeper){ 
      echo '<div class="dropdown-menu mega-dropdown">'; 
      echo '<div class="mega-image col-lg-3 thumbnail visible-md visible-lg"><img src="'.$item->menu_image.'" /></div>'; 
      echo '<ul class="col-lg-3">'; 
     } 
       // The next item is shallower. 
     elseif ($item->shallower){ 

      echo str_repeat('</ul><div class="mega-caption"></div></div>', $item->level_diff); 
     } 
       // The next item is on the same level. 
     else { 
      //echo '</li>'; 
     } 
    } 

?> 
</ul> 

Sorry eine Menge Code; Ich versuche immer noch, PHP zu lernen und zu versuchen, Joomlas Art zu verstehen, Dinge zu tun, es ist nicht allzu einfach für mich.

+0

Ich habe nicht zu tief in den Code einzutauchen, aber warum fügst du einen Code ein, der eine "ul" zwischen denen schließt, die ein 'li 'öffnen und schließen, das diese' ul 'enthalten sollte, wenn ich das Design richtig verstehe? – MasterAM

+0

weil ich nicht weiß, was ich tue? .. ich reparierte das meiste davon, es nur spaltet sie in 3 Spalten jetzt. Schlecht aktualisiere meine Frage .. Danke für die Antwort –

+0

Wie Sie eine hierarchische Liste haben, Es ist nicht möglich, in HTML (wie Sie es in irgendeiner allgemeinen Bedeutung tun) mehrere Spalten daraus zu erstellen. Ich würde mit einem 'RecursiveIterator' gehen, weil es Ebenen verfolgen kann, da Sie die gesamte UL/LI-Hierarchie schließen müssen, wenn eine Spalte endet, und sie erneut öffnen, wenn die nächste Spalte beginnt. Es ist nicht so einfach zu erklären, oder so einfach, den Code zu schreiben, einige verwandten Code könnte verlinkt werden: [Überprüfung Wert in n-Tiefe Baum?] (Http://stackoverflow.com/a/12758996/367456) – hakre

Antwort

1

Bevor Sie alle Menüelemente durchlaufen, zählen Sie alle Untermenüs für jedes Menüelement. (Haftungsausschluss:. Ich habe keine Kenntnis von Joomla-Menüs, aber ich bin der Hoffnung, $ item-> Eltern-> id Verweise auf ID des übergeordneten Artikel)

$submenuItemsTotals = array(); 
foreach ($list as $i => &$item) { 
    if ($item->level == 2) { 
     if (!isset($submenuItemsTotal[$item->parent->id])) { 
      $submenuItemsTotal[$item->parent->id] = 1; 
     } else { 
      $submenuItemsTotal[$item->parent->id]++; 
     } 
    } 
} 

$itemsPerColumn = array(); 
foreach ($submenuItemsTotals as $parentId => $submenuItemsTotal) { 
    $itemsPerColumn[$parentId] = ceil($submenuItemsTotal/3); 
} 


// Here comes your existing code with a small change 

foreach ($list as $i => &$item) { 
    [your code....] 

    // The next item is deeper. 
    if($item->level == 2 && ($counter % $itemsPerColumn[$item->parent->id]) == 0){ 
     echo '</ul><ul class="col-lg-3">'; 
    } 

    [your code....] 
} 
+0

danke, werde ich versuchen, diese in einem Moment –

+0

Nochmals vielen Dank für Ihre Antwort, aber ich habe die folgenden Fehler: Notice: Undefined index: 108 in /storage/websites/niflas/modules/mod_blogmenu/tmpl/default.php auf Zeile 89 Warnung: Division durch Null in /storage/websites/niflas/modules/mod_blogmenu/tmpl/default.php in Zeile 89 –

0

Können Sie es in CSS-Spalten einfügen?

<!DOCTYPE html> 
<html> 
<head> 

<style> 
div.columns { 
column-width: auto; 
-moz-column-width: auto; 
-webkit-column-width: auto; 
column-count: 3; 
-moz-column-count: 3; 
-webkit-column-count: 3; 
column-gap: 1em; 
-moz-column-gap: 1em; 
-webkit-column-gap: 1em; 
} 

.nosplit { 
display: inline-block; 
} 
</style> 

</head> 

<body> 

<div class="columns"> 
<ul> 
<li>item01</li> 
<li>item02</li> 
<li>item03</li> 
<li>item04</li> 
<li class="nosplit">item05 
    <ul> 
    <li>item05a</li> 
    <li>item05b</li> 
    </ul> 
    </li> 
<li>item06</li> 
<li>item07</li> 
<li class="nosplit">item08 
    <ul> 
    <li>item08a</li> 
    <li>item08b</li> 
    <li>item08c</li> 
    </ul> 
    </li> 
<li>item09</li> 
<li>item10</li> 
</ul> 

</body> 

</html> 
+0

hey, einzigartige Lösung danke, aber ich muss IE8 unterstützen .. wird das noch funktionieren? –

+0

@DawidvanderHoven - Mit dieser Methode müssen Sie ein JS-Plugin verwenden, da IE8 keine Spalten unterstützt. sollte jede "Spalte" aufteilen mit einem 'div' und geben sie' float: left; ' – Lodder

+0

oh ya, ie8. Ach. – egrutz