NAVIGATION
A vertical navigation using a fly-out mechanism. No JS in use!
A modified navigation of O.G.s {NAVI}. (Very impressive). I say, this is the navigation you should prefer instead of the NAV_LIST_UL:VCSS. The original edition from Stu Nicholls you will find here: A flyout menu with FOUR sub levels, overlap and overrun → Please respect the Copyright
{NAV_VERT_FO:ID,Level depth} (NAVi VERTical Fly Out) V1.0 08.05.08
Docu: –
Forum: http://forum.phpwcms.org/viewtopic.php?p=103999
Author: K.Heermann (flip-flop) http://planmatrix.de (26.04.10)
CMS-Version: >= V1.2.8
Version: V1.0 08.05.08
Condition: → /config/phpwcms/conf.inc.php
Features:
{NAV_VERT_FO:ID,Ebenentiefe} → z.B. Output beginning in level 0 (home/root) with level depht limitation of 2.
<div id="menu_container"> <div class="vert_menu">{NAV_VERT_FO:0,2}</div> </div>
Given structure in this example:
- root (index.php ID=0) --- Home --- Ebene01 --- Ebene02 --- Ebene03 --- Ebene04 --- Ebene05 --- Ebene06
Filename: rt_nav_vert_fly_out.php
Location: /template/inc_script/frontend_render/
<?php // ************************************************************************** // 08.11.07 vertical fly-out with ID output -> NAVI VERTICAL FLY-OUT // Oliver Georgi // Made for Stu Nicholls http://www.cssplay.co.uk/menus/flyout_4level.html // // http://www.phpwcms.de/forum/viewtopic.php?p=89743#89743 // 08.11.07 KH (flip-flop) Enhanced: Start[ID] {NAV_VERT_FO:ID} // 08.05.08 KH (flip-flop) Enhanced: Level depth {NAV_VERT_FO:ID,Depth} // 23.05.08 KH (flip-flop) Changed: Inserted new css classes for // css generator compatibility // TAG [horizontal]: http://forum.phpwcms.org/viewtopic.php?f=1&t=16080 // TAG [vertical]: http://forum.phpwcms.org/viewtopic.php?f=10&t=17233 // // TAG: {NAV_VERT_FO:ID,Depth} // Location: Put it into the file e.g.: // /template/inc_script/frontend_render/rt_nav_vert_fly_out.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_VERT_FO')==false ) ) { $content["all"] = str_replace('{NAV_VERT_FO}','{NAV_VERT_FO:0,100}',$content["all"]); $content["all"] = preg_replace('/\{NAV_VERT_FO:(.*?)\}/i','{NAV_VERT_FO:$1,100}', $content["all"]); $content["all"] = preg_replace('/\{NAV_VERT_FO:(.*?),(.*?)\}/e','buildNavi_vert("$1","0","$2"-1);', $content["all"]); } // $content['all'] = str_replace('{NAVI}', buildNavi(), $content['all']); function buildNavi_vert($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_vert($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); // -- <C01> ------------------------------------------------------------------- // $class = $counter ? (' class="fly_ul '.$a1.'"') : (' class="sub_ul '.$a1.'"'); // Second level with activ category // $class = $counter ? (' class="fly_ul"') : (' class="sub_ul '.$a1.'"'); // KH:23.05.08 changed $class = $counter ? (' class="sub fly_ul"') : (' class="sub sub_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="vert_enclose"'; } elseif( $x || ($counter == 0 && $x == 0) ) { $enclose = ''; } else { $enclose = ' class="vert_enclose"'; } // IDs for every li ======= If you need the ID class, please uncomment/comment // IDs fuer jedes li ======= Wenn sie die ID Klassen benötigen, 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>' . 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>'; // added simple [br] -> <br /> $search[25] = '/\[br\]/i'; $replace[25] = '<br />'; // ========== end copy&paste ======== $t = preg_replace($search, $replace, $t); // -- <E01> ------------------------------------------------------------------- */ return $t; } ?>
Fileiname: sub.gif, shade.gif, transparent.gif
Location: /img/article/navi/
navi_img.zip (1.17 KiB, 115 downloads)
Fileiname: nav_vert_fly_out.css
Location: /template/inc_css/
/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/flyout_4level.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_VERT_FO:ID} 08.05.08 KH (flip-flop) Enhanced: Level depth {NAV_VERT_FO:ID,Depth} Tag [horizontal]: http://www.phpwcms.de/forum/viewtopic.php?p=89743#89743 Tag [vertical]: http://forum.phpwcms.org/viewtopic.php?p=103442#p103442 =================================================================== */ .vert_menu { height:150px; font-size:90%; margin:0px 0 50px 0px; /* this page only */ } /* remove all the bullets, borders and padding from the default list styling */ .vert_menu ul { position:relative; z-index:500; padding:0; margin:0; list-style-type:none; width:200px; /* Kh 150px; */ } /* style the list items */ .vert_menu li { background:#d4d8bd url(../../img/article/navi/shade.gif); height:26px; list-style-type:none; /* for IE7 */ float:left; } .vert_menu li.sub_ul, .vert_menu li.fly_ul {background:#d4d8bd url(../../img/article/navi/sub.gif) no-repeat right center;} .vert_menu li.act_path {background:#cccccc url(../../img/article/navi/sub.gif) no-repeat right center;} /* get rid of the table */ .vert_menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;} /* style the links */ .vert_menu a, .vert_menu a:visited { display:block; text-decoration:none; height:25px; line-height:25px; width:199px; /* KH 149px; */ color:#000; text-indent:5px; border:1px solid #fff; border-width:0 1px 1px 1px; } /* hack for IE5.5 */ * html .vert_menu a, * html .vert_menu a:visited {width:200px; w\idth:199px;} /* KH {width:150px; w\idth:149px;} */ /* style the link hover */ * html .vert_menu a:hover {color:#efa; background:#aa7; position:relative;} .vert_menu li:hover {position:relative;} /* For accessibility of the top level menu when tabbing */ .vert_menu a:active, .vert_menu a:focus {color:#efa; background:#aa7;} /* retain the hover colors for each sublevel IE7 and Firefox etc */ .vert_menu li:hover > a {color:#efa; background:#aa7;} /* hide the sub levels and give them a positon absolute so that they take up no room */ .vert_menu li ul { visibility:hidden; position:absolute; top:-30px; /* set up the overlap (minus the overrun) */ left: 150px; /* KH 100px; */ /* set up the overrun area */ padding:30px; /* this is for IE to make it interpret the overrrun padding */ background:transparent url(../../img/article/navi/transparent.gif); } /* for browsers that understand this is all you need for the flyouts */ .vert_menu li:hover > ul {visibility:visible;} /* for IE5.5 and IE6 you need to style each level hover */ /* keep the third level+ hidden when you hover on first level link */ .vert_menu ul a:hover ul ul{ visibility:hidden; } /* keep the fourth level+ hidden when you hover on second level link */ .vert_menu ul a:hover ul a:hover ul ul{ visibility:hidden; } /* keep the fifth level hidden when you hover on third level link */ .vert_menu ul a:hover ul a:hover ul a:hover ul ul{ visibility:hidden; } /* make the second level visible when hover on first level link */ .vert_menu ul a:hover ul { visibility:visible; } /* make the third level visible when you hover over second level link */ .vert_menu ul a:hover ul a:hover ul{ visibility:visible; } /* make the fourth level visible when you hover over third level link */ .vert_menu ul a:hover ul a:hover ul a:hover ul { visibility:visible; } /* make the fifth level visible when you hover over fourth level link */ .vert_menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility:visible; }
menu builder tool (uring 10 minutes you have created your personal css file).
Call with the generated CSS z.B.: <div class="menu">{NAV_VERT_FO:0,10}</div>
If the active path is to be marked, the following can be inserted into the CSS file:
.menu li.act_path {background:#cccccc url(../../img/article/navi/sub.gif) no-repeat right center;}