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

Post custom hacks and enhancements for phpwcms here only. Maybe some of these things will be included in official release later.
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

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

Post by flip-flop »

Hello folks,

here is a modificated navigation of O.G.s {NAVI}. (Very impressive). I say, this is the navigation you should prefer instead of the NAV_LIST_UL:HCSS.
The original edition you will find here: A simple six level drop-down menu with overlap and overrun

- Six level deep
- Overlap and Overrun !!!
- Start-ID in rt
- Level depth in rt (since 28.04.08) (Only php file changed)
- active path for the first level
- Every li has it´s own class (optional)

(German speakers please post into this tread)

If you need a vertical variation of this navigation: {NAV_VERT_FO:ID,level-depth}.

[EDIT] ----------------------------------- KH: (flip-flop):
07/11/25: <E01> Enhanced for using simple Tags in category headline like [ i] [ b] .... (If you don´t use it, please kill them all)
07/11/26: <P01> Patch act_path: The statemend wasn´t work for the first level without a sub level.
[/EDIT] -----------------------------------

[EDIT] ------------------------------------ KH: (flip-flop):
08/04/28: <D01> Preset level depth added
[/EDIT] -----------------------------------

[EDIT] ------------------------------------ KH: (flip-flop):
09/05/26: IE 8 compatibility: Around line 75 <!--[if IE 7]> changed to <!--[if gte IE 7]>
[/EDIT] -----------------------------------


[EDIT]Newest version available in the wiki at NAV_HORIZ_DD:ID,Level depth[/EDIT]

Image

TAG: {NAV_HORIZ_DD:ID,level-depth} -> e.g. <div id="menu_container">{NAV_HORIZ_DD:0,2}</div>

Location: Put it into the file e.g.: /template/inc_script/frontend_render/rt_nav_horiz_drop_down.php
Switch in conf.inc.php: $phpwcms['allow_ext_render'] = 1;

PHP file: rt_nav_horiz_drop_down.php

Code: Select all

<?php
// **************************************************************************
// 25.07.07 horizontal drop-down with ID output -> NAVI HORIZONTAL DROP-DOWN
// Oliver Georgi
// http://www.phpwcms.de/forum/viewtopic.php?p=89743#89743
// 08.11.07 KH (flip-flop) Enhanced: Start[ID] {NAV_HORIZ_DD:ID}
// 28.04.08 KH (flip-flop) Enhanced: Level depth {NAV_HORIZ_DD:ID,Depth}
// http://www.phpwcms.de/forum/viewtopic.php?p=94688#94688
//
// TAG:      {NAV_HORIZ_DD:ID,Level depth}
// Location: Put it into the file e.g.:
//           /template/inc_script/frontend_render/rt_nav_horiz_drop_down.php
// Switch in conf.inc.php: $phpwcms['allow_ext_render']  = 1;
// **************************************************************************

// ----------------------------------------------------------------
// obligate check for phpwcms constants
if (!defined('PHPWCMS_ROOT')) {
   die("You Cannot Access This Script Directly, Have a Nice Day.");
}
// ----------------------------------------------------------------

if( ! ( strpos($content["all"],'{NAV_HORIZ_DD')==false ) ) {
  $content["all"] = str_replace('{NAV_HORIZ_DD}','{NAV_HORIZ_DD:0,100}',$content["all"]);
  $content["all"] = preg_replace('/\{NAV_HORIZ_DD:(.*?)\}/i','{NAV_HORIZ_DD:$1,100}', $content["all"]);
  $content["all"] = preg_replace('/\{NAV_HORIZ_DD:(.*?),(.*?)\}/e','buildNavi_horiz("$1","0","$2"-1);', $content["all"]);
}
//   $content['all'] = str_replace('{NAVI}', buildNavi(), $content['all']);

