You are here: Willkommen im phpwcms-HowTo:wiki » Documentation (EN) » Navigation » Dropdown / Flyout » NAV_HORIZ_DD:ID,Level depth

Show pagesource Old revisions

Recent changes Index

NAVIGATION

Imprint / Impressum

Please Donate!

With your donation you accelerate more enhancements of the wiki.

NAV_HORIZ_DD:ID,Level depth
- - Installation:
  - TAG
  - PHP V1.0
  - PHP V1.01
  - CSS

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:

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
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>
Merge the CSS file into the layout
- ADMIN → template → select css-file: [nav_horiz_drop_down.css] (Multiple choice also <Strg> 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.

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

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: <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/

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

PHP V1.01

Dateiname: rt_nav_horiz_drop_down.php

Ort: /template/inc_script/frontend_render/

rt_nav_horiz_drop_down.php

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

CSS

Fileiname: nav_horiz_drop_down.css

Location: /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 */

english/navigation/dropdown-flyout/nav_horiz_dd.txt · Last modified: 2018/06/03 18:09 (external edit)

Show pagesource Old revisions