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.

My navi call using the <span> tag:

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

CSS

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

Same you can see at planmatrix (only two buttons).

english/navigation/nav_list_ul-example/horizontal-sliding-door.txt · Last modified: 2018/06/03 18:09 (external edit)

Show pagesource Old revisions