{{indexmenu_n>50}}

====== Background id based ======

Each of the three different states of a navigation //(normal, hover, active)// get its own background image or a color assigned.

Here shown by a simple example of a single-line navigation using the two navigations [[english/navigation/dropdown-flyout/nav_horiz_dd]] or [[english/navigation/nav_list_ul]].
\\


===== Horizontal =====

{{:deutsch:navigationen:nav_list_ul-beispiele:one_row_id_based_1.gif|}}

==== HTML: ====


**Navi Tag:**
<code html>
<div id="pmenu">{NAV_HORIZ_DD:0,1}</div>

or

<div id="pmenu">{NAV_LIST_UL:,0,1,active,act_path,cat}</div>
</code>

\\

==== CSS: ====

Example: Background images in ##template/img/custom/nav/*##

nav[Category-ID].png
<file>
State normal:      nav[cat-ID].png
State active:  nav_act[cat-ID].png
State hover:   nav_hov[cat-ID].png
</file>


<code css|h CSS |h>
/* ==================================================================
  18.04.10 KH (flip-flop) http://planmatrix.de
  Simple ID-based navigation for one row
  <div id="pmenu">{NAV_LIST_UL:,0,1,active,act_path,cat}</div>
  =================================================================== */
/* 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 Groessen, 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;
    font-weight:bold;
}


/* BASE ===================================== */
/* Einstellungen für die einzelnen Navigationspunkte */

#pmenu #cat-id_1 a,     /* NAV_HORIZ_DD */
#pmenu #li_cat_1 a {    /* NAV_LIST_UL  */
    color: #444;
    width:110px;
    background: gold           url(../img/custom/nav/nav01.png) 0 0 no-repeat;
}
#pmenu #cat-id_2 a,
#pmenu #li_cat_2 a {
    width:160px;
    background: green          url(../img/custom/nav/nav02.png) 0 0 no-repeat;
}
#pmenu #cat-id_3 a,
#pmenu #li_cat_3 a {
    width:130px;
    background: red            url(../img/custom/nav/nav03.png) 0 0 no-repeat;
}
#pmenu #cat-id_4 a,
#pmenu #li_cat_4 a {
    width:150px;
    background: blue           url(../img/custom/nav/nav04.png) 0 0 no-repeat;
}
#pmenu #cat-id_13 a,
#pmenu #li_cat_13 a {
    width:120px;
    background: peru           url(../img/custom/nav/nav13.png) 0 0 no-repeat;
}


/* ACTIVE ===================================== */
/* Aktive Navigationspunkte */

#pmenu #cat-id_1.act_path a,
#pmenu #li_cat_1.act_path a {
    color: #444;
    background: palegoldenrod  url(../img/custom/nav/nav_act01.png) 0 0 no-repeat;
}
#pmenu #cat-id_2.act_path a,
#pmenu #li_cat_2.act_path a {
    background: lightgreen     url(../img/custom/nav/nav_act02.png) 0 0 no-repeat;
}
#pmenu #cat-id_3.act_path a,
#pmenu #li_cat_3.act_path a {
    background: salmon         url(../img/custom/nav/nav_act03.png) 0 0 no-repeat;
}
#pmenu #cat-id_4.act_path a,
#pmenu #li_cat_4.act_path a {
    background: cornflowerblue url(../img/custom/nav/nav_act04.png) 0 0 no-repeat;
}
#pmenu #cat-id_13.act_path a,
#pmenu #li_cat_13.act_path a {
    background: goldenrod      url(../img/custom/nav/nav_act013.png) 0 0 no-repeat;
}

/* Set up the list items */
/* Einstellen der Listeneinzelheiten */
#pmenu li {
   float: left;
   list-style-type: none;
   background: #7484ad;
}

/* HOVER ===================================== */
/* 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: fuchsia;        /* Simple fallback */
   color: #BF4300;      /* ORG #c00; */
}

#pmenu li#cat-id_1 a:hover,
#pmenu li#li_cat_1 a:hover  {
   background: yellow          url(../img/custom/nav/nav_hov01.png) 0 0 no-repeat;
   color: #444;      /* ORG #c00; */
}
#pmenu li#cat-id_2 a:hover,
#pmenu li#li_cat_2 a:hover  {
   background: lime            url(../img/custom/nav/nav_hov02.png) 0 0 no-repeat;
   color: #444;      /* ORG #c00; */
}
#pmenu li#cat-id_3 a:hover,
#pmenu li#li_cat_3 a:hover  {
   background: tomato          url(../img/custom/nav/nav_hov03.png) 0 0 no-repeat;
   color: #444;      /* ORG #c00; */
}
#pmenu li#cat-id_4 a:hover,
#pmenu li#li_cat_4 a:hover  {
   background: mediumslateblue url(../img/custom/nav/nav_hov04.png) 0 0 no-repeat;
   color: #444;      /* ORG #c00; */
}
#pmenu li#cat-id_13 a:hover,
#pmenu li#li_cat_13 a:hover  {
   background: orange          url(../img/custom/nav/nav_hov13.png) 0 0 no-repeat;
   color: #444;      /* ORG #c00; */
}

