REDAXO Forum

hier eine "3 Level Navigation mit Twitter Bootstrap 3" zur freien verfügung.

Template File

<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-collapse collapse">
<?php

$PATH = explode("|",$this->getValue("path").$this->getValue("article_id")."|");

echo '<ul class="nav navbar-nav">';

foreach (OOCategory::getRootCategories() as $lev1)
	{
		if($lev1->getId() == $PATH[1])
		{
			if(count($lev1->getChildren())>0)
			{
				echo '<li class="active dropdown"><a class="dropdown-toggle" data-toggle="dropdown"  href="'.$lev1->getUrl().'" title="'.$lev1->getName().'">'.$lev1->getName().'</a>';
			}else{
				echo '<li class="active"><a href="'.$lev1->getUrl().'" title="'.$lev1->getName().'">'.$lev1->getName().'</a>';
			}
	}else{
		if(count($lev1->getChildren())>0)
		{
			echo '<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="'.$lev1->getUrl().'" title="'.$lev1->getName().'">'.$lev1->getName().'</a>';
		}else{
			echo '<li><a href="'.$lev1->getUrl().'" title="'.$lev1->getName().'">'.$lev1->getName().'</a>';
		}
	}

	if(count($lev1->getChildren())>0)
	{
		echo '<ul class="dropdown-menu">';
		foreach ($lev1->getChildren() as $lev2)
		{
			if($lev2->getId() == $PATH[1])
			{
				$dropdownSub = "";
				if(count($lev2->getChildren())>0) $dropdownSub = "dropdown-submenu";
				echo '<li class="active '.$dropdownSub.'"><a tabindex="-1" href="'.$lev2->getUrl().'" title="'.$lev2->getName().'">';
				echo $lev2->getName();
				echo '</a>';
				if(count($lev2->getChildren())>0)
				{
					echo '<ul class="dropdown-menu">';
					foreach ($lev2->getChildren() as $lev3)
					{
						if($lev3->getId() == $PATH[2])
						echo '<li class="active"><a href="'.$lev3->getUrl().'" title="'.$lev3->getName().'">'.$lev3->getName().'</a>';
						else
						echo '<li><a href="'.$lev3->getUrl().'" title="'.$lev3->getName().'">'.$lev3->getName().'</a>';
					}
					echo '</ul>';
				}


			}else{
				$dropdownSub = "";
				if(count($lev2->getChildren())>0) $dropdownSub = "dropdown-submenu";
				echo '<li class="'.$dropdownSub.'"><a tabindex="-1" href="'.$lev2->getUrl().'" title="'.$lev2->getName().'">';
				echo $lev2->getName();
				echo '</a>';
				if(count($lev2->getChildren())>0)
				{
					echo '<ul class="dropdown-menu">';
					foreach ($lev2->getChildren() as $lev3)
					{
						if($lev3->getId() == $PATH[2])
						echo '<li class="active"><a href="'.$lev3->getUrl().'" title="'.$lev3->getName().'">'.$lev3->getName().'</a>';
						else
						echo '<li><a href="'.$lev3->getUrl().'" title="'.$lev3->getName().'">'.$lev3->getName().'</a>';
					}
						echo '</ul>';
				}

			}
		}
		echo '</ul>';
	}
	echo '</li>';
	}
	
echo '</ul>';

?>
</div>
</div>
</div>
</div>

CSS Anpassung da BS3 kein class="dropdown-submenu" mehr supportet

Code: Alles auswählen

