This is an old revision of the document!


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 navigationen NAV_HORIZ_DD:ID,Level depth or NAV_LIST_UL (CSS).

HTML:

Navi Tag:

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


CSS:

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

nav[Category-ID].png

State normal:      nav[cat-ID].png
State active:  nav_act[cat-ID].png
State 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; */
}



Vertical

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

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

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

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

Generated source:

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

Example: Background image in img/article/*

Normal state:  navi1_norm.gif
Active state:   navi1_act.gif
Sub level available:   navi1_sub_true.gif
Hover state:   navi1_hov.gif

CSS from file NAV_LIST_UL (CSS).

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

Compendium for the first range 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 ========================================= */



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


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

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

english/navigation/nav_list_ul-example/background-id-based.1287429484.txt.gz · Last modified: 2018/06/03 18:08 (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