Hallo sarronsarron,
da braucht es keine extra Navigation für. Kannst Du mit der normalen navigation_main lösen indem Du die css-Klassen entsprechend anpasst.
Beispiel:
https://www.michaelschulze-coach.de Die Seite ist grad im Aufbau, daher nur zwei Level in der Hauptnavi. Funktioniert aber auch mit nem weiteren Level, die L3-Punkte werden dann neben den L2 angezeigt:
[Level 1]
[Level 1] [Level 1] [Level 1] [Level 1.]
............[Level 2]
............
[Level 2][Level 3]
............[Level 2][Level 3]
........................
[Level 3]
........................[Level 3]
Anpassung Modul-Ausgabe:
echo '<div class="box_navigation_main">';
$smarty = cSmartyFrontend::getInstance();
$smarty->assign('ulId', 'navigation');
$smarty->assign('tree', $tree);
$smarty->assign('path', $path);
$smarty->display('nav.tpl');
echo '</div>';
Auszug CSS:
Code: Alles auswählen
div.box_navigation_main ul {
font-size: 1em;
float: left;
webkit-transition: .5s;
transition: .5s;
padding-left: 0em;
position: absolute;
z-index: 10000;
}
div.box_navigation_main li {
float: left;
position: relative;
width: 12em;
margin-right: 1px;
list-style: none;
-webkit-transition: .5s;
transition: .5s;
padding: 0.5em;
padding-left: 1em;;
}
div.box_navigation_main li a {
font-size: 1.2em;
}
div.box_navigation_main li li {
padding: 0.5em;
padding-left: 1em;
}
div.box_navigation_main li li a {
font-size: 0.9em;
}
div.box_navigation_main li,
div.box_navigation_main li li,
div.box_navigation_main li li li {
background-color: rgba(255,255,255,0.8);
}
div.box_navigation_main a {
text-decoration: none;
color: #000;
}
div.box_navigation_main a:hover {
color: #d77b19;
}
div.box_navigation_main ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
div.box_navigation_main ul ul ul {
left: 100%;
top: 0;
}
div.box_navigation_main li:hover {
background-color: rgba(255,255,255,1);
}
div.box_navigation_main li:hover > ul {
visibility: visible;
opacity: 1;
}
In den Auszug ist das Thema Responsivität allerdings noch nicht berücksichtigt. Mobil ist eine horizontale Navi so nicht zu gebrauchen. Insofern musst Du dann per media-queries das Ganze dann mit CSS-Klassen wieder in eine vertikal Navi ummodeln.