{{indexmenu_n>10}}

FIXME translate

====== Horizontal  sliding door ======

**using dynamic background images.** 

The meaning of "dynamic bg image" better "dynamically width entry" is the width of each navigation entry.
Every entry becomes automatically the width of the text string + padding left/right. The bg images uses a sliding door technology.

{{:deutsch:navigationen:nav_list_ul-beispiele:navi_dynamic_bg_image.jpg|}}

**My navi call using the <span> tag:**
<code html>
<div class="top3">
  <div style="padding-left: 213px;">
     <div class="nlu_horiz01">{NAV_LIST_UL:FP,0,1,act_path,active,,,<span>|</span>}</div>
  </div>
  <div class="nlu_horiz01_behind"><!-- spacer IE //--></div>
</div>
</code>

<code css|h CSS |h>
.top3 { /* third line for horizontal navi over all */
   height: 27px;  /* IE5.x */
   padding: 0;
   margin: 0;
   width: 740px;
   background: #FFE1A2 url(../../picture/navi/navi_bg.jpg) 139px 0px; background-repeat:repeat-x;
   voice-family: "\"}\"";  /* All other */
   voice-family:inherit;
   height: 25px;
}

/* ====== snip ========*/
/* === Horizontal menu  ================== */

.nlu_horiz01 ul {
   margin: 0 ;
   padding: 0;
   list-style: none;
   font-weight: bold;
   text-decoration: none;
   font-size: 13px;
   font-family: "Trebuchet MS", Verdana, Arial, Tahoma, Helvetica, sans-serif;
   float: left;
}

.nlu_horiz01 li { display: inline; float: left; }

a.nlu_horiz01, a.nlu_horiz01:link, a.nlu_horiz01:visited, a.nlu_horiz01:active, a.nlu_horiz01:focus {
   color: #0000FF;
   text-decoration: underline;
}

.nlu_horiz01 a {
   float: left;
   background: url(../../picture/navi/navi_li.jpg) no-repeat left top ;
   margin:0;
   padding:0 0 0 5px;
   text-decoration:none;
   cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */
}

.nlu_horiz01 a span {
   background: transparent url(../../picture/navi/navi_re.jpg) no-repeat right top;
   padding:4px 13px 2px 8px; 
   color:#555555;
   display: block;
   float: left;
}

.nlu_horiz01_behind {  /* The last entry only one pix width */
   float: left;
   background: url(../../picture/navi/navi_li.jpg) no-repeat left top ;
   margin:0;
   padding:0;
   height:25px; width:1px;
}

/* BG images shifted up: .active = -50px   a:hover = -25px */
.nlu_horiz01  ul li.active a { color: #234896;    text-decoration:underline;   background-position:0% -50px; }
.nlu_horiz01  ul li.active a span {color: #234896;    background-position:100% -50px; }

.nlu_horiz01  ul li.act_path a { color: #234896;    text-decoration:underline;   background-position:0% -50px; }
.nlu_horiz01  ul li.act_path a span {color: #234896;    background-position:100% -50px; }

.nlu_horiz01  ul li.sub_parent.act_path a { color: #555555;    text-decoration:none;   background-position:0% 0px; }
.nlu_horiz01  ul li.sub_parent.act_path a span {color: #555555;    background-position:100% 0px; }

.nlu_horiz01  ul li.sub_parent.act_path.active a { color: #234896;    text-decoration:underline;   background-position:0% -50px; }
.nlu_horiz01  ul li.sub_parent.act_path.active a span {color: #234896;    background-position:100% -50px; }

.nlu_horiz01 ul li a:hover {   text-decoration: none; color:#1E3F82; background-position:0% -25px; }
.nlu_horiz01 ul li a:hover span {   text-decoration: none; color:#1E3F82;   background-position:100% -25px; }

.nlu_horiz01 ul li.sub_parent.act_path a:hover {   text-decoration: none; color:#1E3F82; background-position:0% -25px; }
.nlu_horiz01 ul li.sub_parent.act_path a:hover span {   text-decoration: none; color:#1E3F82;   background-position:100% -25px; }
/* ====== snip ========*/
</code>

Same you can see at [[http://planmatrix.de|planmatrix]] (only two buttons).