Frage bzgl. Navigation

Post by **flip-flop** » Sat 16. Sep 2006, 14:25

Also ich denke schon. Ich sehe keinen spezielleren Wunsch. Wenn eine bis auf ID-Ebene heruntergebrochene Navi gebraucht wird - ist ja ebenfalls implementiert.

Mhhh, wie wird denn die id auf jedem <li>....</li> abgebildet? Da fehlt dann scheinbar etwas in meiner Aufstellung. http://www.phpwcms.de/forum/viewtopic.php?t=12165

Ich habe das so verstanden, das er eine fortlaufende Unterscheidung im vierten Level sucht, - eine hochzählende Nummer. Eine eindeutige id ist natürlich auch kein Problem.

Knut

Jan212 · Post by **Jan212** » Sun 17. Sep 2006, 18:07

moin zsamme,

Nee ich brauche ne eindeutige ID. Ich will ja im vierten Level verschiedene CSS Parameter haben.
------------------------------------------------------------------------------------
So meine Ich:

Level 3 Kategorie A
|
Level 4 id="3a"

Level 3 Kategorie B
|
Level 4 id="3b"

Level 3 Kategorie C
|
Level 4 id="3c"
------------------------------------------------------------------------------------

------------------------------------------------------------------------------------
So ist es momentan

Level 3 Kategorie A
|
Level 4 id="3-1"

Level 3 Kategorie B
|
Level 4 id="3-1"

Level 3 Kategorie C
|
Level 4 id="3-1"
------------------------------------------------------------------------------------

Empfiehlt sich also doch die NAV_LIST_UL, hab ich da eine individuelle<li> ID bis in die 4te Ebene?

Verwirrt + Fuss verstaucht.

Post by **Oliver Georgi** » Sun 17. Sep 2006, 19:22

Auf dem falschen Fuß erwischt

Ich habe noch mal gecheckt - habe mich da etwas zu weit aus dem fenster gelehnt. Die <li> werden derzeit nicht mit id versehen. Allerdings die ul können damit versehen werden.

Müssen denn die <ul><li> innerhalb einer Ebene alle unterschiedlich auussehen?

Allerdings ließe sich das recht leicht implementieren - also dass auch die <li> mit einer eindeutigen id versehen werden.

Dein Beispiel wäre umsetzbar:

Code: Select all

<ul id="A">
  <li></li>
</ul>
<ul id="B">
  <li></li>
</ul>

usw...

allerdings nicht:

Code: Select all

<ul id="A">
  <li id="Aa"></li>
  <li id="Ab"></li>
</ul>

Oliver

Post by **flip-flop** » Sun 17. Sep 2006, 21:02

@Jan212: Kein Problem, ist nun in dieser Form geändert, also die absoluten Id´s der Seitenebene werden abgebildet.
Das kommt jetzt aber schon fast einem "hardcoded" Menü gleich.
die Variante MenuItem-4-[1,2,3,4,...] sollte aber deine Anforderungen erfüllen. Verstehe ich nicht ganz.
So ist es m.M.n. momentan:
-----------------------------------------------------------------------------------
So ist es momentan

Level 3 Kategorie A
|
++ Level 4 id="4-1"

Level 3 Kategorie B
|
++ Level 4 id="4-2"

Level 3 Kategorie C
|
++ Level 4 id="4-3"
------------------------------------------------------------------------------------

Jetziger Output:

Code: Select all

<div class="MenuItem-4 MenuItem-4-1 MenuItem-4-ID13">                   <a href="de_artikel_...</a></div>
<div class="MenuItem-4 MenuItem-4-2 MenuItem-4-ID17" id="activeSection"><a href="de_artikel_...</a></div>
  <div class="MenuItem-5 MenuItem-5-1 MenuItem-5-ID23">                   <a href="de_artikel_...</a></div>
  <div class="MenuItem-5 MenuItem-5-2 MenuItem-5-ID27">                   <a href="de_artikel_...</a></dev>
