NAVIGATION
This shows you the differences between two versions of the page.
|
deutsch:navigationen:nav_list_ul [2009/12/28 15:04] Knut Heermann (flip-flop) |
deutsch:navigationen:nav_list_ul [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 2: | Line 2: | ||
| ===== NAV_LIST_UL (CSS) ===== | ===== NAV_LIST_UL (CSS) ===== | ||
| - | **{WRAP_NAV_LIST_UL:...:level, class}** | + | **{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**. | An dieser Stelle zeige ich euch ein kleines CSS-Beispiel um die alte "nav_table_column" zu ersetzen durch die neue **NAV_LIST_UL**. | ||
| Line 19: | Line 19: | ||
| **Autor:** K.Heermann (flip-flop) http://planmatrix.de \\ | **Autor:** K.Heermann (flip-flop) http://planmatrix.de \\ | ||
| **CMS-Version:** >= V1.3.0 \\ | **CMS-Version:** >= V1.3.0 \\ | ||
| - | **CMS-Version:** >= V1.4.4 r387 \\ | + | **CMS-Version:** >= V1.4.4 r387 //(03.12.2009)// \\ |
| **Version:** 1.1 \\ | **Version:** 1.1 \\ | ||
| **Update:** V1.0 //(26.03.07)// -> V1.1 ab CMS V1.4.4 r387 //(03.12.2009)// \\ | **Update:** V1.0 //(26.03.07)// -> V1.1 ab CMS V1.4.4 r387 //(03.12.2009)// \\ | ||
| Line 34: | Line 34: | ||
| ul_id_name, | ul_id_name, | ||
| wrap_ul_div(0=off, 1=<div>, 2=<div id="">, 3=<div class="navLevel-x">), | wrap_ul_div(0=off, 1=<div>, 2=<div id="">, 3=<div class="navLevel-x">), | ||
| - | wrap_link_text(<em>|</em>) | + | wrap_link_text(<em>|</em>), |
| articlemenu_start_level) | articlemenu_start_level) | ||
| </code> | </code> | ||
| Line 81: | Line 81: | ||
| ===== Die vertikale Navigation ===== | ===== Die vertikale Navigation ===== | ||
| - | ------------------------------------------------- | + | |
| Die linke Seite: ##<div class="nlu_navi1">{NAV_LIST_UL:**F**,**ID**,,act_path,active}</div>## \\ | Die linke Seite: ##<div class="nlu_navi1">{NAV_LIST_UL:**F**,**ID**,,act_path,active}</div>## \\ | ||
| Line 111: | Line 111: | ||
| </div> | </div> | ||
| </code> | </code> | ||
| + | |||
| + | \\ | ||
| ==== CSS Schnipsel für ein vertikales Menü: ==== | ==== CSS Schnipsel für ein vertikales Menü: ==== | ||
| Line 430: | Line 432: | ||
| ===== Artikelnavigation ===== | ===== 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. \\ | Mit dem neuen "**A**" Parameter z.B. \\ | ||
| Line 447: | Line 457: | ||
| >= V1.4.4 r387 CSS for a article navigation menu | >= V1.4.4 r387 CSS for a article navigation menu | ||
| <div class="nlu_navi1">{ NAV_LIST_UL:FA,0,,act_path,active }</div> | <div class="nlu_navi1">{ NAV_LIST_UL:FA,0,,act_path,active }</div> | ||
| - | Level 0 - 3; | + | Level 0 - 3; |
| 28.12.09 flip-flop (KH) | 28.12.09 flip-flop (KH) | ||
| - | + | ||
| ========================================================================= */ | ========================================================================= */ | ||
| - | .nav-list-ul ul li.asub_no a, | + | .nlu_navi1 ul li.asub_no a, |
| - | .nav-list-ul ul li.asub_no a:link, | + | .nlu_navi1 ul li.asub_no a:link, |
| - | .nav-list-ul ul li.asub_no a:visited, | + | .nlu_navi1 ul li.asub_no a:visited, |
| - | .nav-list-ul ul li.asub_no a:active { | + | .nlu_navi1 ul li.asub_no a:active { |
| display: block; | display: block; | ||
| text-decoration: none; | text-decoration: none; | ||
| Line 466: | Line 476: | ||
| widt\h: 175px; /* = (Width of Menu Items) - (padding-right + left) */ | widt\h: 175px; /* = (Width of Menu Items) - (padding-right + left) */ | ||
| } | } | ||
| - | .nav-list-ul ul ul li.asub_no a, | + | .nlu_navi1 ul ul li.asub_no a, |
| - | .nav-list-ul ul ul li.asub_no a:link, | + | .nlu_navi1 ul ul li.asub_no a:link, |
| - | .nav-list-ul ul ul li.asub_no a:visited, | + | .nlu_navi1 ul ul li.asub_no a:visited, |
| - | .nav-list-ul ul ul li.asub_no a:active { | + | .nlu_navi1 ul ul li.asub_no a:active { |
| display: block; | display: block; | ||
| text-decoration: none; | text-decoration: none; | ||
| Line 481: | Line 491: | ||
| widt\h: 160px; /* = (Width of Menu Items) - (padding-right + left) */ | widt\h: 160px; /* = (Width of Menu Items) - (padding-right + left) */ | ||
| } | } | ||
| - | + | ||
| - | .nav-list-ul ul ul ul li.asub_no a, | + | .nlu_navi1 ul ul ul li.asub_no a, |
| - | .nav-list-ul ul ul ul li.asub_no a:link, | + | .nlu_navi1 ul ul ul li.asub_no a:link, |
| - | .nav-list-ul ul ul ul li.asub_no a:visited { | + | .nlu_navi1 ul ul ul li.asub_no a:visited { |
| display: block; | display: block; | ||
| text-decoration: none; | text-decoration: none; | ||
| Line 496: | Line 506: | ||
| widt\h: 145px; /* = (Width of Menu Items) - (padding-right + left) */ | widt\h: 145px; /* = (Width of Menu Items) - (padding-right + left) */ | ||
| } | } | ||
| + | |||
| /* state for the active link */ | /* state for the active link */ | ||
| - | .nav-list-ul ul li.asub_no.active a, | + | .nlu_navi1 ul li.asub_no.active a, |
| - | .nav-list-ul ul li.asub_no.active a:link, | + | .nlu_navi1 ul li.asub_no.active a:link, |
| - | .nav-list-ul ul li.asub_no.active a:visited, | + | .nlu_navi1 ul li.asub_no.active a:visited, |
| - | .nav-list-ul ul li.asub_no.active a:active { | + | .nlu_navi1 ul li.asub_no.active a:active { |
| color: White; | color: White; | ||
| font-weight: bold; | font-weight: bold; | ||
| Line 507: | Line 517: | ||
| } | } | ||
| /* state for the active link */ | /* state for the active link */ | ||
| - | .nav-list-ul ul ul li.asub_no.active a, | + | .nlu_navi1 ul ul li.asub_no.active a, |
| - | .nav-list-ul ul ul li.asub_no.active a:link, | + | .nlu_navi1 ul ul li.asub_no.active a:link, |
| - | .nav-list-ul ul ul li.asub_no.active a:visited, | + | .nlu_navi1 ul ul li.asub_no.active a:visited, |
| - | .nav-list-ul ul ul li.asub_no.active a:active { | + | .nlu_navi1 ul ul li.asub_no.active a:active { |
| color: White; | color: White; | ||
| font-weight: bold; | font-weight: bold; | ||
| Line 516: | Line 526: | ||
| } | } | ||
| /* state for the active link */ | /* state for the active link */ | ||
| - | .nav-list-ul ul ul ul li.asub_no.active a, | + | .nlu_navi1 ul ul ul li.asub_no.active a, |
| - | .nav-list-ul ul ul ul li.asub_no.active a:link, | + | .nlu_navi1 ul ul ul li.asub_no.active a:link, |
| - | .nav-list-ul ul ul ul li.asub_no.active a:visited, | + | .nlu_navi1 ul ul ul li.asub_no.active a:visited, |
| - | .nav-list-ul ul ul ul li.asub_no.active a:active { | + | .nlu_navi1 ul ul ul li.asub_no.active a:active { |
| color: White; | color: White; | ||
| font-weight: bold; | font-weight: bold; | ||
| background: #83A1BF url(../../img/article/navi1_aact.gif) 40px 1px no-repeat; | background: #83A1BF url(../../img/article/navi1_aact.gif) 40px 1px no-repeat; | ||
| } | } | ||
| - | + | ||
| - | .nav-list-ul ul li.asub_no a:hover { | + | .nlu_navi1 ul li.asub_no a:hover { |
| color: White; | color: White; | ||
| background: #6D879F url(../../img/article/navi1_ahov.gif) 10px 1px no-repeat; | background: #6D879F url(../../img/article/navi1_ahov.gif) 10px 1px no-repeat; | ||
| } | } | ||
| - | .nav-list-ul ul ul li.asub_no a:hover { | + | .nlu_navi1 ul ul li.asub_no a:hover { |
| color: White; | color: White; | ||
| background: #6D879F url(../../img/article/navi1_ahov.gif) 25px 1px no-repeat; | background: #6D879F url(../../img/article/navi1_ahov.gif) 25px 1px no-repeat; | ||
| } | } | ||
| - | .nav-list-ul ul ul ul li.asub_no a:hover { | + | .nlu_navi1 ul ul ul li.asub_no a:hover { |
| color: White; | color: White; | ||
| background: #6D879F url(../../img/article/navi1_ahov.gif) 40px 1px no-repeat; | background: #6D879F url(../../img/article/navi1_ahov.gif) 40px 1px no-repeat; | ||
| Line 543: | Line 553: | ||
| ~~UP~~ | ~~UP~~ | ||
| - | \\ | + | |
| ===== Horizontals Menü: ===== | ===== Horizontals Menü: ===== | ||
| - | -------------------------- | + | |
| Horizontales Menü für eine Ebene: ##<div class="nlu_horiz1">{NAV_LIST_UL:F,ID,1,act_path,active}</div>## | Horizontales Menü für eine Ebene: ##<div class="nlu_horiz1">{NAV_LIST_UL:F,ID,1,act_path,active}</div>## | ||
| Line 558: | Line 568: | ||
| * -> [[http://phpwcms.planmatrix.de/forum/navi/nlu_css_130.zip|CSS-zip-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). | In der Vorlage wird diese Datei nun übernommen mit **CSS Datei:** auswählen **nlu_horiz1.css** (Mehrfachauswahl mit = <strg>-"linke Maustaste" möglich). | ||
| - | [img]http://phpwcms.planmatrix.de/forum/template/template_css_file.gif[/img] | + | |
| + | {{:deutsch:navigationen:template_css_file.gif|}} | ||
| + | |||
| <code CSS|h Datei: nlu_horiz1.css|h> | <code CSS|h Datei: nlu_horiz1.css|h> | ||
| /* ================================================================= | /* ================================================================= | ||
| Line 681: | Line 694: | ||
| * Jeder Eintrag übernimmt automatisch die Breite des Linktextes + padding left/right. Das Hintergrundbild nutzt dazu eine Schiebetürtechnik (sliding door technology). | * 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 ===== | ||
| - | === Kombination von horiz. & vert. Navigation === | ||
| - | --------------------------------------------- | ||
| {{:deutsch:navigationen:nav_list_ul_f_130_horiz_vert.gif|}} \\ | {{: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] | Du siehst die Ausgabe für eine vertikale Sub-Ebene des aktiven Pfads //(active path).// [Ebene02] | ||
| - | === Level Lift === | + | ~~UP~~ |
| + | |||
| + | ===== Level Lift ===== | ||
| **Level lift** für die vertikale Navigation, beginnend in der ersten Ebene nach [Ebene02]: | **Level lift** für die vertikale Navigation, beginnend in der ersten Ebene nach [Ebene02]: | ||
| <code PHP| level lift>[PHP] | <code PHP| level lift>[PHP] | ||
| Line 708: | Line 735: | ||
| Die Grundlagen: Forum: [[http://forum.phpwcms.org/viewtopic.php?p=90950#90950|Untermenü nur bedingt anzeigen]] (German). | Die Grundlagen: Forum: [[http://forum.phpwcms.org/viewtopic.php?p=90950#90950|Untermenü nur bedingt anzeigen]] (German). | ||
| - | Für tiefere Infomationen bezgl. Ebenen und IDs schaue auch hier hinein. | + | Für tiefere Infomationen bezgl. [[deutsch/navigationen/kleine-helfer/level-lift]] schaue auch hier hinein. |
| - | * Multilingual/domain Schalter [en]: [[http://www.phpwcms.de/forum/viewtopic.php?p=83791#83791]] | + | * [[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]] | * Grundlagen Ebenen und IDs [de]: [[http://www.phpwcms.de/forum/viewtopic.php?p=71772#71772]] | ||