Responsive Navigation mit Bildern

Alles rund um Module und Plugins in CONTENIDO 4.9.
Antworten
SaIT
Beiträge: 6
Registriert: Mi 11. Nov 2015, 08:00
Kontaktdaten:

Responsive Navigation mit Bildern

Beitrag von SaIT » Mi 11. Nov 2015, 08:13

Hallo zusammen,

ich hoffe, dass ich in diesem Thread richtig bin.
Mein Problem ist, ich muss für einen Kunden eine responsive Navigation mit aufklappbarem Menü und im Untermenü werden die Artikel mit Bildern angezeigt, bauen muss.
Hierfür nehme ich die mega-site-navigation von CodyHouse.
Ich nehme nur den Service-Teil, bei dem die Bilder mit Text angezeigt werden.

Mein Frage, hat diese Navigation schon mal jemand ins Contenido umgesetzt?

Bei mir läuft die Navigation soweit, allerdings wird mir der Pfeil - für Menüpunkt mit Untermenüs - bei jedem Navigationspunkt angezeigt, da ich nicht weiß, wie ich es abändern muss, damit es sich nur auf die beschränkt, die auch ein Untermenü haben.

Ich weiß auch nicht, wie ich die Bilder in die Untermenüs bekomme.

Hat da jemand einen Tipp? Ich habe gestern schon den ganzen Tag damit verbracht und schön langsam weiß ich nicht mehr, was ich noch machen soll. Ich muss dazu sagen, mein PHP ist nicht sonderlich gut.

Für Hilfe wäre ich extrem dankbar.
Viele Grüße
Sandra

rethus
Beiträge: 1851
Registriert: Di 28. Mär 2006, 11:55
Wohnort: Mönchengladbach
Kontaktdaten:

Re: Responsive Navigation mit Bildern

Beitrag von rethus » Do 12. Nov 2015, 11:37

Herzlich willkommen im Forum.

Du musst uns da ein paar mehr Infos zukommen lassen, damit wir deinen Gedankenvorsprung aufholen können.
Quelltext von deinen Modulen, link zur Page usw.
Versetze dich in unsere Lage... was können wir wissen, was nicht... was brauchen wir um dir helfen zu können.
Could I help you... you can help me... buy me a coffee . (vielen ❤ Dank an: Seelauer, Peanut, fauxxami )

xstable.com: - HighSpeed Hosting, Domains, DomainReselling, Linux-Administration
suther.de: - App-Programierung, High-Performance-Webpages, MicroServices, API-Anbindungen & Erstellung

Software... ein Blick wert: GoogleCalender Eventlist, xst_dynamic_contentType

SaIT
Beiträge: 6
Registriert: Mi 11. Nov 2015, 08:00
Kontaktdaten:

Re: Responsive Navigation mit Bildern

Beitrag von SaIT » Mo 16. Nov 2015, 09:55

Hallo rhetus,

du hast natürlich recht, tut mir leid.
Hier ein paar mehr Infos.

Der Link zur Page (ist momentan noch auf einem Testserver): http://sandra.easy-it-solution.de/conte ... ontent.php

Code von Modul navigation_main:

Code: Alles auswählen

{if 0 lt $ulId|strlen}<!-- navigation_main/template/get.tpl -->{/if}

<ul id="cd-primary-nav" class="cd-primary-nav is-fixed {$class} level{$level}">
	{foreach from=$tree item=wrapper}
	{assign var="idcat" value=$wrapper.idcat}
	{assign var="url" value=$wrapper.item->getLink()}
	{assign var="name" value=$wrapper.item->get('name')}
	{if $idcat|in_array:$path}
	{assign var="aClass" value='active'}
	{else}
	{assign var="aClass" value=''}
	{/if}
<li class="has-children">
	<a href="{$url}" title="{$name}">{$name}</a>
		{if !empty($wrapper.subcats) }
			{include file="navigation_main/template/get.tpl"
			tree=$wrapper.subcats path=$path ulId="" class="cd-nav-icons is-hidden" level=1+$level}
		{/if}
	
</li>
	{/foreach}
</ul>

{if 0 lt $ulId|strlen}<!-- /navigation_main/template/get.tpl -->{/if}
Das Problem ist, dass es mir zwar die Unterpunke bei Produkte anzeigt, allerdings ohne Bilder (vor dem Menüpunkt soll ein Bild angezeigt werden) und die Pfeile sollen auch nur dort angezeigt werden wo es Untermenüs gibt.
Wenn ich die Klasse "has-children" im Modul-html ausbaue, zeigt es mir gar nichts mehr an.
Außerdem werden die Menüpunkte nicht angezeigt, wenn ich den Browser zusammenschiebe und das Burgermenü aufmache.


Ich bin da total am verzweifeln.
Ich hoffe, dass ich es verständlich schreiben konnte.
Um Hilfe wäre ich unendlich dankbar.

SG!
Sandra

homtata
Beiträge: 1142
Registriert: Mi 14. Jan 2004, 14:41
Kontaktdaten:

Re: Responsive Navigation mit Bildern

Beitrag von homtata » Mo 16. Nov 2015, 16:12

Heyho Sandra,

was die Pfeile angeht, die nur dann erscheinen sollen, wenn die Liste überhaupt Submenüpunkte hat:
- Der aktuelle Templatecode fragt derzeit nicht ab, ob das AKTUELLE Menü Unterpunkte hat, um das AKTUELLE Menü zu ändern, sondern um das ggf. FOLGENDE Untermenü zu ändern. Da müsste also schon vor der Ausgabe des jetzigen Menüs eine if-Schleife und Variablenbestimmung rein, etwa so:

