A horizontal navigation using a drop-down mechanism. No JS in use!
A modified navigation of O.G.s 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 from Stu Nicholls you will find here:
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: → /config/phpwcms/conf.inc.php
Features:
{NAV_HORIZ_DD:ID,Level depth} → e.g. Output beginning at level 0 (home/root) with level depht limitation of 2.
<div id="menu_container">{NAV_HORIZ_DD:0,2}</div>
Given structure in this example:
- root (index.php ID=0) --- Home --- Ebene01 --- Ebene02 --- Ebene03 --- Ebene04 --- Ebene05
V1.0:
V1.01:
Filename: rt_nav_horiz_drop_down.php
Location: /template/inc_script/frontend_render/
<?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; } ?>
Dateiname: rt_nav_horiz_drop_down.php
Ort: /template/inc_script/frontend_render/
<?php // ************************************************************************** // Version 1.01 04.09.2010 KH // 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} // 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 = '<li id="cat-id_0" class="drop home">'; $l .= get_level_ahref(0, ' class="first"') . '<span>'. html_specialchars($GLOBALS['content']['struct'][0]['acat_name']); $l .= '</span></a></li>'; $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 = ''; } // ========================== // -- <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; } ?>
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 */