Table of Contents

Hintergrund ID basiert

Jeder der drei verschiedene Zustände einer Navigation (normal, hover, active) bekommt ein eigenes Hintergrundbild bzw. eine Farbe zugewiesen.

Hier gezeigt an einem einfachen Beispiel für eine einzeilige Navigation mit den beiden Navigationen NAV_HORIZ_DD:ID,Ebenentiefe oder NAV_LIST_UL (CSS).

Horizontal

HTML:

Navi Tag: 

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


CSS:

Bsp.: Hintergrundbilder in template/img/custom/nav/*

nav[Kategorie-ID].png 

Zustand normal:      nav[cat-ID].png
Zustand aktiv:   nav_act[cat-ID].png
Zustand hover:   nav_hov[cat-ID].png

CSS

/* ==================================================================
  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; */
}


Back to top

Vertikal

Annahme: Eine Kombination aus horizontaler (siehe oben) und vertikaler Navigation.

Beispiel, wie einzelne Bereiche unterhalb einer bestimmten Kategorie per CSS farblich abgegrenzt werden können.

Angelehnt an das oben gezeigte Beispiel ist die Category06 hinzugekommen.

Das Einfachste ist die Generierung einer eigenen CSS Datei.


Der Aufruf der vertikalen Navigation geschieht im Template über den “Level-Lift”: 

[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]


Generierter Quelltext:

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


CSS:

Bsp.: Hintergrundbilder in img/article/* 

Zustand normal:  navi1_norm.gif
Zustand aktiv:   navi1_act.gif
Zustand Unterebene vorhanden:   navi1_sub_true.gif
Zustand hover:   navi1_hov.gif

Als CSS Basis dient die Datei aus NAV_LIST_UL (CSS).

Der unterschied wird hier beispielhaft über Farben kenntlich gemacht (siehe Bild oben).

Auszug für den ersten Bereich Category06_01….

CSS

/* ======================================================================
   >= 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 ========================================= */
Back to top


Beispiel Nr 2

Horizontal

HTML:

Navi Tag: 

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


CSS:

CSS

/* ==================================================================
  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; */
}
Back to top


Vertikal

Annahme: Eine Kombination aus horizontaler (siehe oben) und vertikaler Navigation.

Beispiel, wie der Bereich unterhalb einer Kategorie per CSS farblich gegenüber der benachbarten Kategorie abgegrenzt werden kann.


Der Aufruf der vertikalen Navigation geschieht im Template über den “Level-Lift”: 

[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]


Generierter Quelltext:

Unterhalb Category06, Category06_01_03 ist aktiv: 

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


CSS:

CSS

/* ======================================================================
   >= 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 ========================================= */


Docu: –
Forum: Navigation(-Buttons) im CMS erstellen?!

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

Update: –

Condition: –

— Knut Heermann (flip-flop) 2010/04/21 07:07