</code>

\\
\\
~~UP~~

 ===== Vertical =====
 

**Adoption:** A combination of horizontal // (see above) // and vertical navigation.  

Example how individual areas under a certain category can be colored with CSS.

{{:deutsch:navigationen:nav_list_ul-beispiele:vertical_id_based01_1.gif|}}

Based on the above example the Category06 was added.


The simplest is to generate a separate CSS file.

\\
The call of vertical navigation is made in the Template by using ther "Level Lift": 

<code php>
[PHP]
if(isset($GLOBALS['LEVEL_ID'][1])) {
$level_id = $GLOBALS['LEVEL_ID'][1];
echo '<div class="nlu_navi1_id">'.LF;
echo '{NAV_LIST_UL:,'.$level_id.',,act_path,active,catv}';
echo '</div>';
}
[/PHP]
</code> 

\\

==== Generated source: ====

<code html>
<div class="nlu_navi1_id">

  <ul id="catv_36" class="act_path">
    <li id="li_catv_37" class="sub_ul act_path sub_first"><a href="category06_01.phtml" title="Category06_01">Category06_01</a>
      <ul id="catv_37" class="act_path">
        <li id="li_catv_40" class="sub_no act_path active sub_first"><a href="category06_01_01.phtml" title="Category06_01_01">Category06_01_01</a></li>
        <li id="li_catv_41" class="sub_no"><a href="cat05_06_01_02.phtml" title="Category06_01_02">Category06_01_02</a></li>
        <li id="li_catv_42" class="sub_no"><a href="category06_01_03.phtml" title="Category06_01_03">Category06_01_03</a></li>
     </ul>
    </li>
    <li id="li_catv_38" class="sub_ul"><a href="category_06_02.phtml" title="Category06_02">Category06_02</a>
      <ul id="catv_38">
        <li id="li_catv_43" class="sub_no sub_first"><a href="category06_02_01.phtml" title="Category06_02_01">Category06_02_01</a></li>
        <li id="li_catv_44" class="sub_no"><a href="category06_02_02.phtml" title="Category06_02_02">Category06_02_02</a></li>
        <li id="li_catv_45" class="sub_no"><a href="category06_02_03.phtml" title="Category06_02_03">Category06_02_03</a></li>
      </ul>
    </li>
    <li id="li_catv_39" class="sub_no"><a href="cat05_06_03.phtml" title="Category06_03">Category06_03</a></li>
  </ul>
  
</div>
</code>

\\

==== CSS: ====

Example: Background image in ##img/article/*##


<file>
Normal state:  navi1_norm.gif
Active state:   navi1_act.gif
Sub level available:   navi1_sub_true.gif
Hover state:   navi1_hov.gif
</file>


CSS from file [[english/navigation/nav_list_ul]].

The difference is identified here as an example of colors //(see picture above)//.

Compendium for the first range Category06_01....
<code css|h CSS |h>
/* ======================================================================
   >= V1.30   CSS for an vertical menu
   <div class="nlu_navi1_ul_id">{ NAV_LIST_UL:F,0,,act_path,active,catv }</div>
   Level 0 - 3;
   26.03.07 flip-flop (KH)
   13.10.10 Update catv_[ID]
 
========================================================================= */
 
 
.nlu_navi1_id {
   margin: 0;
   padding: 0;
   border: 0;
   text-decoration: none;
   /* ++ e.g. 11px font and 19px height // z.B. 11px font und 19px hoch */
   font: normal normal 11px/19px Verdana, Geneva, Arial, Helvetica, sans-serif;
   width: 200px;  /* ++ Width of Menu Items // Breite der Navigation*/
/*   float:left; */
}
 
.nlu_navi1_id em { font-style: normal; }
 
.nlu_navi1_id ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
   width: 200px;  /* ++ Width of Menu Items // Breite der Navigation */
}
 
.nlu_navi1_id ul li { position: relative; }
 
 
/* ==== Styles for Menu Items =================================== */
 
