Gibt es ein Modul für eine horizontale Navigation in 4.9

Alles rund um Module und Plugins in CONTENIDO 4.9.
Antworten
sarronsarron
Beiträge: 209
Registriert: Do 10. Mär 2011, 17:02
Wohnort: Erlangen
Kontaktdaten:

Gibt es ein Modul für eine horizontale Navigation in 4.9

Beitrag von sarronsarron » Sa 30. Dez 2017, 11:46

Hallo,
ich bin auf der Suche nach einer horizontalen Navigation für die Version 4.9 . Die Navigation sollte mindestens 2 Unterstufen haben.
Gibts da schon etwas?
Gruß sarron

McHubi
Beiträge: 991
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Gibt es ein Modul für eine horizontale Navigation in 4.9

Beitrag von McHubi » Mo 8. Jan 2018, 23:07

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.
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Die NEUAUFLAGE des Buchs zur Version 4.9: CONTENIDO für Einsteiger (4.9)

Faar
Beiträge: 1326
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Gibt es ein Modul für eine horizontale Navigation in 4.9

Beitrag von Faar » Di 9. Jan 2018, 10:27

Ich habe eine horizontale Navigation.
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

Antworten