Horizontaler Schiebetüreffekt

(sliding door) mit dynamischen Hintergrund-Bildern.

Die Bedeutung von “dynamisches Hintergundbild” besser “dynamischer Breiteneintrag” (dynamically width entry) ist die Breite jedes Navigationseintrags. Jeder Eintrag übernimmt automatisch die Breite des Linktextes + padding left/right. Das Hintergrundbild nutzt dazu eine Schiebetürtechnik (sliding door technology).

Navi mit <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).

— Knut Heermann (flip-flop) 2009/01/26 22:38

deutsch/navigationen/nav_list_ul-beispiele/horizontal-sliding-door.txt · Last modified: 2018/06/03 18:09 (external edit)

Show pagesource Old revisions