/* ==== LEVEL X ================================================= */
 
/* ====  simple link <a> // einfacher Link <a> ==== */
.nlu_navi1_id ul li a,
.nlu_navi1_id ul li a:link,
.nlu_navi1_id ul li a:visited,
.nlu_navi1_id ul li a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   color: #FFFFFF;           /* ++ Text color // Textfarbe */
 
   /* ++ background color; url of the image; image adjust e.g. left gap 10px */
   /* ++ Hintergrundfarbe; URL der Grafik  ; Grafik einrücken z.B. 10px */
   background: #81909F url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;
 
   /* ++ Text adjust e.g. upper gap and left gap 25px */
   /* ++ Text justieren 1px oben und 25px von links */
   padding: 1px 0 0 25px;
 
   /* ++ bottom line if you want */
   /* ++ Untere Linie wenn gewuenscht */
   border-bottom: 1px solid #ccc; /* IE6 Bug */
 
   /* ++ Den "white-space" Fehler im IE7 vermeiden */
   /* ++ Killing the "white-space" bug in IE7 */
   \width: 200px;  /* IE5x Opera <= 5 */
   widt\h: 175px;  /* = (Width of Menu Items) - (padding-right + padding-left) */
}

/* ====  simple link <a> // einfacher Link <a> ==== */
.nlu_navi1_id ul li a,
.nlu_navi1_id ul li a:link,
.nlu_navi1_id ul li a:visited,
.nlu_navi1_id ul li a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   color: #FFFFFF;           /* ++ Text color // Textfarbe */
 
   /* ++ background color; url of the image; image adjust e.g. left gap 10px */
   /* ++ Hintergrundfarbe; URL der Grafik  ; Grafik einrücken z.B. 10px */
   background: #81909F url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;
 
   /* ++ Text adjust e.g. upper gap and left gap 25px */
   /* ++ Text justieren 1px oben und 25px von links */
   padding: 1px 0 0 25px;
 
   /* ++ bottom line if you want */
   /* ++ Untere Linie wenn gewuenscht */
   border-bottom: 1px solid #ccc; /* IE6 Bug */
 
   /* ++ Den "white-space" Fehler im IE7 vermeiden */
   /* ++ Killing the "white-space" bug in IE7 */
   \width: 200px;  /* IE5x Opera <= 5 */
   widt\h: 175px;  /* = (Width of Menu Items) - (padding-right + padding-left) */
}
/* ====  simple link <a> // einfacher Link <a> ==== */
.nlu_navi1_id ul li#li_catv_37 a,
.nlu_navi1_id ul li#li_catv_37 a:link,
.nlu_navi1_id ul li#li_catv_37 a:visited,
.nlu_navi1_id ul li#li_catv_37 a:active {

   color: #FFFFFF;           /* ++ Text color // Textfarbe */
   
   /* ++ background color; url of the image; image adjust e.g. left gap 10px */
   /* ++ Hintergrundfarbe; URL der Grafik  ; Grafik einrücken z.B. 10px */
   background: blue url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;

}
.nlu_navi1_id ul li#li_catv_38 a,
.nlu_navi1_id ul li#li_catv_38 a:link,
.nlu_navi1_id ul li#li_catv_38 a:visited,
.nlu_navi1_id ul li#li_catv_38 a:active {

   color: #FFFFFF;           /* ++ Text color // Textfarbe */
 
   /* ++ background color; url of the image; image adjust e.g. left gap 10px */
   /* ++ Hintergrundfarbe; URL der Grafik  ; Grafik einrücken z.B. 10px */
   background: brown  url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;
}
.nlu_navi1_id ul li#li_catv_39 a,
.nlu_navi1_id ul li#li_catv_39 a:link,
.nlu_navi1_id ul li#li_catv_39 a:visited,
.nlu_navi1_id ul li#li_catv_39 a:active {

   color: #FFFFFF;           /* ++ Text color // Textfarbe */
 
   /* ++ background color; url of the image; image adjust e.g. left gap 10px */
   /* ++ Hintergrundfarbe; URL der Grafik  ; Grafik einrücken z.B. 10px */
   background: olivedrab  url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;
}

 
/* ====  Aktiv, wenn ein Sublevel vorhanden ist // active point if there is a sub_level ==== */
.nlu_navi1_id ul li.sub_ul_true a,
.nlu_navi1_id ul li.sub_ul_true a:link,
.nlu_navi1_id ul li.sub_ul_true a:visited,
.nlu_navi1_id ul li.sub_ul_true a:active {
   color: White;
   font-weight: normal;
   background: darkslateblue url(../../img/article/navi1_sub_true.gif) 10px 1px no-repeat;
}
 
