[[NAV_LIST_UL (CSS)]]
You are here: Willkommen im phpwcms-HowTo:wiki » Benutzerhandbuch (DE) » Navigationen » NAV_LIST_UL (CSS)
Show pagesourceOld revisions
Recent changesIndex

NAVIGATION

Imprint / Impressum

Please Donate!

With your donation you accelerate more enhancements of the wiki.

Table of Contents

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: NAV_LIST_UL (Parameter) und Forum: 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 NAV_LIST_UL Parameter) 

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

Dateiname: –

Verzeichnis: – (System)

Bedingung: –

<note>Für phpwcms v1.27-1.29 bitte hier nachschauen: 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
normal state: /image/article/navi1_norm.gif
hover state: /image/article/navi1_hov.gif
active state: /image/article/navi1_act.gif
active state: /image/article/navi1_act_hov.gif
hover state: /image/article/navi1_sub_true.gif

article normal state: /image/article/navi1_anorm.gif
article hover state: /image/article/navi1_ahov.gif
article active state: /image/article/navi1_aact.gif

(In meinem Beispiel verwende ich kleine Pfeilgrafiken 15x15px navi1_gif_130.zip (1.67 KiB, 132 downloads)).


In der conf.inc.php kann der Schalter “IE_htc_hover” dekativiert werden. Wir brauchen dieses Verhalten nicht für dieses Menü. 

$phpwcms['IE_htc_hover']      = 0; // enables HTC Hover for IE < 7 - has no effect in other browsers


Ein horizontales Menü für eine Ebene:
<div class=“nlu_horiz1”>{NAV_LIST_UL:F,ID,1,act_path,active}</div>

Bitte beachte den CSS-Teil am Ende.

Back to top

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>

Z.B. Quellcodeausgabe der linken Variante mit dem “F”-Schalter: 

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


CSS Schnipsel für ein vertikales Menü:

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

Datei: nlu_navi1.css

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

Und so weiter.

Bitte übernehme in der Vorlage in CSS Datei: die Datei nlu_navi1.css
(Mehrfachauswahl mit = <strg>-“linke Maustaste” möglich.)


Back to top

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.


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 

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

(am Ende) einfügen.

CSS-Artikelnavigation

/* ======================================================================
   >= 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  */
Back to top

Horizontals Menü:

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

CSS-Schnippsel für das horizontale Menü:

Bitte erstelle eine Datei z.B. mit dem Namen /template/inc_css/nlu_horiz1.css

In der Vorlage wird diese Datei nun übernommen mit CSS Datei: auswählen nlu_horiz1.css (Mehrfachauswahl mit = <strg>-“linke Maustaste” möglich).

Datei: nlu_horiz1.css

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

Ein alternatives horiz. CSS-Layout findest du hier 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: 

li { border-left: solid 1px #000000; }
li:first-child { border-left: none; }
Back to top

Kombination von horiz. & vert. Navigation


Du siehst die Ausgabe für eine vertikale Sub-Ebene des aktiven Pfads (active path). [Ebene02]

Back to top

Level Lift

Level lift für die vertikale Navigation, beginnend in der ersten Ebene nach [Ebene02]:

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]

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 WRAP_NAV_LIST_UL.
Forum: WRAP_NAV_LIST_UL

Die Grundlagen: Forum: Untermenü nur bedingt anzeigen (German).

Für tiefere Infomationen bezgl. Level-Lift schaue auch hier hinein.

deutsch/navigationen/nav_list_ul.txt · Last modified: 2018/06/03 18:09 (external edit)
Show pagesourceOld revisions
Back to top
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