This is an old revision of the document!


NAV_HORIZ_DD:ID,Ebenentiefe

Horizontale Navigation mit drop-down Mechanismus. Es wird kein JS verwendet!

Eine modifizierte Navigation von O.G.s {NAVI}. (Sehr beeindruckend). Ich würde diese Navigation der NAV_LIST_UL:HCSS immer vorziehen.
Hier das Original von Stu Nicholls: A simple six level drop-down menu with overlap and overrunNutzungsbedingungen beachten :!:

{NAV_HORIZ_DD:ID,Ebenentiefe} (NAVi HORIZontal Drop Down) V1.0 28.04.08

Docu: –
Forum: http://forum.phpwcms.org/viewtopic.php?p=95342#95342

Autor: K.Heermann (flip-flop) http://planmatrix.de (05.05.09)
CMS-Version: >= V1.2.8
Version: V1.0 28.04.08

Bedingung:/config/phpwcms/conf.inc.php

  • $phpwcms['allow_ext_render'] = 1;


Möglichkeiten:

  • Sechs Ebenenen tief
  • Überlappen und Überfahr(rahm)en !!!
  • Start-ID im RT
  • Max Leveltiefe im RT (seit 28.04.08)
  • Aktiver Pfad wird für die erste Ebene gekennzeichnet
  • Jedes li hat eine eigene Klasse (optional)
  • Einfache html Tags in der Kategorieüberschrift wie [i] [b] [u] [s]


Installation:

  1. Kopieren der beiden Skripte in die jeweils angegebenen Dateien (müssen angelegt werden)
  2. Platzieren des Tags an die Stelle in der Vorlage, an der das Menü erscheinen soll
  3. Einbinden der CSS-Datei in die Vorlage
  4. Den Tag einstellen (Anfangs-ID und darzustellende Ebenentiefe)
  5. CSS-Datei anpassen



TAG

{NAV_HORIZ_DD:ID,Ebenentiefe} → z.B. Menü beginnt ab Level 0 (Home) und ist tiefenbegrenzt auf zwei Level.

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


NAV_HORIZ_DD:ID,Level-depth

PHP

Dateiname: rt_nav_horiz_drop_down.php

Ort: /template/inc_script/frontend_render/

rt_nav_horiz_drop_down.php

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

Dateiname: nav_horiz_drop_down.css

Ort: /template/inc_css/

/nav_horiz_drop_down.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 */
deutsch/navigationen/dropdown_flyout/nav_horiz_dd.1250514669.txt.gz · Last modified: 2018/06/03 18:07 (external edit)
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