/* ====  Aktiver Pfad - Linkverfolgung im Baum // active path in tree (link tracing) ==== */
.nlu_navi1_id ul li#li_catv_37.act_path a,
.nlu_navi1_id ul li#li_catv_37.act_path a:link,
.nlu_navi1_id ul li#li_catv_37.act_path a:visited,
.nlu_navi1_id ul li#li_catv_37.act_path a:active {
   color: White;
   font-weight: bold;
   background: darkslateblue url(../../img/article/navi1_act.gif) 10px 1px no-repeat;
}

/* ====  Einfacher Link - Keine Unterebene  // simple link - no su level ==== */
.nlu_navi1_id ul ul#catv_37 li.sub_no a,
.nlu_navi1_id ul ul#catv_37 li.sub_no a:link,
.nlu_navi1_id ul ul#catv_37 li.sub_no a:visited,
.nlu_navi1_id ul ul#catv_37 li.sub_no a:active {
   color: White;
   font-weight: normal;

}

/* ====  Aktiver Pfad - Linkverfolgung im Baum // active path in tree (link tracing) ==== */
.nlu_navi1_id ul ul#catv_37 li.act_path a,
.nlu_navi1_id ul ul#catv_37 li.act_path a:link,
.nlu_navi1_id ul ul#catv_37 li.act_path a:visited,
.nlu_navi1_id ul ul#catv_37 li.act_path a:active {
   color: White;
   font-weight: bold;
   background: navy url(../../img/article/navi1_act.gif) 10px 1px no-repeat;
}

 
/* ====  Elternebene, wenn der Schalter gesetzt // Parent, if switch is set ==== */
.nlu_navi1_id ul li.sub_parent a,
.nlu_navi1_id ul li.sub_parent a:link,
.nlu_navi1_id ul li.sub_parent a:visited,
.nlu_navi1_id ul li.sub_parent a:active {
   color: White;
   font-weight: normal;
   background: #81909F url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;
}
 
/* ====  active link <a> // aktiver Link <a> ==== */
.nlu_navi1_id ul#catv_37 li.active a,
.nlu_navi1_id ul#catv_37 li.active a:link,
.nlu_navi1_id ul#catv_37 li.active a:visited,
.nlu_navi1_id ul#catv_37 li.active a:active {
   color: White;
   font-weight: bold;
   background: #63819F url(../../img/article/navi1_act.gif) 10px 1px no-repeat;
}
 
/* ====  hover: Maus über Link <a> // hover link <a> ==== */

.nlu_navi1_id ul li#li_catv_37 a:hover {
   color: White;
/*   text-decoration: underline; */
   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
.nlu_navi1_id ul li#li_catv_37.sub_no a:hover {
   color: White;
   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
.nlu_navi1_id ul li#li_catv_37.sub_ul a:hover {
   background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;
}
/* ====  hover: Wenn Sublevel vorhanden <a> // hover: "if there is a sub_level" <a> ==== */
.nlu_navi1_id ul li#li_catv_37.sub_ul_true a:hover {
   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
 
/* ====  hover: Parent Link <a> // hover: "Only for the parent link" <a> ==== */
.nlu_navi1_id ul li#li_catv_37.sub_parent a:hover {
   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
 
/* ====  hover: Der aktive Link <a> // hover: "Only for the active link" <a> ==== */
.nlu_navi1_id ul li#li_catv_37.active a:hover {
   background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;
}
.nlu_navi1_id ul ul#catv_37 li.act_path a:hover{
   background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;
}
 

/* ==== Beispielhafte Fortfuehrung fuer die anderen IDs ==== */
.nlu_navi1_id ul li#li_catv_38 a:hover {
   color: White;
/*   text-decoration: underline; */
   background: #BF5F5F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
.nlu_navi1_id ul li#li_catv_39 a:hover {
   color: White;
/*   text-decoration: underline; */
   background: #93AF57 url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
 
/* ==== LEVEL X+1 =============================================== */
 