<div class="MenuItem-4 MenuItem-4-3 MenuItem-4-ID20">                   <a href="de_artikel_...</a></div>
<div class="MenuItem-4 MenuItem-4-4 MenuItem-4-ID22" id="activeSection"><a href="de_artikel_...</a></div>
  <div class="MenuItem-5 MenuItem-5-3 MenuItem-5-ID34">                   <a href="de_artikel_...</a></div>
  <div class="MenuItem-5 MenuItem-5-4 MenuItem-5-ID37" id="activeSection"><a href="de_artikel_...</a></dev>
    <div ......

@Oliver:

Auf dem falschen Fuß erwischt

Passiert wohl jedem ab und zu. {Großkotz]War mit aber klar.[/Großkotz] Sonst hätte ich schon die NAV_LIST UL favorisiert.

Gruß Knut

Jan212 · Post by **Jan212** » Sun 17. Sep 2006, 21:36

@knut - Super, vielen herzlichen Dank. Gerade schon erfolglos mit der NAV_LIST_UL versucht zum Ziel zu kommen. Habs nicht hingekriegt. Die Lösung von dir ist sozusagen perfekt. Nur eine kleinen Ansatz hätte ich da noch:

Code: Select all

<div class="MenuItem-4 MenuItem-4-1 MenuItem-4-ID13">

reicht theoretisch doch auch

Code: Select all

<div class="MenuItem-4 MenuItem-4-ID13">

oder veraffe ich das gerade?

