[[NAV_HORIZ_DD:ID,Level depth]]
You are here: Willkommen im phpwcms-HowTo:wiki » Documentation (EN) » Navigation » Dropdown / Flyout » NAV_HORIZ_DD:ID,Level depth
Show pagesourceOld revisions
Recent changesIndex

NAVIGATION

Imprint / Impressum

Please Donate!

With your donation you accelerate more enhancements of the wiki.

This is an old revision of the document!

Table of Contents

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 {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

  • $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:

  1. Copy the two snippets into their respective files (must be created)
    1. /template/inc_script/frontend_render/rt_nav_horiz_drop_down.php
    2. /template/inc_css/nav_horiz_drop_down.css
  2. Insert the tag into the template at the preferred place, where the menu is to appear
    • E.g.: <div id=“menu_container”>{NAV_HORIZ_DD:0,4}</div>
  3. Merge the CSS file into the layout
    • ADMIN → template → select css-file: [nav_horiz_drop_down.css] (Multiple choice also <Strg> left mouse button)
  4. 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)
  5. 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. 

<div id="menu_container">{NAV_HORIZ_DD:0,2}</div>


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 the line (in ==== Custom var ====) around line 36 of the script you can turn on/off the link (in ==== Custom var ====)
    Generated code: <li id="cat-id_0" class="drop home"><a class="first" href="....
    —-
    ==== PHP V1.0 ==== Filename: rt_nav_horiz_drop_down.php Location: /template/inc_script/frontend_render/ <code php|h rt_nav_horiz_drop_down.php |h> <?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 ; } return $t; } ?> </code>
==== PHP V1.01 ==== Dateiname: rt_nav_horiz_drop_down.php Ort: /template/inc_script/frontend_render/ <code php|h rt_nav_horiz_drop_down.php |h> <?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 ; } return $t; } ?> </code>
==== CSS ==== Fileiname: nav_horiz_drop_down.css Location: /template/inc_css/ <code php|h /nav_horiz_drop_down.css |h> #menu_container { margin: 0 0 100px 0; position: relative; width: 735px; height: 21px; z-index: 1000; } #pmenu, #pmenu ul { padding: 0; margin: 0; list-style-type: none; } #pmenu a, #pmenu a:visited { display: block; width: 120px; font-size: 11px; color: #fff; height: 21px; line-height: 20px; text-decoration: none; text-indent: 5px; border: 1px solid #fff; border-width: 1px 0 1px 1px; } #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; } #pmenu li { float: left; list-style-type: none; background: #7484ad; } #pmenu li:hover { position: relative; } #pmenu li:hover > a { background: #D1D5DF; color: #BF4300; } #pmenu li ul { display: none; } #pmenu li:hover > ul { display: block; position: absolute; top: -7px; left: 80px; padding: 6px 30px 30px 30px; background:transparent url(../../img/article/leer.gif); width: 120px; } #pmenu > li:hover > ul { left: -30px; top: 16px; } #pmenu table { position: absolute; border-collapse: collapse; top: 0; left: 0; z-index: 1000; font-size: 1em; } * html #pmenu li a:hover { position: relative; background: #D1D5DF; color: #c00; } #pmenu li a:active, #pmenu li a:focus { background: #dfd7ca; color: #BF4300; } #pmenu li.fly_ul { background: #7484ad url(../../img/symbols/klapp_zu.gif) no-repeat 107px center; } #pmenu li.drop_ul { background: #7484ad url(../../img/symbols/klapp_auf.gif) no-repeat 105px center; } #pmenu li.act_path { background:#4161AF url(../../img/symbols/klapp_auf.gif) no-repeat 105px center; } * 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); } #pmenu li a:hover ul ul { visibility: hidden; } #pmenu li a:hover ul a:hover ul ul { visibility: hidden; } #pmenu li a:hover ul a:hover ul a:hover ul ul { visibility: hidden; } #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; } #pmenu li a:hover ul { visibility: visible; left: -30px; top: 10px; lef\t: -31px; to\p: 11px; } #pmenu li a:hover ul a:hover ul { visibility: visible; top: -11px; left: 80px; } #pmenu li a:hover ul a:hover ul a:hover ul { visibility: visible; } #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; } #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; } </code>

english/navigation/dropdown-flyout/nav_horiz_dd.1283701625.txt.gz · Last modified: 2018/06/03 18:08 (external edit)
Show pagesourceOld revisions
Back to top
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0