{{indexmenu_n>100}}
===== NAV_LIST_UL (CSS) =====

**{NAV_LIST_UL:...:level, class}**

An dieser Stelle zeige ich euch ein kleines CSS-Beispiel um die alte "nav_table_column" zu ersetzen durch die neue **NAV_LIST_UL**. 

(Die grundlegenden Infos zu diesem Tag: [[:deutsch:navigationen:nav_list_ul_parameter|NAV_LIST_UL (Parameter)]] und Forum: [[http://www.phpwcms.de/forum/viewtopic.php?t=12165|NAV_LIST_UL...]])

  * **Vertikale Navigation**
  * **Horizontale Einzeilennavigation**
  * **Kombination von horiz. & vert. Navigation**

----
\\
**Docu:** -- \\
**Forum:** [[http://forum.phpwcms.org/viewtopic.php?p=83839]] //(Seit V1.30)//

**Autor:** K.Heermann (flip-flop) http://planmatrix.de \\
**CMS-Version:** >= V1.3.0 \\
**CMS-Version:** >= V1.4.4 r387 //(03.12.2009)// \\
**Version:** 1.1 \\
**Update:** V1.0 //(26.03.07)// -> V1.1  ab CMS V1.4.4 r387 //(03.12.2009)// \\
''- {NAV_LIST_UL} Experimentielle Unterstützung für Menüeinträge basierend auf Artikeln hinzugefügt (FA, PA, FPA).'' \\
''- Mit dem Parameter 9 kann das Start-Level //(Ebene)// für das Artikelmenü festgelegt werden.''

**Tag:** (Bitte auch beachten [[:deutsch:navigationen:nav_list_ul_parameter|NAV_LIST_UL Parameter]]) 
<code>{NAV_LIST_UL: 
menu_type,  
start_id, 
max_level, 
class_path, 
class_active, 
ul_id_name, 
wrap_ul_div(0=off, 1=<div>, 2=<div id="">, 3=<div class="navLevel-x">), 
wrap_link_text(<em>|</em>),
articlemenu_start_level)
</code> 

**Dateiname:** -- 

**Verzeichnis:**  -- (System)

**Bedingung:**  -- \\


<note>Für phpwcms v1.27-1.29 bitte hier nachschauen: [[http://www.phpwcms.de/forum/viewtopic.php?p=74552#74552|V1.27-1.29 -> NAV_LIST_UL (Update4)]])</note>

----
----



Es ist nicht kleinste aber ich denke eine recht einfach nachvollziehbare Variante. 

Wenn notwendig, erstelle deine eigenen Grafiken für \\
{{:deutsch:navigationen:navi1_norm.gif|}} normal state: /image/article/navi1_norm.gif \\ 
{{:deutsch:navigationen:navi1_hov.gif|}} hover state: /image/article/navi1_hov.gif \\ 
{{:deutsch:navigationen:navi1_act.gif|}} active state: /image/article/navi1_act.gif \\ 
{{:deutsch:navigationen:navi1_act_hov.gif|}} active state: /image/article/navi1_act_hov.gif \\ 
{{:deutsch:navigationen:navi1_sub_true.gif|}} hover state: /image/article/navi1_sub_true.gif \\ 

{{:deutsch:navigationen:navi1_anorm.gif|}} article normal state: /image/article/navi1_anorm.gif \\
{{:deutsch:navigationen:navi1_ahov.gif|}} article hover state: /image/article/navi1_ahov.gif \\ 
{{:deutsch:navigationen:navi1_aact.gif|}} article active state: /image/article/navi1_aact.gif \\ 

(In meinem Beispiel verwende ich kleine Pfeilgrafiken 15x15px {{:deutsch:navigationen:navi1_gif_130.zip|}}). 

\\
In der **conf.inc.php** kann der Schalter "IE_htc_hover" dekativiert werden. Wir brauchen dieses Verhalten nicht für dieses Menü.
<code>$phpwcms['IE_htc_hover']      = 0; // enables HTC Hover for IE < 7 - has no effect in other browsers</code> \\ 

Ein **horizontales Menü** für eine Ebene: \\ 
##<div class="nlu_horiz1">{NAV_LIST_UL:**F**,**ID**,1,act_path,active}</div>## \\ 
\\ 
{{:deutsch:navigationen:nav_list_ul_f_130_horiz.gif|}}

Bitte beachte den CSS-Teil am Ende.

~~UP~~

===== Die vertikale Navigation =====

Die linke Seite: ##<div class="nlu_navi1">{NAV_LIST_UL:**F**,**ID**,,act_path,active}</div>## \\ 

\\ 
Die rechte Seite: ##<div class="nlu_navi1">{NAV_LIST_UL:,**ID**,,act_path,active}</div>## 

{{:deutsch:navigationen:nav_list_ul_f_130.gif|}}

Z.B. Quellcodeausgabe der linken Variante mit dem "F"-Schalter: 
<code HTML>
<div class="nlu_navi1">
<ul class="act_path">
	<li class="sub_no"><a href="index.php?home">Home</a></li>
	<li class="sub_no sub_ul_true"><a href="index.php?ebene01">Ebene01</a></li>
	<li class="sub_ul act_path"><a href="index.php?ebene02">Ebene02</a>
	<ul class="act_path">
		<li class="sub_ul act_path"><a href="index.php?ebene02_01">Ebene02_01</a>
		<ul class="act_path">
			<li class="sub_no act_path active"><a href="index.php?ebene02_01_01">Ebene02_01_01</a></li>
		</ul>
		</li>
		<li class="sub_no"><a href="index.php?ebene02_02">Ebene02_02</a></li>
	</ul>
	</li>
	<li class="sub_no sub_ul_true"><a href="index.php?ebene03">Ebene03</a></li>
	<li class="sub_no sub_ul_true"><a href="index.php?ebene04">Ebene04</a></li>
	<li class="sub_no"><a href="index.php?ebene05">Ebene05</a></li>
</ul>
</div>
</code>

\\

==== CSS Schnipsel für ein vertikales Menü: ====

Bitte erstelle eine Datei z.B. mit dem Namen ##**/template/inc_css/nlu_navi1.css**##  

  * -> [[http://phpwcms.planmatrix.de/forum/navi/nlu_navi1.css|CSS-download]]
  * -> [[http://phpwcms.planmatrix.de/forum/navi/nlu_css_130.zip|CSS-zip-download]]

<code CSS|h Datei: nlu_navi1.css|h>
/* ======================================================================
   >= V1.30   CSS for an vertical menu
   <div class="nlu_navi1">{ NAV_LIST_UL:F,0,,act_path,active }</div>
   Level 0 - 3; 
   26.03.07 flip-flop (KH)
   
========================================================================= */

   
.nlu_navi1 {
   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 em { font-style: normal; }

.nlu_navi1 ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
   width: 200px;  /* ++ Width of Menu Items // Breite der Navigation */
}

.nlu_navi1 ul li { position: relative; }


/* ==== Styles for Menu Items =================================== */

/* ==== LEVEL X ================================================= */

/* ====  simple link <a> // einfacher Link <a> ==== */
.nlu_navi1 ul li a,
.nlu_navi1 ul li a:link, 
.nlu_navi1 ul li a:visited,
.nlu_navi1 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) */ 
}

/* ====  Aktiv, wenn ein Sublevel vorhanden ist // active point if there is a sub_level ==== */
.nlu_navi1 ul li.sub_ul_true a,
.nlu_navi1 ul li.sub_ul_true a:link,
.nlu_navi1 ul li.sub_ul_true a:visited,
.nlu_navi1 ul li.sub_ul_true a:active {
   color: White;
   font-weight: normal;
   background: #839AAF url(../../img/article/navi1_sub_true.gif) 10px 1px no-repeat;
}

/* ====  Aktiver Pfad - Linkverfolgung im Baum // active path in tree (link tracing) ==== */
.nlu_navi1 ul li.act_path a,
.nlu_navi1 ul li.act_path a:link,
.nlu_navi1 ul li.act_path a:visited,
.nlu_navi1 ul li.act_path a:active {
   color: White;
   font-weight: bold;
   background: #63819F url(../../img/article/navi1_act.gif) 10px 1px no-repeat;
}

/* ====  Elternebene, wenn der Schalter gesetzt // Parent, if switch is set ==== */
.nlu_navi1 ul li.sub_parent a,
.nlu_navi1 ul li.sub_parent a:link,
.nlu_navi1 ul li.sub_parent a:visited,
.nlu_navi1 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 ul li.active a,
.nlu_navi1 ul li.active a:link,
.nlu_navi1 ul li.active a:visited,
.nlu_navi1 ul 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 ul li a:hover {
   color: White;
/*   text-decoration: underline; */
   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
.nlu_navi1 ul li.sub_no a:hover {
   color: White;
   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
.nlu_navi1 ul li.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 ul li.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 ul li.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 ul li.active a:hover {
   background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;
}


/* ==== LEVEL X+1 =============================================== */

.nlu_navi1 ul ul li.sub_no a,
.nlu_navi1 ul ul li.sub_no a:link, 
.nlu_navi1 ul ul li.sub_no a:visited,
.nlu_navi1 ul ul li.sub_no a:active, 
.nlu_navi1 ul ul li.sub_ul a,
.nlu_navi1 ul ul li.sub_ul a:link, 
.nlu_navi1 ul ul li.sub_ul a:visited,
.nlu_navi1 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) */ 
}

/* state for the active point if there is a sub_level */
.nlu_navi1 ul ul li.sub_ul_true a,
.nlu_navi1 ul ul li.sub_ul_true a:link,
.nlu_navi1 ul ul li.sub_ul_true a:visited,
.nlu_navi1 ul ul li.sub_ul_true a:active {
   color: White;
   font-weight: normal;
   background: #839AAF url(../../img/article/navi1_sub_true.gif) 25px 1px no-repeat;
}

/* state for the active path (link tracing) */
.nlu_navi1 ul ul li.act_path a,
.nlu_navi1 ul ul li.act_path a:link,
.nlu_navi1 ul ul li.act_path a:visited,
.nlu_navi1 ul ul li.act_path a:active {
   color: White;
   font-weight: bold;
   background: #6D8EAF url(../../img/article/navi1_act.gif) 25px 1px no-repeat;
}


/* state for the active link */
.nlu_navi1 ul ul li.active a,
.nlu_navi1 ul ul li.active a:link,
.nlu_navi1 ul ul li.active a:visited,
.nlu_navi1 ul ul li.active a:active {
   color: White;
   font-weight: bold;
   background: #6D8EAF url(../../img/article/navi1_act.gif) 25px 1px no-repeat;
}


.nlu_navi1 ul ul li a:hover {
   color: White;
/*   text-decoration: underline; */
   background: #6B828F url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
}
.nlu_navi1 ul ul li.sub_no a:hover {
   color: White;
   background: #6B828F url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
}
.nlu_navi1 ul ul li.sub_ul a:hover {
   background: #6B828F url(../../img/article/navi1_act_hov.gif) 25px 1px no-repeat;
}
/* Only for "if there is a sub_level" */
.nlu_navi1 ul ul li.sub_ul_true a:hover {
   background: #6B828F url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
}

/* Only for the active link */
.nlu_navi1 ul ul li.active a:hover {
   background: #6B828F url(../../img/article/navi1_act_hov.gif) 25px 1px no-repeat;
}

   
/* ==== LEVEL X+2 =============================================== */

.nlu_navi1 ul ul ul li.sub_no a,
.nlu_navi1 ul ul ul li.sub_no a:link, 
.nlu_navi1 ul ul ul li.sub_no a:visited,
.nlu_navi1 ul ul ul li.sub_no a:active,
.nlu_navi1 ul ul ul li.sub_ul a,
.nlu_navi1 ul ul ul li.sub_ul a:link, 
.nlu_navi1 ul ul ul li.sub_ul a:visited,
.nlu_navi1 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) */ 
}

/* state for the active point if there is a sub_level */
.nlu_navi1 ul ul ul li.sub_ul_true a,
.nlu_navi1 ul ul ul li.sub_ul_true a:link,
.nlu_navi1 ul ul ul li.sub_ul_true a:visited,
.nlu_navi1 ul ul ul li.sub_ul_true a:active {
   color: White;
   font-weight: normal;
   background: #83A1BF url(../../img/article/navi1_sub_true.gif) 40px 1px no-repeat;
}

/* state for the active path (link tracing) */
.nlu_navi1 ul ul ul li.act_path a,
.nlu_navi1 ul ul ul li.act_path a:link,
.nlu_navi1 ul ul ul li.act_path a:visited,
.nlu_navi1 ul ul ul li.act_path a:active {
   color: White;
   font-weight: bold;
   background: #83A1BF url(../../img/article/navi1_act.gif) 40px 1px no-repeat;
}


/* state for the active link */
.nlu_navi1 ul ul ul li.active a,
.nlu_navi1 ul ul ul li.active a:link,
.nlu_navi1 ul ul ul li.active a:visited,
.nlu_navi1 ul ul ul li.active a:active {
   color: White;
   font-weight: bold;
   background: #83A1BF url(../../img/article/navi1_act.gif) 40px 1px no-repeat;
}


.nlu_navi1 ul ul ul li a:hover {
   color: White;
/*   text-decoration: underline; */
   background: #6D879F url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;

}
.nlu_navi1 ul ul ul li.sub_no a:hover {
   color: White;
   background: #6D879F url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;
}
.nlu_navi1 ul ul ul li.sub_ul a:hover {
   background: #6D879F url(../../img/article/navi1_act_hov.gif) 40px 1px no-repeat;
}
/* Only for "if there is a sub_level" */
.nlu_navi1 ul ul ul li.sub_ul_true a:hover {
   background: #6D879F url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;
}

/* Only for the active link */
.nlu_navi1 ul ul ul li.active a:hover {
   background: #6D879F url(../../img/article/navi1_act_hov.gif) 40px 1px no-repeat;
}
/*==== END LEVEL X ============================================= */

/* Holly Hack. IE Requirement \*/
* html .nlu_navi1 ul li { float: left; height: 1%; }
* html .nlu_navi1 ul li a { height: 1%; }

/* ==== End  nlu_navi1 ========================================= */
</code>Und so weiter. 

Bitte übernehme in der Vorlage in **CSS Datei:** die Datei **nlu_navi1.css** \\ 
(Mehrfachauswahl mit = //<strg>-"linke Maustaste"//  möglich.) \\ 
 
{{:deutsch:navigationen:template_css_file.gif|}}

\\

~~UP~~


===== Artikelnavigation =====

**Update:** V1.0 //(26.03.07)// -> V1.1  ab CMS V1.4.4 r387 //(03.12.2009)// \\
''- {NAV_LIST_UL} Experimentielle Unterstützung für Menüeinträge basierend auf Artikeln hinzugefügt (FA, PA, FPA).'' \\
''- Mit dem Parameter 9 kann das Start-Level //(Ebene)// für das Artikelmenü festgelegt werden.''

{{ :deutsch:navigationen:nav_list_ul_article_fe.gif|}}
{{:deutsch:navigationen:nav_list_ul_article_fe01_1.gif|}}
~~CLEARFLOAT~~
\\

Mit dem neuen "**A**" Parameter z.B. \\
  <div class=“nlu_navi1”>{NAV_LIST_UL:FA,ID,,act_path,active}</div> 
  <div class=“nlu_navi1”>{NAV_LIST_UL:PA,ID,,act_path,active}</div> 
  <div class=“nlu_navi1”>{NAV_LIST_UL:FPA,ID,,act_path,active,,,,2}</div>  
//(Bsp. 3: Die Ausgabe von Artikellinks beginnt ab Level (Ebene) 2)// 

\\

CSS-Zusatz Artikelnavigation ab V1.4.4 r387, bitte in die obige CSS-Datei vor 
<code css>/*==== END LEVEL X ============================================= */</code>
//(am Ende)// einfügen.

<code css|h CSS-Artikelnavigation |h>
/* ======================================================================
   >= V1.4.4 r387   CSS for a article navigation menu
   <div class="nlu_navi1">{ NAV_LIST_UL:FA,0,,act_path,active }</div>
   Level 0 - 3;
   28.12.09 flip-flop (KH)
 
========================================================================= */
.nlu_navi1 ul li.asub_no a,
.nlu_navi1 ul li.asub_no a:link,
.nlu_navi1 ul li.asub_no a:visited,
.nlu_navi1 ul li.asub_no a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   font-weight: normal;
   color: #FFFFFF;
   background: #83A1BF url(../../img/article/navi1_anorm.gif) 10px 1px no-repeat;
   padding: 1px 0 0 25px;
   border-bottom: 1px solid #ccc; /* IE6 Bug */
   \width: 200px;  /* IE5x Opera <= 5 */
   widt\h: 175px;  /* = (Width of Menu Items) - (padding-right + left) */
}
.nlu_navi1 ul ul li.asub_no a,
.nlu_navi1 ul ul li.asub_no a:link,
.nlu_navi1 ul ul li.asub_no a:visited,
.nlu_navi1 ul ul li.asub_no a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   font-weight: normal;
   color: #FFFFFF;
   background: #83A1BF url(../../img/article/navi1_anorm.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) */
}
 
.nlu_navi1 ul ul ul li.asub_no a,
.nlu_navi1 ul ul ul li.asub_no a:link,
.nlu_navi1 ul ul ul li.asub_no a:visited {
   display: block;
   text-decoration: none;
   text-transform: none;
   font-weight: normal;
   color: #FFFFFF;
   background: #83A1BF url(../../img/article/navi1_anorm.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) */
}
 
/* state for the active link */
.nlu_navi1 ul li.asub_no.active a,
.nlu_navi1 ul li.asub_no.active a:link,
.nlu_navi1 ul li.asub_no.active a:visited,
.nlu_navi1 ul li.asub_no.active a:active {
   color: White;
   font-weight: bold;
   background: #83A1BF url(../../img/article/navi1_aact.gif) 10px 1px no-repeat;
}
/* state for the active link */
.nlu_navi1 ul ul li.asub_no.active a,
.nlu_navi1 ul ul li.asub_no.active a:link,
.nlu_navi1 ul ul li.asub_no.active a:visited,
.nlu_navi1 ul ul li.asub_no.active a:active {
   color: White;
   font-weight: bold;
   background: #83A1BF url(../../img/article/navi1_aact.gif) 25px 1px no-repeat;
}
/* state for the active link */
.nlu_navi1 ul ul ul li.asub_no.active a,
.nlu_navi1 ul ul ul li.asub_no.active a:link,
.nlu_navi1 ul ul ul li.asub_no.active a:visited,
.nlu_navi1 ul ul ul li.asub_no.active a:active {
   color: White;
   font-weight: bold;
   background: #83A1BF url(../../img/article/navi1_aact.gif) 40px 1px no-repeat;
}
 
.nlu_navi1 ul li.asub_no a:hover {
   color: White;
   background: #6D879F url(../../img/article/navi1_ahov.gif) 10px 1px no-repeat;
}
.nlu_navi1 ul ul  li.asub_no a:hover {
   color: White;
   background: #6D879F url(../../img/article/navi1_ahov.gif) 25px 1px no-repeat;
}
.nlu_navi1 ul ul ul li.asub_no a:hover {
   color: White;
   background: #6D879F url(../../img/article/navi1_ahov.gif) 40px 1px no-repeat;
}
/* ===END=== Article navigation  */
</code>


~~UP~~



===== Horizontals Menü: =====


Horizontales Menü für eine Ebene: ##<div class="nlu_horiz1">{NAV_LIST_UL:F,ID,1,act_path,active}</div>##

{{:deutsch:navigationen:nav_list_ul_f_130_horiz.gif|}}

==== CSS-Schnippsel für das horizontale Menü: ====
 
Bitte erstelle eine Datei z.B. mit dem Namen **/template/inc_css/nlu_horiz1.css**
  * -> [[http://phpwcms.planmatrix.de/forum/navi/nlu_horiz1.css|CSS-download]]
  * -> [[http://phpwcms.planmatrix.de/forum/navi/nlu_css_130.zip|CSS-zip-download]]
In der Vorlage wird diese Datei nun übernommen mit **CSS Datei:** auswählen **nlu_horiz1.css** (Mehrfachauswahl mit = <strg>-"linke Maustaste" möglich).

{{:deutsch:navigationen:template_css_file.gif|}}


<code CSS|h Datei: nlu_horiz1.css|h>
/* =================================================================
   >= V1.30    CSS for an horizontal menu one level 
   <div class="nlu_horiz1">{ NAV_LIST_UL:F,0,1,act_path,active }</div>
   Level 0 ; 
   26.03.07 flip-flop (KH)

===================================================================== */ 
   
.nlu_horiz1 {
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
   text-decoration: none;
   font: normal normal 11px/20px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.nlu_horiz1 em { font-style: normal; }

.nlu_horiz1 ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style: none;
} 

.nlu_horiz1 ul li { 
   display: block;
   float:left;
}


/* ==== Styles for Menu Items ================================== */

/* ==== LEVEL X ================================================ */

.nlu_horiz1 ul li a,
.nlu_horiz1 ul li a:link,
.nlu_horiz1 ul li a:visited,
.nlu_horiz1 ul li a:active {
   display: block;

 /* if you need a static width ELSE comment it out */
   width: 108px; /* ;width entry = with + boarder left/right  ==== IE only ====*/
   w\idth: 92px; /* width entry = with - padding left/right */

   text-decoration: none;
   text-transform: none;
   color: #fff;
   
 /* if you need a static width */
   padding: 0px 0 0 15px;         /* Text adjust */
 /* ELSE if you need a adjusted width */
   /* padding: 0px 10px 0 15px; */        /* Text adjust */ 
   
   border-right: 1px solid #eee;
   background: #81909F url(../../img/article/navi1_norm.gif) 5px 1px no-repeat;
}

/* state for the active point if there is a sub_level */
.nlu_horiz1 ul li.sub_ul_true a,
.nlu_horiz1 ul li.sub_ul_true a:link,
.nlu_horiz1 ul li.sub_ul_true a:visited,
.nlu_horiz1 ul li.sub_ul_true a:active {
   color: White;
   font-weight: bold;
   background: #839AAF url(../../img/article/navi1_sub_true.gif) 5px 1px no-repeat;
}

/* state for the active path (link tracing) */
.nlu_horiz1 ul li.act_path a,
.nlu_horiz1 ul li.act_path a:link,
.nlu_horiz1 ul li.act_path a:visited,
.nlu_horiz1 ul li.act_path a:active {
   color: White;
   font-weight: bold;
   background: #63819F url(../../img/article/navi1_act.gif) 5px 1px no-repeat;
}

/* state for the parent link (only Home) */
.nlu_horiz1 ul li.sub_parent a, 
.nlu_horiz1 ul li.sub_parent a:link, 
.nlu_horiz1 ul li.sub_parent a:visited, 
.nlu_horiz1 ul li.sub_parent a:active {
   background: #81909F url(../../img/article/navi1_norm.gif) 5px 1px no-repeat;
   color:White;
   font-weight:bold;
}

/* state for the active link */
.nlu_horiz1 ul li.active a, 
.nlu_horiz1 ul li.active a:link, 
.nlu_horiz1 ul li.active a:visited, 
.nlu_horiz1 ul li.active a:active { 
   color: White;
   font-weight: bold;

   background: #63819F url(../../img/article/navi1_act.gif) 5px 1px no-repeat; 
}


.nlu_horiz1 ul li a:hover, .nlu_horiz1 ul li.sub_no a:hover {
   color: White;
   background: #597B8F url(../../img/article/navi1_hov.gif) 5px 1px no-repeat;
}
.nlu_horiz1 ul li.act_path a:hover {
   color: White;
   background: #37667F url(../../img/article/navi1_act_hov.gif) 5px 1px no-repeat;
}
.nlu_horiz1 ul li.active a:hover {
   color: White;
   background: #37667F url(../../img/article/navi1_act_hov.gif) 5px 1px no-repeat;
}

/* ===== END horiz Level X_===================================== */ 
</code>

Ein  **alternatives horiz. CSS-Layout** findest du hier [[:deutsch:navigationen:nav_list_ul-beispiele:horizontal-sliding-door|Horizontaler Schiebetüreffekt]]. 
  * “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).

\\

Werden für die einfache einzeilige Darstellung lediglich Trenner zwischen den Links gebraucht kann das mit dieser CSS-Anweisungen erreicht werden:

<code css>
li { border-left: solid 1px #000000; }
li:first-child { border-left: none; }
</code>

 

~~UP~~


===== Kombination von horiz. & vert. Navigation =====

{{:deutsch:navigationen:nav_list_ul_f_130_horiz_vert.gif|}} \\
Du siehst die Ausgabe für eine vertikale Sub-Ebene des aktiven Pfads //(active path).// [Ebene02] 

~~UP~~

===== Level Lift =====

**Level lift** für die vertikale Navigation, beginnend in der ersten Ebene nach [Ebene02]:
<code PHP| level lift>[PHP]
if(isset($GLOBALS['LEVEL_ID'][1])) {
$level_id = $GLOBALS['LEVEL_ID'][1];
echo '<div class="nlu_navi1">'.LF;
echo '{NAV_LIST_UL:F,'.$level_id.',,act_path,active}';
echo '</div>';
}
[/PHP]</code>
Wobei LEVEL_ID'][**X**] das Level darstellt.


Wenn die Navigationsroutine nach ##/frontend_render/## ausgelagert werden soll (keine Container-Reste wenn kein Menü vorhanden ist), schaue bitte hier nach [[:deutsch:ersetzer_rts:frontend_render:wrap_nav_list_ul]]. \\ 
Forum: [[http://forum.phpwcms.org/viewtopic.php?p=111157#p111157|WRAP_NAV_LIST_UL]]


Die Grundlagen: Forum: [[http://forum.phpwcms.org/viewtopic.php?p=90950#90950|Untermenü nur bedingt anzeigen]] (German).

Für tiefere Infomationen bezgl. [[deutsch/navigationen/kleine-helfer/level-lift]] schaue auch hier hinein.

  * [[deutsch/phpwcms-system/admin/seitenstruktur/multilingual]] Schalter [en]: [[http://www.phpwcms.de/forum/viewtopic.php?p=83791#83791]]
  * Grundlagen Ebenen und IDs [de]: [[http://www.phpwcms.de/forum/viewtopic.php?p=71772#71772]]