.nlu_navi1_id ul ul li.sub_no a,
.nlu_navi1_id ul ul li.sub_no a:link,
.nlu_navi1_id ul ul li.sub_no a:visited,
.nlu_navi1_id ul ul li.sub_no a:active,
.nlu_navi1_id ul ul li.sub_ul a,
.nlu_navi1_id ul ul li.sub_ul a:link,
.nlu_navi1_id ul ul li.sub_ul a:visited,
.nlu_navi1_id ul ul li.sub_ul a:active {
   display: block;
/*
   text-decoration: none;
   text-transform: none;
 
   font-weight: normal;
   color: #FFFFFF;
   background: #8E9FAF url(../../img/article/navi1_norm.gif) 25px 1px no-repeat;
*/
   padding: 1px 0 0 40px;
   border-bottom: 1px solid #ccc; /* IE6 Bug */
   \width: 200px;  /* IE5x Opera <= 5 */
   widt\h: 160px;  /* = (Width of Menu Items) - (padding-right + left) */
}
 

 
 
/* ==== LEVEL X+2 =============================================== */
 
.nlu_navi1_id ul ul ul li.sub_no a,
.nlu_navi1_id ul ul ul li.sub_no a:link,
.nlu_navi1_id ul ul ul li.sub_no a:visited,
.nlu_navi1_id ul ul ul li.sub_no a:active,
.nlu_navi1_id ul ul ul li.sub_ul a,
.nlu_navi1_id ul ul ul li.sub_ul a:link,
.nlu_navi1_id ul ul ul li.sub_ul a:visited,
.nlu_navi1_id ul ul ul li.sub_ul a:active  {
   display: block;
/*
   text-decoration: none;
   text-transform: none;
   font-weight: normal;
   color: #FFFFFF;
   background: #83A1BF url(../../img/article/navi1_norm.gif) 40px 1px no-repeat;
*/
   padding: 1px 0 0 55px;
   border-bottom: 1px solid #ccc; /* IE6 Bug */
   \width: 200px;  /* IE5x Opera <= 5 */
   widt\h: 145px;  /* = (Width of Menu Items) - (padding-right + left) */
}
 

/*==== END LEVEL X ============================================= */
 
/* Holly Hack. IE Requirement \*/
* html .nlu_navi1_id ul li { float: left; height: 1%; }
* html .nlu_navi1_id ul li a { height: 1%; }
 
/* ==== End  nlu_navi1_ul_id ========================================= */
 

</code>

\\
~~UP~~
\\


====== Example No 2 ======


===== Horizontal =====

{{:deutsch:navigationen:nav_list_ul-beispiele:one_row_id_based04_1.gif|}}

==== HTML: ====


**Navi Tag:**
<code html>
<div id="pmenu">{NAV_HORIZ_DD:0,1}</div>

oder

<div id="pmenu">{NAV_LIST_UL:,0,1,active,act_path,cat}</div>
</code>


\\

==== CSS: ====


<code |h CSS |h>
/* ==================================================================
  18.04.10 KH (flip-flop) http://planmatrix.de
  Simple ID-based navigation for one row
  <div id="pmenu">{NAV_LIST_UL:,0,1,active,act_path,cat}</div>
  =================================================================== */
/* 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 0px 0;  /* 100px only for testing - default = 0 */
   position: relative;
   width: 920px;
   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 Groessen, 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;
    font-weight:bold;
}
 
 
/* BASE ===================================== */
/* Einstellungen für die einzelnen Navigationspunkte */
 
#pmenu #cat-id_1 a,     /* NAV_HORIZ_DD */
#pmenu #li_cat_1 a {    /* NAV_LIST_UL  */
    color: #444;
    width:110px;
    background: gold           url(../img/custom/nav/nav01.png) 0 0 no-repeat;
}
#pmenu #cat-id_2 a,
#pmenu #li_cat_2 a {
    width:160px;
    background: green          url(../img/custom/nav/nav02.png) 0 0 no-repeat;
}
#pmenu #cat-id_3 a,
#pmenu #li_cat_3 a {
    width:130px;
    background: red            url(../img/custom/nav/nav03.png) 0 0 no-repeat;
}
#pmenu #cat-id_4 a,
#pmenu #li_cat_4 a {
    width:150px;
    background: blue           url(../img/custom/nav/nav04.png) 0 0 no-repeat;
}
#pmenu #cat-id_13 a,
#pmenu #li_cat_13 a {
    width:120px;
    background: peru           url(../img/custom/nav/nav13.png) 0 0 no-repeat;
}
#pmenu #cat-id_36 a,
#pmenu #li_cat_36 a {
    width:90px;
    background: mediumvioletred   url(../img/custom/nav/nav36.png) 0 0 no-repeat;
}
#pmenu #cat-id_47 a,
#pmenu #li_cat_47 a {
    width:90px;
    background: slateblue      url(../img/custom/nav/nav36.png) 0 0 no-repeat;
}
 
