{NAV_HORIZ_DD:ID,Ebenentiefe} (NAVi HORIZontal Drop Down)

Post by **flip-flop** » Sun 25. Nov 2007, 18:45

Bitte hier die deutschsprachigen Beiträge zur {NAV_HORIZ_DD:ID,Ebenentiefe} (NAVi HORIZontal Drop Down:ID,Level-depth) absetzen.
--------------------------------------
Hallo,

hier eine modifizierte Navigation von O.G.s {NAVI}. (Sehr beeindruckend). Ich würde diese Navigation der NAV_LIST_UL:HCSS immer vorziehen.
Hier das Original von Stu Nicholls: A simple six level drop-down menu with overlap and overrun

- Sechs Ebenenen tief
- Überlappen und Überfahr(rahm)en !!!
- Start-ID im RT
- Max Leveltiefe im RT (seit 28.04.08)
- Aktiver Pfad wird für die erste Ebene gekennzeichnet
- Jedes li hat eine eigene Klasse (optional)

[EDIT] ----------------------------------- KH: (flip-flop):
07/11/25: <E01> Erweitert für den Gebrauch von einfachen html Tags in der Kategorieüberschrift wie [ i] [ b] .... (Wenn die Tags nicht gebraucht werden, bitte lösche)
07/11/26: <P01> Patch act_path: Der Ausdruck funktionierte bisher nicht für die erste Ebene ohne eine Unterebene wenn aktiv.
[/EDIT] -----------------------------------

[EDIT] ------------------------------------ KH: (flip-flop):
08/04/28: <D01> Ebenentiefenvorgabe hinzugefuegt
[/EDIT] -----------------------------------

TAG: {NAV_HORIZ_DD:ID,Ebenentiefe} -> z.B. <div id="menu_container">{NAV_HORIZ_DD:0,2}</div>

Skript: -> {NAV_HORIZ_DD:ID,Level-depth}

[EDIT]Die vertikale FlyOut-Variante (Im Bild links) ist hier zu finden: {NAV_VERT_FO:ID,Depth}[/EDIT]

[EDIT]Neueste Versionen verfügbar im wiki unter NAV_HORIZ_DD:ID,Ebenentiefe[/EDIT]

Post by **flip-flop** » Sun 25. Nov 2007, 20:48

kukki wrote: Hallo Flip-Flop

Eine tolle Leistung, die Du hier hingelegt hast. Ich bin beeindruckt, wie Du das hingezaubert hast. Auf meinem localhost funktionierte die ganze Sache sofort, ohne Probleme. Jetzt will ich das auf http://www.JG300.de einsetzen, da dort die Menüstruktur um einiges erweitert werden soll und somit der Platz links beschränkt ist. Ich werde dort in Kombination mit der NAV-UL linksseitig noch die Untermenüs ab einer gewissen Strukturtiefe (Ebene 2 oder 3) mit aufblättern lassen. damit ist links wieder mehr Platz. Mal sehen, wie man das ganze anpacken kann.

kukki wrote:Das Ganze hat ein Problem:
Mittels
[ B] .... [ /B]
habe ich einige Menüpunkte hervorgehoben. Und das verkraftet dieses Menü nicht, so dass bei den entsprechenden Menüpunkten
[ b] menue [ /b]
steht und das gesamte Menü umbricht. Ich habe es erst einmal wieder entfernt , um mir die Sache noch einmal genauer anzuschauen. Ich möchte, dass dann in Kombination mit dem bekannten Script links nur noch die letzte Ebene auftaucht. Irgendwie gibt es da bei mir noch ein Denkfehler, weil es noch nicht funktioniert. Wahrscheinlich muß ich die gesamte Struktur noch einmal neu ordnen ....