.dropdown-submenu>.dropdown-menu{display:none !important;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block !important;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

in einiged tagen folgt ne version mit dem seo42 addon aka nav42, was unter anderem auch zu mehr empfehlen ist!

Ist ja nett. Erste Ebene klickbar, auch auf Tablet und Phone?

Gruß Ralf

Hi syn,

besten Dank für das Template.
Ich würde gerne SEO42 bzw. NAV42 für die Bootstrap Navi anweden, da ich davon sehr begeistert bin.
Leider scheitere ich beim Einsatz der NAV42 aber immer an der Klasse des Links (class="dropdown-toggle" data-toggle="dropdown").
Hast Du vielleicht einen Tipp für mich, wie ich die Bootstrap-Navi mit NAV42 umsetzen kann. Bin leider kein PHP-Crack.

Besten Dank!

Wie soll denn die HTML-Ausgabe genau ausschaun? Hast ein Beispiel?

Hi RexDude,

danke für Deine Antwort. Soll eine normale Bootstrap-Dropdown-Navi sein. Mit der Navi von syn klappt das auch gut, aber NAV42 finde ich dann doch charmanter!

z.B. so

Code: Alles auswählen

<ul class="nav navbar-nav">
  <li class="active dropdown"><a class="dropdown-toggle" data-toggle="dropdown"  href="#">Kategorie 01</a>
    <ul class="dropdown-menu">
      <li class=""><a href="#" title="Kategorie 011">Kategorie 011</a>
      <li class=""><a href="#5" title="Kategorie 012">Kategorie 012</a>
    </ul>
  </li>
</ul>

Die Klassen für ul und li bekomme ich ja ohne Probleme über Nav42 hin, aber es scheitert daran, dem entsprechenden Listenpunkt in der 1 Ebene die Klasse "dropdown-toggle" zu geben.

Das heisst das erste LI der ersten UL benötigt Klassen "active dropdown" (oder ohne active?) sowie das A darin die Klasse "dropdown-toggle" inkl. data-toggle="dropdown" ??? Irgendwie wirds immer komplizierter

Also ich glaube dass elegenteste wäre ne setBootstrapDropdown Methode

Mmh...

Schade, ich hatte angenommen, dass es bestimmt schon einen Ansatz/Tipp für Bootstrap und NAV42 gibt.
Weiß leider nicht, wie ich es so umsetzen kann und werde dann wohl beim obigen Template bleiben müssen.
Vielen Dank für Deine Hilfe!

Jetzt muss ich leider auch mal klugscheissern... wenn du nicht ganz weißt, was du tust, dann solltest du das nicht versuchen.

BS3 hat die Eigenart, dass an sich angedacht ist die erste Ebene nur zu nutzen, wenn keine Subnavi vorhanden ist. Ansonsten gibt es einen Dropdown nur bei Klick.

Hier ist es sinnvoll im Netz nach den Umbauten zu suchen, die auch einen Hover gestatten.
Zuletzt muss man hier schauen, dass iOS und Android sich unterscheiden.

Evtl. werde ich mir das in den nächsten Tagen mal ansehen und etwas dazu veröffentlichen. Wer schon daran gewerkelt hat, darf aber auch gerne ein paar Tips zu NAV42 und BS3 abgeben

Gruß Ralf

Moinsen, ich weiß, es ist ein alter Thread. Ich habe eine Rex-Seite auf 4.irgendwas, die ich aufgrund der Größe nicht wirklich 'anfassen' will, um etwas an der Technik zu verändern. Zudem bin ich leider noch nicht wirklich dahinter gekommen, ob es für SEO42 die Bootstrap-Option inzwischen gibt.

Lange Rede, kurzer Sinn: Ich habe mir gestern mal den Code von syn hergenommen und ihn ein wenig verändert. Zum einen fehl(t)en schließende <li>-Tags, zum anderen wird ja der Menüeintrag zum togglen des Submenüs hergenommen. D.h. auf diese Seite kommt man als Benutzer gar nicht mehr. Ich wiederhole einfach den Eintrag und lasse ihn aktuell durch eine <hr> in eigenem <li> abtrennen. Ob das final die optimale Alternative ist, oder ob ich ggf. einfach mit CSS und 'Farbe' arbeiten werde, sei erstmal dahingestellt.

Außerdem habe ich die Codewiederholungen eliminiert. Die IFs für dropdown und active stehen jetzt nur noch für die Klassen, die sich verändern.

Im Template, welches ich gerade am entwickeln bin, funktioniert der generierte Code.

Code: Alles auswählen

<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-collapse collapse">
<?php

$PATH = explode("|",$this->getValue("path").$this->getValue("article_id")."|");

echo '<ul class="nav navbar-nav">';

foreach (OOCategory::getRootCategories() as $lev1) {
    if ($lev1->isOnline()) {
        echo "\n";
        echo '<li class="rex-article-'.$lev1->getId().' ';
        if ($lev1->getId() == $PATH[1]) {   #   probably has to be PATH[0]
            echo ' active ';
        }
        if (count($lev1->getChildren())>0) {
            echo ' dropdown"><a class="dropdown-toggle" data-toggle="dropdown" ';
        }
        else {
            echo '"><a ';
        }
        echo 'href="'.$lev1->getUrl().'" title="'.$lev1->getName().'">'.$lev1->getName().'</a>';
        
        #
        #   build 2nd level
        #
        if(count($lev1->getChildren())>0) {
            echo '<ul class="dropdown-menu">';
            #
            #   repeat category link in dropdown, as menu entry is used for toggling
            #
            echo '<li class="rex-article-'.$lev1->getId().' ';
            if ($lev1->getId() == $PATH[1]) {
                echo ' active ';
            }
            echo '"><a ';
            echo 'href="'.$lev1->getUrl().'" title="'.$lev1->getName().'">'.$lev1->getName().'</a>';
            echo '</li><li><hr /></li>';
            #   loop submenu entries
            foreach ($lev1->getChildren() as $lev2) {
                if ($lev2->isOnline()) {
                    echo "\n";
                    $dropdownSub = "";
                    if (count($lev2->getChildren())>0) $dropdownSub = "dropdown-submenu";
                    echo '<li class="rex-article-'.$lev2->getId().' ';
                    if ($lev2->getId() == $PATH[1]) {
                        echo ' active ';
                    }
                    if (count($lev2->getChildren())>0) {
                        echo ' dropdown-submenu ';
                    }
                    echo '"><a tabindex="-1" href="'.$lev2->getUrl().'" title="'.$lev2->getName().'">' . $lev2->getName() . '</a>';
                    #
                    #   build 3rd level
                    #
                    if (count($lev2->getChildren())>0) {
                        echo '<ul class="dropdown-menu">';
                        foreach ($lev2->getChildren() as $lev3) {
                            if ($lev3->isOnline()) {
                                echo "\n";
                                echo '<li class="rex-article-'.$lev3->getId().' ';
                                if ($lev3->getId() == $PATH[2]) {
                                    echo ' active ';
                                }
                                echo '"><a href="'.$lev3->getUrl().'" title="'.$lev3->getName().'">'.$lev3->getName().'</a></li>';
                            }
                        }
                        echo '</ul>';
                    }
                    echo '</li>';
                }
            }
            echo '</ul>';
        }
        echo '</li>';
    }
}
echo '</ul>';
echo "\n";
?>
</div>
</div>
</div>
</div>

Klingt gut. Das mit den fehlenden <li> habe ich auch bemerkt. Da aber Rexdude so ein schönes Addon hat namens Navigation Factory, setze ich diese für 4er Versionen ein. Sie ist als 1.1.1 noch erhältlich hier: https://redaxo.org/download/addons/navigation_factory/

REDAXO Forum

3 Level Navigation mit Twitter Bootstrap 3

3 Level Navigation mit Twitter Bootstrap 3

Re: 3 Level Navigation mit Twitter Bootstrap 3

Re: 3 Level Navigation mit Twitter Bootstrap 3

Re: 3 Level Navigation mit Twitter Bootstrap 3

Re: 3 Level Navigation mit Twitter Bootstrap 3

Re: 3 Level Navigation mit Twitter Bootstrap 3

Re: 3 Level Navigation mit Twitter Bootstrap 3

Re: 3 Level Navigation mit Twitter Bootstrap 3

Re: 3 Level Navigation mit Twitter Bootstrap 3

Re: 3 Level Navigation mit Twitter Bootstrap 3