function buildNavi_horiz($start=0, $counter=0, $depth=0) {
   
   $t = array();
   
   $struct = getStructureChildData($start);  // Catch structure
   
   if($counter == 0) {
      $last = count($struct) - 1;
   } else {
      $last = 0;
   }
   
   $x = 0;
   
   foreach($struct as $value) {
   
// Is it a active path ?      ========
// Ist dies der aktive Pfad ? ========
      if( isset($GLOBALS['LEVEL_KEY'][ $value['acat_id'] ]) ) {
     
         $p1 = ' act_path';
      } else {
         $s  = '';           // Reset $struct
         $p1 = '';
      }
   
// Only if there is a sub level     ========
// Nur wenn SubLevel vorhanden ist  ========
      if($GLOBALS['content']['cat_id'] == $value['acat_id']) {
         $a1 = ' act_path';  // Only for a direct call // Nur bei direktem Aufruf (FirstLevel active)
         $a3 = '';           // Not in use
      } else {               // If first level isn´t active // Wenn FirstLevel nicht aktiv
         $a1 = $p1;
         $a3 = '';
      }
// ==========================

      // -- <D01> -------------------------------------------------------------------
      // Preset level depth added
      // Ebenetiefenvorgabe hinzugefuegt
      //      $s = buildNavi_horiz($value['acat_id'], $counter+1);
      if (($counter) < $depth) {$s = buildNavi_horiz($value['acat_id'], $counter+1, $depth);
      }
      else {$s = '';}
      // -- <D01> -------------------------------------------------------------------
      if($s) {
         $g  = '<!--[if gte IE 7]><!--></a><!--<![endif]-->';
         $g .= $s;
         $g .= LF . str_repeat('   ', $counter);
         
//         $class = $counter ? (' class="fly_ul '.$a1.'"') : (' class="drop_ul '.$a1.'"'); // Second level with active category
         $class = $counter ? (' class="fly_ul"') : (' class="drop_ul '.$a1.'"');
         
         $close_li = str_repeat('   ', $counter+1);
         
      } else {
         $g  = '</a>';
         $class = ' class="sub_no"';            // If you don´t use the sub_no please change to: $class = '';
        // -- <P01> -------------------------------------------------------------------
         // Only the first level if there is no sub level
         // Ausschlieszlich das erste Level wenn kein Sublevel vorhanden ist
         if ($counter == 0) {
            $class = ' class="sub_no'.$a1.'"';  // Set it, it is active or not // Es ist aktiv oder nicht
         // -- <P01> -------------------------------------------------------------------
         } 
         $close_li = '';
      }
     
//    first li in block          =======
//    Erstes li im letzten Block =======
      if( $last && $last == $x ) {
         $enclose = ' class="horiz_enclose"';
      } elseif( $x || ($counter == 0 && $x == 0) ) {
         $enclose = '';
      } else {
         $enclose = ' class="horiz_enclose"';
      }

//    IDs for every li  ======= If you need the ID class, please uncomment/comment
//    IDs fuer jedes li ======= Wenn sie die ID Klassen benoetigen, bitte dekommentieren/kommentieren
//      $l  = str_repeat('   ', $counter+1) . '<li'. $class . ' id="cat-id_' . $value['acat_id'] . '">';
      $l  = str_repeat('   ', $counter+1) . '<li'. $class . '>';

      $l .= get_level_ahref($value['acat_id'], $enclose) . html_specialchars($value['acat_name']);
      $l .= $g;
     
     
      $l .=  $close_li . '</li>';
     
      $t[] = $l;

      $x++;
   }
   
   if($counter) {
      $A = LF . str_repeat('   ', $counter) . '<!--[if lte IE 6]><table><tr><td><![endif]-->';
      $B = LF . str_repeat('   ', $counter) . '<!--[if lte IE 6]></td></tr></table></a><![endif]-->';
   } else {
      $A = '';
      $B = '';
   }
   
   
   $t = implode(LF, $t);
   if($t) {
      $t =   $A . LF . str_repeat('   ', $counter) .   '<ul'.($counter?'':' id="pmenu"').'>' . LF . $t . LF . str_repeat('   ', $counter) . '</ul>'.   $B ;
   }

/*
   // -- <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>';

   // ========== end copy&paste ========
   
   $t = preg_replace($search, $replace, $t);

   // -- <E01> -------------------------------------------------------------------
*/
   
   return $t;
}
?>
CSS file e.g.: /template/inc_css/nav_horiz_drop_down.css (Don´t forget to bind this css file to your template).