/* ACTIVE ===================================== */
/* Aktive Navigationspunkte */
 
#pmenu #cat-id_1.active a,
#pmenu #li_cat_1.active a {
    color: #444;
    background: palegoldenrod  url(../img/custom/nav/nav_act01.png) 0 0 no-repeat;
}
#pmenu #cat-id_2.active a,
#pmenu #li_cat_2.active a {
    background: lightgreen     url(../img/custom/nav/nav_act02.png) 0 0 no-repeat;
}
#pmenu #cat-id_3.active a,
#pmenu #li_cat_3.active a {
    background: salmon         url(../img/custom/nav/nav_act03.png) 0 0 no-repeat;
}
#pmenu #cat-id_4.active a,
#pmenu #li_cat_4.active a {
    background: cornflowerblue url(../img/custom/nav/nav_act04.png) 0 0 no-repeat;
}
#pmenu #cat-id_13.active a,
#pmenu #li_cat_13.active a {
    background: goldenrod      url(../img/custom/nav/nav_act013.png) 0 0 no-repeat;
}
#pmenu #cat-id_36.active a,
#pmenu #li_cat_36.active a {
    background: deeppink       url(../img/custom/nav/nav_act013.png) 0 0 no-repeat;
}
#pmenu #cat-id_47.active a,
#pmenu #li_cat_47.active a {
    background: mediumslateblue  url(../img/custom/nav/nav_act013.png) 0 0 no-repeat;
}
 

 
/* Set up the list items */
/* Einstellen der Listeneinzelheiten */
#pmenu li {
   float: left;
   list-style-type: none;
   background: #7484ad;
}
 
/* HOVER ===================================== */
/* 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: fuchsia;        /* Simple fallback */
   color: #BF4300;      /* ORG #c00; */
}
 
#pmenu li#cat-id_1 a:hover,
#pmenu li#li_cat_1 a:hover  {
   background: yellow          url(../img/custom/nav/nav_hov01.png) 0 0 no-repeat;
   color: #444;      /* ORG #c00; */
}
#pmenu li#cat-id_2 a:hover,
#pmenu li#li_cat_2 a:hover  {
   background: lime            url(../img/custom/nav/nav_hov02.png) 0 0 no-repeat;
   color: #444;      /* ORG #c00; */
}
#pmenu li#cat-id_3 a:hover,
#pmenu li#li_cat_3 a:hover  {
   background: tomato          url(../img/custom/nav/nav_hov03.png) 0 0 no-repeat;
   color: #222;      /* ORG #c00; */
}
#pmenu li#cat-id_4 a:hover,
#pmenu li#li_cat_4 a:hover  {
   background: mediumslateblue url(../img/custom/nav/nav_hov04.png) 0 0 no-repeat;
   color: #000;      /* ORG #c00; */
}
#pmenu li#cat-id_13 a:hover,
#pmenu li#li_cat_13 a:hover  {
   background: orange          url(../img/custom/nav/nav_hov13.png) 0 0 no-repeat;
   color: #444;      /* ORG #c00; */
}
#pmenu li#cat-id_36 a:hover,
#pmenu li#li_cat_36 a:hover  {
   background: hotpink          url(../img/custom/nav/nav_hov13.png) 0 0 no-repeat;
   color: #444;      /* ORG #c00; */
}
#pmenu li#cat-id_47 a:hover,
#pmenu li#li_cat_47 a:hover  {
   background: mediumpurple          url(../img/custom/nav/nav_hov13.png) 0 0 no-repeat;
   color: #000;      /* ORG #c00; */
}
</code>

~~UP~~
\\

===== Vertikal =====

**Adoption:** A combination of horizontal  //(see above)//  and vertical navigation.  

Example how the area under a category can be colored with CSS.

{{:deutsch:navigationen:nav_list_ul-beispiele:vertical_id_based0405_1.gif|}}

\\
The call of vertical navigation is made in the Template by using ther "Level Lift":

<code php>
[PHP]
if(isset($GLOBALS['LEVEL_ID'][1])) {
$level_id = $GLOBALS['LEVEL_ID'][1];
echo '<div class="nlu_navi1_id">'.LF;
echo '{NAV_LIST_UL:,'.$level_id.',,act_path,active,catv}';
echo '</div>';
}
[/PHP]
</code> 

\\
==== Generated source: ====

**Below Category06,** Category06_01_03 is active: 


<code html>
<div class="nlu_navi1_id">

