{{indexmenu_n>10}} ====== NAV_HORIZ_DD:ID,Level depth ====== **A horizontal navigation using a drop-down mechanism.** No JS in use! A modified navigation of O.G.s O.G.s [[http://www.phpwcms.de/forum/viewtopic.php?p=89743#89743|{NAVI}]]. //(Very impressive).// I say, this is the navigation you should prefer instead of the NAV_LIST_UL:HCSS. \\ The original edition from Stu Nicholls you will find here: \\ [[http://www.cssplay.co.uk/menus/simple_vertical.html|A simple six level drop-down menu with overlap and overrun]] -> **Please respect the Copyright** :!: **{NAV_HORIZ_DD:ID,Level depth} (NAVi HORIZontal Drop Down)** V1.0 //28.04.08// Docu: -- \\ Forum: [[http://forum.phpwcms.org/viewtopic.php?t=16080]] **Author:** K.Heermann (flip-flop) http://planmatrix.de //(05.05.09)// \\ **CMS-Version:** >= V1.2.8 \\ **Version:** V1.0 //28.04.08// \\ **Update Version:** V1.01 //04.09.2010// \\ - The link "Home" can either be presented (In the PHP script on/off). **Condition:** -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]] \\ * ##$phpwcms['allow_ext_render'] = 1;## \\ **Features:** * Six level deep * Overlap and Overrun !!! * Start-ID im 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)// * Home can be shown //(optional in V1.1 since 04.09.10)// * simple Tags in category headline like [i] [b] [u] [s] ---- ---- \\ ==== Installation: ==== - Copy the two snippets into their respective files // (must be created)// \\ - /template/inc_script/frontend_render/rt_nav_horiz_drop_down.php - /template/inc_css/nav_horiz_drop_down.css - Insert the tag into the template at the preferred place, where the menu is to appear * E.g.: - Merge the CSS file into the layout * ADMIN -> template -> select css-file: [nav_horiz_drop_down.css] //(Multiple choice also left mouse button)// - Set up the tag //(Beginning ID and level depth which can be represented)// * E.g. {NAV_HORIZ_DD:2,5} //(Beginning in the level with the ID 2, representation of max. 5 levels depth)// - adapt the css file ---- \\ ==== TAG ==== **{NAV_HORIZ_DD:ID,Level depth}** -> e.g. //Output beginning at level 0 (home/root) with level depht limitation of 2.// \\ {{:deutsch:navigationen:dropdown_flyout:nav_horiz_dd_id_01.gif|NAV_HORIZ_DD:ID,Level-depth}} Given structure in this example: - root (index.php ID=0) --- Home --- Ebene01 --- Ebene02 --- Ebene03 --- Ebene04 --- Ebene05 ** V1.0:** * There is a redirect for the **root** article to ** home ** //(permanently 301)//. \\ * Redirecting to [index.php?home] **V1.01:** * Redirecting from **root** to **home** isn´t necessary, because by editing (//%%==== Custom var ====%%)// around line 36 of the script you can turn on/off the link \\ Generated code: ##%%
  • ------------------------------------------------------------------- // 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 = '';} // -- ------------------------------------------------------------------- if($s) { $g = ''; $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 = ''; $class = ' class="sub_no"'; // If you don´t use the sub_no please change to: $class = ''; // -- ------------------------------------------------------------------- // 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 // -- ------------------------------------------------------------------- } $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) . ''; $l = str_repeat(' ', $counter+1) . ''; $l .= get_level_ahref($value['acat_id'], $enclose) . html_specialchars($value['acat_name']); $l .= $g; $l .= $close_li . '
    • '; $t[] = $l; $x++; } if($counter) { $A = LF . str_repeat(' ', $counter) . ''; $B = LF . str_repeat(' ', $counter) . ''; } else { $A = ''; $B = ''; } $t = implode(LF, $t); if($t) { $t = $A . LF . str_repeat(' ', $counter) . '' . LF . $t . LF . str_repeat(' ', $counter) . ''. $B ; } /* // -- ------------------------------------------------------------------- // 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] = '$1'; $search[19] = '/\[u\](.*?)\[\/u\]/is'; $replace[19] = '$1'; $search[20] = '/\[s\](.*?)\[\/s\]/is'; $replace[20] = '$1'; $search[21] = '/\[b\](.*?)\[\/b\]/is'; $replace[21] = '$1'; // ========== end copy&paste ======== $t = preg_replace($search, $replace, $t); // -- ------------------------------------------------------------------- */ return $t; } ?> \\ ==== PHP V1.01 ==== Dateiname: **rt_nav_horiz_drop_down.php** Ort: **/template/inc_script/frontend_render/ ** 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} // 04.09.10 KH (flip-flop) Enhanced: Home link (enable/disable around line 36) // 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) { // ============ Custom var =========== $home_link = false; // [true|false] = [enabled|disabled] // ============ END Custom var ======= $t = array(); $struct = getStructureChildData($start); // Catch structure if($counter == 0) { $last = count($struct) - 1; // ======== Only if you want home // Nur wenn Home gewuenscht if ($home_link) { $l = '
  • '; $l .= get_level_ahref(0, ' class="first"') . ''. html_specialchars($GLOBALS['content']['struct'][0]['acat_name']); $l .= '
    • '; $t[] = $l; } // ======= END Home } 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 = ''; } // ========================== // -- ------------------------------------------------------------------- // 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 = '';} // -- ------------------------------------------------------------------- if($s) { $g = ''; $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 = ''; $class = ' class="sub_no"'; // If you don´t use the sub_no please change to: $class = ''; // -- ------------------------------------------------------------------- // 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 // -- ------------------------------------------------------------------- } $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) . ''; $l = str_repeat(' ', $counter+1) . ''; $l .= get_level_ahref($value['acat_id'], $enclose) . html_specialchars($value['acat_name']); $l .= $g; $l .= $close_li . ''; $t[] = $l; $x++; } if($counter) { $A = LF . str_repeat(' ', $counter) . ''; $B = LF . str_repeat(' ', $counter) . ''; } else { $A = ''; $B = ''; } $t = implode(LF, $t); if($t) { $t = $A . LF . str_repeat(' ', $counter) . '' . LF . $t . LF . str_repeat(' ', $counter) . ''. $B ; } /* // -- ------------------------------------------------------------------- // 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] = '$1'; $search[19] = '/\[u\](.*?)\[\/u\]/is'; $replace[19] = '$1'; $search[20] = '/\[s\](.*?)\[\/s\]/is'; $replace[20] = '$1'; $search[21] = '/\[b\](.*?)\[\/b\]/is'; $replace[21] = '$1'; // ========== end copy&paste ======== $t = preg_replace($search, $replace, $t); // -- ------------------------------------------------------------------- */ return $t; } ?>     \\ ==== CSS ==== Fileiname: **nav_horiz_drop_down.css** Location: **/template/inc_css/ ** /* ================================================================ 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 */