Code: Select all

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)htmlis 
available at http://www.cssplay.co.uk/menus/simple_vertical.html 
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. 
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.

 08.11.07 KH (flip-flop) Enhanced: Start[ID] {NAV_HORIZ_DD:ID}
 http://www.phpwcms.de/forum/viewtopic.php?p=94688#94688
 (http://www.phpwcms.de/forum/viewtopic.php?p=89743#89743)
=================================================================== */
/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
/* margin hinzugefuegt - ausschließlich fuer diese demo - und ein "relative position" mit einem hohen z-index Wert um sicherzustellen dass das Menue ueber jedem nachfolgenden Element aufklappt. */

#menu_container {
	margin: 0 0 100px 0;  /* 100px only for testing - default = 0 */
	position: relative; 
	width: 735px;
	height: 21px;      /* ORG 20px */
	z-index: 1000;
}
/* Get rid of the margin, padding and bullets in the unordered lists */
/* margin und padding auf 0, Aufzählungszeichen der unsortierten Liste unterdruecken */
#pmenu, #pmenu ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
/* Set up the link size, color and borders */
/* Einstellen der Groeszen, Farben und Rahmen fuer die Links */
#pmenu a, #pmenu a:visited {
	display: block;
	width: 120px;
	font-size: 11px;
	color: #fff;
	height: 21px;      /* ORG 25px */
	line-height: 20px; /* ORG 24px */
	text-decoration: none;
	text-indent: 5px;
	border: 1px solid #fff;
	border-width: 1px 0 1px 1px;
}
/* Set up the sub level borders */
/* Einstellen der Rahmen fuer die Unterebenen  */
#pmenu li ul li a, #pmenu li ul li a:visited {
	border-width: 0 1px 1px 1px;
}
#pmenu li a.horiz_enclose, #pmenu li a.horiz_enclose:visited {
	border-width: 1px;
}
/* Set up the list items */
/* Einstellen der Listeneinzelheiten */
#pmenu li {
	float: left;
        list-style-type: none;
	background: #7484ad;
}
/* For Non-IE browsers and IE7 */
/* Fuer alle nicht IE + IE7 */
#pmenu li:hover {
	position: relative;
}
/* Make the hovered list color persist */
/* Festlegen der Farbe fuer hover li */
#pmenu li:hover > a {
	background: #D1D5DF; /* ORG #dfd7ca; */
	color: #BF4300;      /* ORG #c00; */
}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif (leer.gif) is for IE to work */
/* Einstellen der Unterebenenlisten mit einer absoluten Positionierung fuer die FlyOuts und dem "Ueberfahren-Abstand" 
   Das transparente gif (leer.gif) ist fuer den IE gedacht */
#pmenu li ul {
	display: none;
}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
/* Fuer alle nicht-IE + IE7 wird die Unterebenenliste sichtbar bei einem Ueberfahren (hover) */
#pmenu li:hover > ul {
	display: block;
	position: absolute;
	top: -7px;         /* ORG -11px */
	left: 80px;
	padding: 6px 30px 30px 30px; /* ORG padding: 10px */
	background:transparent url(../../img/article/leer.gif);
	width: 120px;
}
/* Position the first sub level beneath the top level links */
/* Positioniere die erste Unterebene nach dem Topebenenlink */
#pmenu > li:hover > ul {
	left: -30px;
	top: 16px; 
}
/* get rid of the table */
/* Tabelle neu einstellen */
#pmenu table {
	position: absolute;
	border-collapse: collapse;
	top: 0;
	left: 0;
	z-index: 1000;
	font-size: 1em;
}
/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
/* Fuer den IE5 und IE6 gebe dem hover-Link eine relative Position und wechsele die Hinter- und Vordergrundfarbe. Das ist notwendig damit der IE angestoszen wird die Unterebenen auszugeben */
* html #pmenu li a:hover {
	position: relative;
	background: #D1D5DF; /* ORG #dfd7ca; */
	color: #c00;
}
/* For accessibility of the top level menu when tabbing */
/* Fuer die Aktivierung der ersten Ebene, wenn im Menue geblättert wird */
#pmenu li a:active, #pmenu li a:focus {
	background: #dfd7ca;
	color: #BF4300;      /* ORG #c00; */
}
/* Set up the pointers for the sub level indication */
/* Einstellen der Symbole/Pfeile für die Unterebenenanzeige */
#pmenu li.fly_ul {
	background: #7484ad url(../../img/symbols/klapp_zu.gif) no-repeat 107px center;
/*	background: #7484ad url(../../img/article/navi/fly.gif) no-repeat right center;
*/
}

#pmenu li.drop_ul {
	background: #7484ad url(../../img/symbols/klapp_auf.gif) no-repeat 105px center;
	/* background: #7484ad url(../../img/article/navi/drop.gif) no-repeat right center;
*/
}
/* KH: Active Path output */
/* KH: Ausgabe des aktiven Pfads */
#pmenu li.act_path {
	background:#4161AF url(../../img/symbols/klapp_auf.gif) no-repeat 105px center;
/*	background:#cccccc url(../../img/article/navi/drop.gif) no-repeat right center;
	*/
}

/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */
/* change the drop down levels from display:none; to visibility:hidden; */
/* Dies ist fuer den IE5.5 und IE6 notwendig um die Unterebenen anzuzeigen */
/* Wechselt die Unterebenen von display:none; nach visibility:hidden; */