<ul id="catv_36" class="act_path">
	<li id="li_catv_37" class="sub_ul act_path sub_first"><a href="category06_01.phtml" title="Category06_01">Category06_01</a>
	<ul id="catv_37" class="act_path">
		<li id="li_catv_40" class="sub_no sub_first"><a href="category06_01_01.phtml" title="Category06_01_01">Category06_01_01</a></li>
		<li id="li_catv_41" class="sub_no"><a href="cat05_06_01_02.phtml" title="Category06_01_02">Category06_01_02</a></li>
		<li id="li_catv_42" class="sub_ul act_path active"><a href="category06_01_03.phtml" title="Category06_01_03">Category06_01_03</a>
		<ul id="catv_42" class="act_path">
			<li id="li_catv_46" class="sub_no sub_first"><a href="category06_01_03_01.phtml" title="Category06_01_03_01">Category06_01_03_01</a></li>
		</ul>
		</li>
	</ul>
	</li>
	<li id="li_catv_38" class="sub_ul"><a href="category_06_02.phtml" title="Category06_02">Category06_02</a>
	<ul id="catv_38">
		<li id="li_catv_43" class="sub_no sub_first"><a href="category06_02_01.phtml" title="Category06_02_01">Category06_02_01</a></li>
		<li id="li_catv_44" class="sub_no"><a href="category06_02_02.phtml" title="Category06_02_02">Category06_02_02</a></li>
		<li id="li_catv_45" class="sub_no"><a href="category06_02_03.phtml" title="Category06_02_03">Category06_02_03</a></li>
	</ul>
	</li>
	<li id="li_catv_39" class="sub_no"><a href="cat05_06_03.phtml" title="Category06_03">Category06_03</a></li>
</ul>

</div>
</code>


\\

==== CSS: ====

<code css|h CSS |h>
/* ======================================================================
   >= V1.30   CSS for an vertical menu
   <div class="nlu_navi1_ul_id">{ NAV_LIST_UL:F,0,,act_path,active,catv }</div>
   Level 0 - 3;
   26.03.07 flip-flop (KH)
   13.10.10 Update catv_[ID]
 
========================================================================= */
 
 
.nlu_navi1_id {
   margin: 0;
   padding: 0;
   border: 0;
   text-decoration: none;
   /* ++ e.g. 11px font and 19px height // z.B. 11px font und 19px hoch */
   font: normal normal 11px/19px Verdana, Geneva, Arial, Helvetica, sans-serif;
   width: 200px;  /* ++ Width of Menu Items // Breite der Navigation*/
/*   float:left; */
}
 
.nlu_navi1_id em { font-style: normal; }
 
.nlu_navi1_id ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
   width: 200px;  /* ++ Width of Menu Items // Breite der Navigation */
}
.nlu_navi1_id ul#catv_36 {
   /* ++ background color; url of the image; image adjust e.g. left gap 10px */
   /* ++ Hintergrundfarbe; URL der Grafik  ; Grafik einrücken z.B. 10px */
   background: mediumvioletred ;
}
.nlu_navi1_id ul#catv_47 {
   /* ++ background color; url of the image; image adjust e.g. left gap 10px */
   /* ++ Hintergrundfarbe; URL der Grafik  ; Grafik einrücken z.B. 10px */
   background: slateblue  ;
}
 
.nlu_navi1_id ul li { position: relative; }
 
 
/* ==== Styles for Menu Items =================================== */
 
/* ==== LEVEL X ================================================= */
 
/* ====  simple link <a> // einfacher Link <a> ==== */
.nlu_navi1_id ul li a,
.nlu_navi1_id ul li a:link,
.nlu_navi1_id ul li a:visited,
.nlu_navi1_id ul li a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   color: #FFFFFF;           /* ++ Text color // Textfarbe */
 
   /* ++ background color; url of the image; image adjust e.g. left gap 10px */
   /* ++ Hintergrundfarbe; URL der Grafik  ; Grafik einrücken z.B. 10px */
/*   background: #81909F url(../../img/article/navi1_norm.gif) 10px 1px no-repeat; */
   background: url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;
 
   /* ++ Text adjust e.g. upper gap and left gap 25px */
   /* ++ Text justieren 1px oben und 25px von links */
   padding: 1px 0 0 25px;
 
   /* ++ bottom line if you want */
   /* ++ Untere Linie wenn gewuenscht */
   border-bottom: 1px solid #ccc; /* IE6 Bug */
 
   /* ++ Den "white-space" Fehler im IE7 vermeiden */
   /* ++ Killing the "white-space" bug in IE7 */
   \width: 200px;  /* IE5x Opera <= 5 */
   widt\h: 175px;  /* = (Width of Menu Items) - (padding-right + padding-left) */
}


 
/* ==== LEVEL X+1 =============================================== */
 