Ich habe noch nicht ganz begriffen was du genau möchtest.
Der TAG wird vor der Abarbeitung der /frontend_render/* geparst, deshalb findet an dieser Stelle keine Reaktion auf den Tag statt.

Hier ein Workaround der sehr ausbaufähig ist:

In der php Datei vor das letzte return $t; bitte diese Anweisungen setzen:

Code: Select all

	// -- <E01> -------------------------------------------------------------------
	// EDIT: 07/11/25 KH. (flip-flop) including simple Tags in category headline from the file 
	//  /include/inc_front/front.func.inc.php  and the  function html_parser($string) 
	// you can copy&paste what you want. 

	// ========== copy&paste ===========

	// typical html formattings 
	$search[18]		= '/\[i\](.*?)\[\/i\]/is';			$replace[18]	= '<i>$1</i>';
	$search[19]		= '/\[u\](.*?)\[\/u\]/is';			$replace[19]	= '<u>$1</u>';
	$search[20]		= '/\[s\](.*?)\[\/s\]/is';			$replace[20]	= '<strike>$1</strike>';
	$search[21]		= '/\[b\](.*?)\[\/b\]/is';			$replace[21]	= '<strong>$1</strong>';

	// added simple [br] -> <br />
	$search[25]		= '/\[br\]/i';									$replace[25]	= '<br />';
	// ========== end copy&paste ========
	
	$t = preg_replace($search, $replace, $t);

	// -- <E01> -------------------------------------------------------------------

Das ginge natürlich auch mit der ganzen Funktion $t = html_parser($t);. Ich rate allerdings davon ab, denn hier kann viel Blödsinn gemacht werden.
Bitte immer nur die Ersetzer einbauen die tatsächlich gebraucht werden

Hoffe es hilft

Knut

kukki · Post by **kukki** » Tue 27. Nov 2007, 12:55

Ja, es hat erst einmal weitergeholfen, Danke für die Mühe.
Hoffentlich wird diese gute Arbeit auch als solche im nächsten Upgrade von O.G. enthalten sein!

Jetzt steht nur noch im Raum das

[BR]

Ich habe zwei Projekte, wo dieses Menü zweizeilig ist (oben in Deutsch unten in English). Man wollte sich damal ersparen ein separates Menü zu erstellen, weil die englisch-sprachigen Besucher sowieso nicht viel zum Lesen haben, sondern eher Bilder und kurze Bildtexte. Die Website soll 2008 umgestellt werden auf die Version 1.3.3x und ich frage mich nun, wie man dieses mit dem horizontalen Menü erreichen kann, dass die zweite Zeile im Menübalken steht und nicht außerhalb.

Vergleiche bitte dazu meine Testecke

Ich habe da angefangen auszuloten, was man mit einigen Einstellungen erreichen kann, aber die zweite Zeile blieb bisher immer außerhalb!

Post by **flip-flop** » Tue 27. Nov 2007, 13:26

Jetzt wird es ziemlich schräg.

Du kannst in der PHP erweitern mit z.B.:

Code: Select all

	$search[22]		= '/\[br\](.*?)\[\/br\]/is';			$replace[22]	= '<br /><span>$1</span>';

Muss vor den jetzigen BR Tag bzw. der wird gelöscht.

Der Seitentitel wird nun so eingegeben: Titel01[br]Titel02[/br]

Die CSS dazu: #pmenu a span { padding-left: 5px; }

du darfst das line-height: XXpx; in #pmenu a, #pmenu a:visited nicht vergrößern, deshalb liegt der Text außerhalb.

Also lass diese Nummer niemanden sehen. Es geht mir darum dass du die Systematik verstehst. nun kannst du dir einen Kunst-Tag basteln der nicht stört.
Denn diese [/br] ist natürlich fehlerhaft geht also nur wenn der Seitentitle ausschließlich von dieser Navi angezeigt wird.

Knut

kukki · Post by **kukki** » Tue 27. Nov 2007, 16:03

Ich merk schon, das wird eine Speziallösung und das wollte ich natürlich überhaupt nicht, denn bei nächsten Upgrade stehe ich vor einem Problem:
Was habe ich bei wem wie, wann und wo geändert.
Dann müssen die Jungs halt sich einer anderen Variante begnügen, da wird mir schon etwas einfallen ... oder auch nicht. Danke Dir aber für Deine Unterstützung. Ich wollte gar nicht soweit unbedingt gehen.

Für diese beide Fälle: Upgrade ja aber diese Art der Menüführung geht dann eben nicht mehr mit einem [ BR ]. Schluß, Ende, Aus!

Post by **flip-flop** » Tue 27. Nov 2007, 19:22

Das wird auch beim nächsten Upgrade funktionieren. Ist doch alles extern.

Knut

nekket · Post by **nekket** » Tue 27. Nov 2007, 20:27

Das ding sieht - verdammt - gut aus
Mal schauen ob ich das irgendwann mal einsetzen werde - derzeit haben wir uns immer daran vorbeigeschlängelt...

Post by **flip-flop** » Tue 27. Nov 2007, 20:57

- Ich weiß, die gute alte DIV Variante.
Das Dropdown ist eigentlich nur für große Seiten gedacht wo es nicht mehr anders geht.
Die nächste Übung wird ein Tiefenbegrenzer sein. Denn der macht Sinn bei geteilten Navigationen.
Das selbe Skript kann übrigens auch für ein Flyout nach dem gleichen Strickmuster verwendet werden.

Da hat O.G. was richtig gutes gebaut.

Allerdings ist die Vorlage von Stu Nicholls auch excellent.

nekket · Post by **nekket** » Tue 27. Nov 2007, 21:10

Gerade die Begrenzung ist in meinen Augen wirklich wichtig... hab heute gerade wieder eine Navigation aufgebaut die getrennt aufgebaut werden soll und das läuft. Glaub da war auch ein Snippet von dir mit drin.

Post by **flip-flop** » Tue 27. Nov 2007, 22:17

Von mir ist da nur wenig drin. Das hat fast alles O.G. aufgebaut. (die <ul><li> Ära) Ich mache lediglich das Feintuning und publiziere.
Bei der DIV ist das anders, wenn du diese hier meinst. (Mit Begrenzer).

nekket · Post by **nekket** » Tue 27. Nov 2007, 22:56

ja den hab ich gesehen. verwendet hab ich das hier:

Code: Select all

<!-- NAVI START -->	
	<!-- 111 ## erste Ebene horizontal mit Tiefe=1 ## 111 //-->
<div id="nav1"><div class="nlu_navi1">{NAV_LIST_UL:F,ID,1,act_path,active}</div></div>

<!-- 222 ## zweite Ebene horizontal mit Tiefe=1 ## 222 //-->
[PHP]
if(isset($GLOBALS['LEVEL_ID'][1])) {
$level_id = $GLOBALS['LEVEL_ID'][1];
echo '<div id="nav2"><div class="nlu_navi1">'.LF;
echo '{NAV_LIST_UL:F,'.$level_id.',1,act_path,active}';
echo '</div></div>';
}
[/PHP]

<!-- 333 ## dritte Ebene vertikal ## 333 //-->
[PHP]
if(isset($GLOBALS['LEVEL_ID'][2])) {
$level_id = $GLOBALS['LEVEL_ID'][2];
echo '<div id="nav3"><div class="nlu_navi1">'.LF;
echo '{NAV_LIST_UL:F,'.$level_id.',,act_path,active}';
echo '</div></div>';
}
[/PHP]
<!-- NAVI ENDE -->

kukki · Post by **kukki** » Wed 12. Dec 2007, 11:32

Dieses tolle Menü läüft nicht im (IE5, IE 5.5) im IE 6. Habe ich etwas überlesen, denn ich fand dafür keine Erklärung im Moment. Eine Suche war im Board erfolglos. Im IE 7 geht es, ebenso in den anderen Browsern. Aber halt nicht im IE 6 und ich finde immer wieder User bei Kundenaquirierungen, die diese IE6 (auch in Abwandlung als Avantbrowser) benutzen

Post by **flip-flop** » Wed 12. Dec 2007, 12:03

Es läuft schon im IE5/5.5. Hier gibt es lediglich Ebenenprobleme. Ich mache mir aber nicht die Mühe dies auszuarbeiten, da diese Browser real keine Rolle mehr spielen.
Mit dem IE6 läuft es in einem DIV Layout ohne Probleme.

Hier ein einfaches Live Bsp.: malerwinkel-rattenberg.com (Seite ist nicht von mir)

Knut

Iller13 · Post by **Iller13** » Wed 12. Dec 2007, 13:02

Jap,
habe das selbe Problem, leider zerschießt der IE 6 das Menü.
Kann bei mir die "width: auto;" nicht richtig wiedergeben. Und dadurch sind alle Punkte untereinander. Und da ich längere und kürzere Navigationspunkt habe, ist es ungeschickt eine feste weite anzugeben.

Dumm ist, das laut Statistik (eigener Page) noch 55% den IE 6 verwenden! Warum auch immer.

Kann man da nichts machen?

Gibt es eine einfache Version der Navigation?
Ich habe die {NAV_LIST_UL:HCSS,...} gecheckt, allerdings erscheint das SubMenü nicht.

13

Post by **flip-flop** » Wed 12. Dec 2007, 13:45

@Iller13: Nein, du darfst deine Speziallösung nicht mit allg. gängingen Verfahren vergleichen. - Variable Breiten gehen so ohne weiteres nicht. Ist das Gleiche wenn ich sage "Komisch, das Auto fährt nicht mehr richtig, ich habe doch nur an diesen drei Schrauben gedreht (weiß aber nicht so richtig wozu die gut sind - schulterzuck).

Zeige mir mal ein FlyOut oder DropDown im Netz wo so etwas realisiert ist ohne JS. Und wenn mit JS dann bitte mit sinnvollem Fallback. - Da bin ich gespannt.
Ginge wahrscheinlich auch mit diesem hier gezeigten Menü aber das ist dann in meinen Augen die etwas höhere Kunst der CSS-Programmierung und ist sicher nicht so einfach verfügbar.

Knut