Code: Alles auswählen

   {assign var="name" value=$wrapper.item->get('name')}

   {if !empty($wrapper.subcats) }
   {assign var="aClass" value='active'}
   {else}
   {assign var="aClass" value=''}
   {/if}

   {if $idcat|in_array:$path}
   {assign var="classchildren" value='has-children'}
   {else}
   {assign var="classchildren" value='is-hidden'}
   {/if}

und dann muss in der Folge die Zeile

Code: Alles auswählen

<li class="has-children">
geändert werden in

Code: Alles auswählen

<li class="{$classchildren}">
Zu den Bildern:

Laut Quellcode liegen die z.B. in

Code: Alles auswählen

background-image: url("../img/design.png");
Das ist ein etwas unüblicher Ordner - liegen die wirklich da? Egal, wie ich versuche, die Datei mal direkt aufzurufen - da kriege ich keine Treffer.
Wahrscheinlich stimmt der Ordnername oder die relative Pfadangabe nicht.

LG
Viktor

SaIT
Beiträge: 6
Registriert: Mi 11. Nov 2015, 08:00
Kontaktdaten:

Re: Responsive Navigation mit Bildern

Beitrag von SaIT » Di 17. Nov 2015, 11:42

Hallo Viktor,

vielen Dank für deine Hilfe.
Hab deinen Code eingefügt.
Jetzt wird mir nicht mehr überall der Pfeil angezeigt sondern nur noch beim aktiven Menüpunkt.
Wie kann ich das noch ändern, dass es nur bei Produkte angezeigt wird?

Ich habe auch schon versucht den Code so abzuändern, dass sich die Klasse "cd-nav-icons is-hidden" separat in einem <ul>-Tag aufbaut. Leider vergebens.
Bisher ist es so, dass sich die Klasse hinter die andere <ul>-Klasse "cd-primary-nav is-fixed" dran hängt.
Gibt es da einen Möglichkeit eine zweite Schleife zu machen, die die Submenü-Klasse separat behandelt ohne dass die erste davon beeinträchtigt ist?

Lokal in extra html-, CSS- und JavaScript-Dateien läuft schon alles, nur bekomme ich die Navigation nicht ins Contenido rein :( .

Vielen Dank.
LG!
Sandra

homtata
Beiträge: 1142
Registriert: Mi 14. Jan 2004, 14:41
Kontaktdaten:

Re: Responsive Navigation mit Bildern

Beitrag von homtata » Di 17. Nov 2015, 12:49

Ich denke, dass mir beim obigen Code ein Dreher passiert ist und die Schleifenabfragen vertauscht sind. Versuch statt dessen mal:

Code: Alles auswählen

   {assign var="name" value=$wrapper.item->get('name')}

   {if $idcat|in_array:$path}
   {assign var="aClass" value='active'}
   {else}
   {assign var="aClass" value=''}
   {/if}

   {if !empty($wrapper.subcats) }
   {assign var="classchildren" value='has-children'}
   {else}
   {assign var="classchildren" value='is-hidden'}
   {/if}

SaIT
Beiträge: 6
Registriert: Mi 11. Nov 2015, 08:00
Kontaktdaten:

Re: Responsive Navigation mit Bildern

Beitrag von SaIT » Di 17. Nov 2015, 15:06

Hallo Viktor,

vielen Dank, passt perfekt.

LG!

SaIT
Beiträge: 6
Registriert: Mi 11. Nov 2015, 08:00
Kontaktdaten:

Re: Responsive Navigation mit Bildern

Beitrag von SaIT » Di 17. Nov 2015, 15:28

Hallo, ich schon wieder

Jetzt habe ich noch ein Problem, ich habe den Code wie folgt abgeändert, damit mir die Bilder bei den Submenüs angezeigt werden.

Code: Alles auswählen

<li class="{$classchildren}">
	<a class="[b]cd-nav-item item-1[/b]" href="{$url}" title="{$name}">{$name}</a>
		{if !empty($wrapper.subcats) }
			{include file="navigation_main/template/get.tpl"
			tree=$wrapper.subcats path=$path ulId="" class="cd-nav-icons is-hidden" level=1+$level}
		{/if}
</li>
Bilder werden mir angezeigt, nur leider immer das Gleiche, was muss ich da ändern, dass es fortlaufend ist und bei "item-1" beginnt?

Vielen Dank schon Mal.

SaIT
Beiträge: 6
Registriert: Mi 11. Nov 2015, 08:00
Kontaktdaten:

Re: Responsive Navigation mit Bildern

Beitrag von SaIT » Di 17. Nov 2015, 15:46

Ich hab es hinbekommen.

Folgender Code brachte die Lösung:

Code: Alles auswählen

<li class="{$classchildren}">
	<a class="cd-nav-item item-{$name}" href="{$url}" alt="{$name}" title="{$name}" src="../../images/{$name}.png">{$name}</a>
		{if !empty($wrapper.subcats) }
			{include file="navigation_main/template/get.tpl"
			tree=$wrapper.subcats path=$path ulId="" class="cd-nav-icons is-hidden" level=1+$level}
		{/if}
</li>
Vielen Dank nochmal für die Hilfe.
LG!

homtata
Beiträge: 1142
Registriert: Mi 14. Jan 2004, 14:41
Kontaktdaten:

Re: Responsive Navigation mit Bildern

Beitrag von homtata » Di 17. Nov 2015, 17:10

Aber gern doch, freut mich, wenn du dich da auch so langsam einfuchst!

Antworten