.nlu_navi1_id ul ul li a,
.nlu_navi1_id ul ul li a:link,
.nlu_navi1_id ul ul li a:visited,
.nlu_navi1_id ul ul li a:active {
   display: block;
   padding: 1px 0 0 40px;
   border-bottom: 1px solid #ccc; /* IE6 Bug */
   \width: 200px;  /* IE5x Opera <= 5 */
   widt\h: 160px;  /* = (Width of Menu Items) - (padding-right + left) */
}
 
.nlu_navi1_id ul#catv_36 ul li.sub_no a, 
.nlu_navi1_id ul#catv_36 ul li.sub_ul a {
   color: White;
/*   text-decoration: underline; */
   background:  mediumvioletred url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
.nlu_navi1_id ul#catv_47 ul li.sub_no a, 
.nlu_navi1_id ul#catv_47 ul li.sub_ul a {
   color: White;
/*   text-decoration: underline; */
   background:  slateblue url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
 
/* ==== LEVEL X+2 =============================================== */
 
.nlu_navi1_id ul ul ul li a,
.nlu_navi1_id ul ul ul li a:link,
.nlu_navi1_id ul ul ul li a:visited,
.nlu_navi1_id ul ul ul li a:active {
   display: block;
   padding: 1px 0 0 55px;
   border-bottom: 1px solid #ccc; /* IE6 Bug */
   \width: 200px;  /* IE5x Opera <= 5 */
   widt\h: 145px;  /* = (Width of Menu Items) - (padding-right + left) */
}

.nlu_navi1_id ul#catv_36 ul ul li.sub_no a, 
.nlu_navi1_id ul#catv_36 ul ul li.sub_ul a {
   color: White;
/*   text-decoration: underline; */
   background:  mediumvioletred url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
.nlu_navi1_id ul#catv_47 ul ul li.sub_no a, 
.nlu_navi1_id ul#catv_47 ul ul li.sub_ul a {
   color: White;
/*   text-decoration: underline; */
   background:  slateblue url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}


/*==== END LEVEL X ============================================= */

/* ====  .active: Aktiver Link <a> // .active link <a> ==== */
.nlu_navi1_id ul#catv_36 li.active a,
.nlu_navi1_id ul#catv_36 ul li.active a, 
.nlu_navi1_id ul#catv_36 ul ul li.active a {
   color: White;
/*   text-decoration: underline; */
   background: deeppink url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
.nlu_navi1_id ul#catv_47 li.active a,
.nlu_navi1_id ul#catv_47 ul li.active a, 
.nlu_navi1_id ul#catv_47 ul ul li.active a {
   color: White;
/*   text-decoration: underline; */
   background: mediumslateblue url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}

/* ====  hover: Maus über Link <a> // hover link <a> ==== */
.nlu_navi1_id ul#catv_36 a:hover, 
.nlu_navi1_id ul#catv_36 ul li a:hover, 
.nlu_navi1_id ul#catv_36 ul ul li a:hover {
   color: White;
/*   text-decoration: underline; */
   background: hotpink url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}

/* ==== Beispielhafte Fortfuehrung fuer die anderen IDs ==== */
.nlu_navi1_id ul#catv_47 a:hover, 
.nlu_navi1_id ul#catv_47 ul li a:hover, 
.nlu_navi1_id ul#catv_47 ul ul li a:hover {
   color: White;
/*   text-decoration: underline; */
   background: mediumpurple url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}

/*==== IE only  ============================================= */
 
/* Holly Hack. IE Requirement \*/
* html .nlu_navi1_id ul li { float: left; height: 1%; }
* html .nlu_navi1_id ul li a { height: 1%; }
 
/* ==== End  nlu_navi1_ul_id ========================================= */
</code>

\\

======  ======



----
Docu: -- \\
Forum: [[http://forum.phpwcms.org/viewtopic.php?p=123958#p123958|Navigation(-Buttons) im CMS erstellen?!]]

**Author:** K.Heermann (flip-flop) http://planmatrix.de \\
**CMS Version:** >= 1.4x \\ 
**Version:** V1.0 //(21.04.2010)// \\

**Update:** --  \\

**Condition:**  --


----

 --- //[[flip-flop@myrealbox.com|Knut Heermann (flip-flop)]] 2010/04/21 07:07//