* html #pmenu li ul {
	visibility: hidden;
	display: block;
	position: absolute;
	top: -11px; 
	left: 80px;
	padding: 10px 30px 30px 30px; 
	background: transparent url(../../img/article/leer.gif);
}
/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul {
	visibility: hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul {
	visibility: hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul {
	visibility: hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
	visibility: hidden;
}
/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
	visibility: visible;
	left: -30px;       /*          (IE5 ONLY) */
	top: 10px;         /* ORG 14px (IE5 ONLY) */
	lef\t: -31px;      /*          (IE6 ONLY) */
	to\p: 11px;        /* ORG 15px (IE6 ONLY) */
}
/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul {
	visibility: visible;
	top: -11px;        /* ORG -11px (IE6 ONLY) */
	left: 80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul {
	visibility: visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {
	visibility: visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {
	visibility: visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */
If there are IE5.x problems using an z-index, please have a clother look to your layout.

[EDIT]The vertikal FlyOut (picture: in the left) you will find here (german): {NAV_VERT_FO:ID,Depth}[/EDIT]

Have fun :D

Knut
Last edited by flip-flop on Tue 26. May 2009, 14:37, edited 17 times in total.
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Post by kukki »

:D 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. :idea: 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. :)
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Post by kukki »

Das Ganze hat ein Problem: :shock:
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 .... :x
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
Lumimies
Posts: 63
Joined: Sat 25. Sep 2004, 14:03
Location: Suomi - Finland

phpwcms Support English

Post by Lumimies »

It is very frustrating that if we try to have different sections for German and English speaking people...

Lumimies
User avatar
markus s
Moderator
Posts: 654
Joined: Sat 16. Dec 2006, 19:21
Location: Radfeld / Tirol
Contact:

Post by markus s »

@kukki - please convert your thread to a english version ...
immediately !
moderator
propelled by fresh air from tirol
XING|FACEBOOK|OMENTO
User avatar
juergen
Moderator
Posts: 4556
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

Post by juergen »

@markus s

kukki spricht kein englisch, du mußt ihm das auf deutsch sagen.


@Lumimies :
Hey, there are some other words reserved for people who speak different languages.

Short form kukki:

He marked some entries with -tags, but the menu seems to dislike this manor.He would like to have on the left side only the last plane.

He is shure to have made a mistake in mind, perhaps he has to rebuild the complete structure.

---

Really, I dont like those words Lumimies! N'est ce pas ?

Juergen

//Edit: Oh .. words are gone, thanks :D
User avatar
Heiko H.
Posts: 868
Joined: Thu 27. Oct 2005, 11:41
Location: Dresden
Contact:

Post by Heiko H. »

DF6IH wrote:@markus s
kukki spricht kein englisch, du mußt ihm das auf deutsch sagen.
means kukki speaks no English ... :wink:

I think this is not an excuse.
I can't understand how this is possible in our buissnes (IT, what ever...).
English is not so hard to learn if it only shall serve for a simple communication. I have not learned any English in school too, I took French but I have forgotten everything. :cry:

Anyway...
..there is a lot of little helpers, like Babelfish, Google-Translate or my favourite Linguatec - Personal Translator Online.
The result is not always top, but easier to understand as German, if you don't speak any German.

@kukki
Learn a bit, or post in the german section of the Forum...

Kind regards, Heiko...
Not longer here - sorry...

Haubner-IT GbR Dresden
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop »

Hi at all,

I have created a german tread for the {NAV_HORIZ_DD:ID}. (Please use it if you speak only german language).

Knut
Last edited by flip-flop on Sun 25. Nov 2007, 20:52, edited 1 time in total.
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Lee H
Posts: 8
Joined: Wed 26. Apr 2006, 20:46

Post by Lee H »

Thanks so much for the tutorial flip-flop. I've been struggling with this very same style menu. I'm not sure how I missed this thread, but now I have a working example. You're awesome.
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Post by kukki »

@all
I can understand the English language completely well and make at the
telephone me also understandable. But I usually work for German
Website owners, which translate the German text alone into the English. :!:

Thanks for your replay flip-flop :D
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
daniel.grant
Posts: 97
Joined: Thu 2. Nov 2006, 15:42
Location: London

Post by daniel.grant »

this looks really cool and compatible with IE 5?
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Post by update »

IE 5
:!: :shock: :oops: :P :arrow: falling asleep out of an unexplainable sudden - wondering why...

EDIT: woke up again: http://www.w3schools.com/browsers/browsers_stats.asp
IE5 is by far the browser dying faster than any else
tester
Posts: 76
Joined: Mon 3. Jul 2006, 20:36
Location: Århus, Denmark

Post by tester »

Hi Folks!

Why doesn't this menu show "Home".

This is my site structure:


Home

>Menu1
>>Menu1_1
>>Menu1_2

>Menu2
>>Menu2_1
>>Menu2_2

>Menu3

And this is my call for the RT:
<div id="menu_container">{NAV_HORIZ_DD:0}</div>

thanx
tester :D
daniel.grant
Posts: 97
Joined: Thu 2. Nov 2006, 15:42
Location: London

Post by daniel.grant »

sorry meant ie6.
nav_list_ul dropdown doesn't work in IE6, I'm assuming this will?
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Post by update »

Haven't tested yet, but should. But there are some really "fully featured people" around here who can answer this better than me, for sure :wink:
Post Reply