Alternativ könnte man in einer separaten Lösung noch einen das Level umschließenden Wrap(<div>) programmieren und mit der übergeordneten Klasse (<div class="level3-1">)ähnlich der vorherigen Lösung individuelle Parameter an die chields(.level3-1 div {color:#FFFFFF;...}) vererben.

Bei sehr individuellen Menüs, die man mit der jetzigen Navi von Flip Flop realisieren kann kommt man mit dem o.g. Ansatz(umschließender Wrap)allerdings ebenfalls nicht sehr weit - man stelle sich individuelle Icons pro Level 4 Menüpunkt bei mehreren übergeordneten level3 parents vor, das geht einfach nur über individuelle ID'S.

DANK DIR.

Post by **flip-flop** » Sun 17. Sep 2006, 22:16

@knut - Super, vielen herzlichen Dank. Gerade schon erfolglos mit der NAV_LIST_UL versucht zum Ziel zu kommen. Habs nicht hingekriegt.

Das geht auch nicht mit dieser NAVI.

Die Lösung von dir ist sozusagen perfekt. Nur eine kleinen Ansatz hätte ich da noch:

Dann suche in der Datei nach

Code: Select all

" MenuItem-".$count."-".$asc_count.

und lösche diese Sequenzen.

Die Sache mit den childs habe ich absichtlich vermieden. Die jetzige Form ist für "Jedermann" einfach und begreifbar. Es ist zwar eine Menge Schreibarbeit und die Dateigröße ist nicht ohne, aber mit einem guten Editor und copy&paste kommt man schnell zum Ziel. Außerdem muß ich ja nur die Zustände formatieren, die ich benötige.
Eine Liste ist natürlich viel kompakter und sehr elegant. Nur die Vielfalt der Zustände die "ich" einem Menü abfordere ist damit fast nicht machbar. Genau wegen diesen erzwungenen childs.
Dieses Menü hatte übrigens seinen Ursprung in einer Liste. (gibt auf meiner Testseite auch ein Bsp. dazu, das auch funktiniert, ist "Jedermann" aber nicht zumutbar).

Für eine spezielle Anwendung kann natürlich ein Wrap(<div>) eingebaut werden.
Ich warte immer noch auf eine umfangreiche Lösung mit der NAV_LIST_UL hier im Forum. Bisher hat niemand etwas veröffentlicht, auch Oliver nicht. Und im I-Net habe ich auch nichts vergleichbares gefunden. .........

Gruß Knut

Jan212 · Post by **Jan212** » Sun 17. Sep 2006, 22:34

Zitat:
@knut - Super, vielen herzlichen Dank. Gerade schon erfolglos mit der NAV_LIST_UL versucht zum Ziel zu kommen. Habs nicht hingekriegt.
Das geht auch nicht mit dieser NAVI.

Bist du dir sicher? Bin nämlich wieder bei den gleichen Probleme wie mit der NAV_LIST_ALL_DEV gekommen. Allerdings habe ich es auch nicht mit dem div wrap getestet. Fänds auch interessant mal eine komplexere mit der NAV_LIST_UL realisierte Navigation zu sehen und zu testen. Bei mir läuft jetzt alles so wie ich es mir vorstelle, der Code ist allerdings vom Umfang nicht ohne denke ich, hier ein Auszug aus der CSS Datei für nur 4 Unterpunkte des Level3 Punktes "Entkernanlagen"

Code: Select all

/* ------BOF Entkernanlagen --------- */
.MenuItem-4-ID19, .MenuItem-4-ID18,  .MenuItem-4-ID17,  .MenuItem-4-ID16 {color:#cd3a28;background:url(../../img/bg_nav_level3_entk_ia.gif) 0px 0px no-repeat;}
.MenuItem-4-ID19 A:hover, .MenuItem-4-ID19#activeLink, .MenuItem-4-ID19 A:active, .MenuItem-4-ID19#activeLink A:visited, .MenuItem-4-ID19#activeLink A:link {color:#cd3a28; background:url(../../img/bg_nav_level3_entk_a.gif) 0px 0px no-repeat;}
.MenuItem-4-ID18 A:hover, .MenuItem-4-ID18#activeLink, .MenuItem-4-ID18 A:active, .MenuItem-4-ID18#activeLink A:visited, .MenuItem-4-ID18#activeLink A:link	{color:#cd3a28; background:url(../../img/bg_nav_level3_entk_a.gif) 0px 0px no-repeat;}
.MenuItem-4-ID17 A:hover, .MenuItem-4-ID17#activeLink, .MenuItem-4-ID17 A:active, .MenuItem-4-ID17#activeLink A:visited, .MenuItem-4-ID17#activeLink A:link	{color:#cd3a28; background:url(../../img/bg_nav_level3_entk_a.gif) 0px 0px no-repeat;}
.MenuItem-4-ID16 A:hover, .MenuItem-4-ID16#activeLink, .MenuItem-4-ID16 A:active, .MenuItem-4-ID16#activeLink A:visited, .MenuItem-4-ID16#activeLink A:link	{color:#cd3a28; background:url(../../img/bg_nav_level3_entk_a.gif) 0px 0px no-repeat;}
/* ------EOF Entkernanlagen --------- */

Bei bis zu 16 Unterkategorien wird das viel Copy&Paste Arbeit, aber wozu gibt es schließlich suchen&ersetzen. Das Ergebnis kommt dem einer hardcoded Navi halt gleich und der Aufwand lohnt sich m.E.. Doof ist lediglich das man Kategorien so immer händisch im CSS anpassen bzw. hinzufügen muss.

Post by **Oliver Georgi** » Mon 18. Sep 2006, 06:51

Mein Problem ist nach wie vor, dass ich nicht weiß, wo genau Du hin willst!

Ein Beispiel hatte ich gesendet. Deine Entwürfe passten aus meiner Sicht genau auf diese Anforderung.

Oder geht es um die 3 großen Flächen im Hauptcontentbereich?

Oliver

Post by **Oliver Georgi** » Mon 18. Sep 2006, 08:01

Ich habe {NAV_LIST_UL} erweitert:

Suche in front.func.in.php (ziemlich am Ende) function buildCascadingMenu():

Code: Select all

$li .= $TAB.'	<li';

if($li_ul) {
	$li_class = 'sub_ul';
} else {
	$li_class = 'sub_no';
}

Und erweitere dies:

Code: Select all

$li .= $TAB.'	<li';

if($level_id_name) {
	$li .= ' id="li_'.$level_id_name.'_'.$key.'"';
}
if($li_ul) {
	$li_class = 'sub_ul';
} else {
	$li_class = 'sub_no';
}

Bei setzen von Wert "ul_id_name" wird jedes <li> mit einer eindeutigen ID versehen: id="li_ul_id_name_levelID". Jedes <ul> erhält die ID id="ul_id_name_parentLevelID".

Oliver

Jan212 · Post by **Jan212** » Mon 18. Sep 2006, 12:54

Hallo Jongs und Mädels,

@Oliver - Vielen Dank für die Erweiterung. Ihr bemüht euch alle ja wirklich vorbildlich um mich bzw. den Ausbau von phpWCMS. Ich habe aber schon während der letzten Nacht die Navigation für das Projekt mit der {NAV_LIST_ALL_DIV} realisiert. Weiß nicht ob ich das nochmal umstricken soll, war ne Menge Arbeit - würde natürlich eleganter mittels Liste sein und warscheinlich was an Code sparen.

Damit du weißt wohin ich wollte, bzw. in Zukunft bestimmt auch öfter mittels {NAV_LIST_UL} realisieren werde.
http://betafuk.null212.de/index.php?de
Guck mal durch, der Teil unterhalb der Kategorie Produkte ist der entscheidende. Geht nur um die Navi momentan, alles andere könnte ich ja mittels verschiedener Templates und Stylesheets realisieren.

Viele Grüße und nochmals Vielen Dank - Jan

Post by **Oliver Georgi** » Mon 18. Sep 2006, 13:21

Tja, mein lieber Jan, das war auch ohne meine ID-Erweiterung für <li> bereits möglich gewesen.

Das entspricht exakt dem Beispiel von mlas.at.

Oliver

Post by **flip-flop** » Mon 18. Sep 2006, 13:55

Naja, nicht ganz, er hätte dem <ul> noch eine eindeutige Identifizierung (ul_id_name oder den Wrapper wrap_ul_div) mitgeben müssen, aber prinzipiell hast du recht.
Jetzt habe ich überhaupt erst einmal verstanden was Jan eigentlich genau möchte.
Dazu ist ein Wrapper für die Unterebene natürch sehr geeignet.

Gruß Knut

Jan212 · Post by **Jan212** » Mon 18. Sep 2006, 14:00

Hoffe nicht??? Stehe ich total auf dem Schlauch? Hast du mal alle Unterprodukte geöffnet(Entkernanlagen, Powertools, Steinbearbeitung...)?

Ich sehe bei mlas.at nicht den gleichen Effekt. Wo hast du denn verschiedene Attribute, bzw. die gleiche Tiefe(geht m.E. nur bis Level3)? Kannst du mal konkret posten wie ich das mittels {NAV_LIST_UL}/ CSS realisiert kriege?

??? no

14:00Uhr edit:
Genau so sehe ich das auch Knut. Hatte es auch noch nicht probiert mit dem
Level umschließenden <div> Wrap in der {NAV_LIST_UL} wie in einem meiner vorherigen Posts auch beschrieben. Das ist der Idealfall dann weils schlanker ist und zum gleichen Ergebnis führt.

Post by **flip-flop** » Mon 18. Sep 2006, 14:18

Jan212 wrote:Genau so sehe ich das auch Knut. Hatte es auch noch nicht probiert mit dem
Level umschließenden <div> Wrap in der {NAV_LIST_UL} wie in einem meiner vorherigen Posts auch beschrieben. Das ist der Idealfall dann weils schlanker ist und zum gleichen Ergebnis führt.

Mir war das schon klar, ich dachte du müßtest in der letzten Unterebene noch einmal unterscheiden, deshalb ja auch das ganze Hochzähl- oder ID-Gesummse.

Dann man frisch an´s Werk. Das wird dann die erste etwas komplexere NAVI mit dem neuen TAG. Bisher habe ich hier nur Sparausführungen gesehen, die techn. nicht sehr anspruchsvoll sind. (Aber trotzdem gut).

Gruß Knut

Jan212 · Post by **Jan212** » Mon 18. Sep 2006, 14:22

@knut - Das ID Ding hat mich inspiriert nochmals die Oberpunkte (Entkernanlagen, Powertools, Steinbearbeitung) unterschiedlich zu färben...