[[Hintergrund ID basiert]]
You are here: Willkommen im phpwcms-HowTo:wiki » Benutzerhandbuch (DE) » Navigationen » NAV_LIST_UL Beispiele » Hintergrund ID basiert
Show pageOld revisions
Recent changesIndex

NAVIGATION

Imprint / Impressum

Please Donate!

With your donation you accelerate more enhancements of the wiki.

Differences

This shows you the differences between two versions of the page.

deutsch:navigationen:nav_list_ul-beispiele:hintergrund-auf-id-basis [2010/10/18 20:49]
Knut Heermann (flip-flop) 		deutsch:navigationen:nav_list_ul-beispiele:hintergrund-auf-id-basis [2018/06/03 18:09] (current)
Line 189: Line 189:
~~UP~~ ~~UP~~
-===== Vertikal 02 =====+===== Vertikal =====
**Annahme:** Eine Kombination aus horizontaler //(siehe oben)// und vertikaler Navigation.   **Annahme:** Eine Kombination aus horizontaler //(siehe oben)// und vertikaler Navigation.  
Line 215: Line 215:
[/PHP] [/PHP]
</code> </code>
 +
 +\\
==== Generierter Quelltext: ==== ==== Generierter Quelltext: ====
Line 562: Line 564:
</code> </code>
 +
 +~~UP~~
\\ \\
Line 767: Line 771:
</code> </code>
 +~~UP~~
\\ \\
===== Vertikal ===== ===== Vertikal =====
 +
 +**Annahme:** Eine Kombination aus horizontaler //(siehe oben)// und vertikaler Navigation.  
 +
 +Beispiel, wie der Bereich unterhalb einer Kategorie per CSS farblich gegenüber der benachbarten Kategorie abgegrenzt werden kann.
 +
 +{{:deutsch:navigationen:nav_list_ul-beispiele:vertical_id_based0405_1.gif|}}
 +
 +\\
 +Der Aufruf der vertikalen Navigation geschieht im Template über den "Level-Lift":
 +
 +<code php>
 +[PHP]
 +if(isset($GLOBALS['LEVEL_ID'][1])) {
 +$level_id = $GLOBALS['LEVEL_ID'][1];
 +echo '<div class="nlu_navi1_id">'.LF;
 +echo '{NAV_LIST_UL:,'.$level_id.',,act_path,active,catv}';
 +echo '</div>';
 +}
 +[/PHP]
 +</code>
 +
 +\\
 +
 +==== Generierter Quelltext: ====
 +
 +**Unterhalb Category06,** Category06_01_03 ist aktiv:
 +
 +
 +<code html>
 +<div class="nlu_navi1_id">
 +
 +<ul id="catv_36" class="act_path">
 + <li id="li_catv_37" class="sub_ul act_path sub_first"><a href="category06_01.phtml" title="Category06_01">Category06_01</a>
 + <ul id="catv_37" class="act_path">
 + <li id="li_catv_40" class="sub_no sub_first"><a href="category06_01_01.phtml" title="Category06_01_01">Category06_01_01</a></li>
 + <li id="li_catv_41" class="sub_no"><a href="cat05_06_01_02.phtml" title="Category06_01_02">Category06_01_02</a></li>
 + <li id="li_catv_42" class="sub_ul act_path active"><a href="category06_01_03.phtml" title="Category06_01_03">Category06_01_03</a>
 + <ul id="catv_42" class="act_path">
 + <li id="li_catv_46" class="sub_no sub_first"><a href="category06_01_03_01.phtml" title="Category06_01_03_01">Category06_01_03_01</a></li>
 + </ul>
 + </li>
 + </ul>
 + </li>
 + <li id="li_catv_38" class="sub_ul"><a href="category_06_02.phtml" title="Category06_02">Category06_02</a>
 + <ul id="catv_38">
 + <li id="li_catv_43" class="sub_no sub_first"><a href="category06_02_01.phtml" title="Category06_02_01">Category06_02_01</a></li>
 + <li id="li_catv_44" class="sub_no"><a href="category06_02_02.phtml" title="Category06_02_02">Category06_02_02</a></li>
 + <li id="li_catv_45" class="sub_no"><a href="category06_02_03.phtml" title="Category06_02_03">Category06_02_03</a></li>
 + </ul>
 + </li>
 + <li id="li_catv_39" class="sub_no"><a href="cat05_06_03.phtml" title="Category06_03">Category06_03</a></li>
 +</ul>
 +
 +</div>
 +</code>
 +
 +
 +\\
 +
 +==== CSS: ====
 +
 +<code css|h CSS |h>
 +/* ======================================================================
 +   >= V1.30   CSS for an vertical menu
 +   <div class="nlu_navi1_ul_id">{ NAV_LIST_UL:F,0,,act_path,active,catv }</div>
 +   Level 0 - 3;
 +   26.03.07 flip-flop (KH)
 +   13.10.10 Update catv_[ID]
 + 
 +========================================================================= */
 + 
 + 
 +.nlu_navi1_id {
 +   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_id em { font-style: normal; }
 + 
 +.nlu_navi1_id ul {
 +   margin: 0;
 +   padding: 0;
 +   border: 0;
 +   list-style-type: none;
 +   width: 200px;  /* ++ Width of Menu Items // Breite der Navigation */
 +}
 +.nlu_navi1_id ul#catv_36 {
 +   /* ++ background color; url of the image; image adjust e.g. left gap 10px */
 +   /* ++ Hintergrundfarbe; URL der Grafik  ; Grafik einrücken z.B. 10px */
 +   background: mediumvioletred ;
 +}
 +.nlu_navi1_id ul#catv_47 {
 +   /* ++ background color; url of the image; image adjust e.g. left gap 10px */
 +   /* ++ Hintergrundfarbe; URL der Grafik  ; Grafik einrücken z.B. 10px */
 +   background: slateblue  ;
 +}
 + 
 +.nlu_navi1_id ul li { position: relative; }
 + 
 + 
 +/* ==== Styles for Menu Items =================================== */
 + 
 +/* ==== LEVEL X ================================================= */
 + 
 +/* ====  simple link <a> // einfacher Link <a> ==== */
 +.nlu_navi1_id ul li a,
 +.nlu_navi1_id ul li a:link,
 +.nlu_navi1_id ul li a:visited,
 +.nlu_navi1_id 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; */
 +   background: 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) */
 +}
 +
 +
 + 
 +/* ==== LEVEL X+1 =============================================== */
 + 
 +.nlu_navi1_id ul ul li a,
 +.nlu_navi1_id ul ul li a:link,
 +.nlu_navi1_id ul ul li a:visited,
 +.nlu_navi1_id ul ul li a:active {
 +   display: block;
 +   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_id ul#catv_36 ul li.sub_no a,
 +.nlu_navi1_id ul#catv_36 ul li.sub_ul a {
 +   color: White;
 +/*   text-decoration: underline; */
 +   background:  mediumvioletred url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
 +}
 +.nlu_navi1_id ul#catv_47 ul li.sub_no a,
 +.nlu_navi1_id ul#catv_47 ul li.sub_ul a {
 +   color: White;
 +/*   text-decoration: underline; */
 +   background:  slateblue url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
 +}
 + 
 +/* ==== LEVEL X+2 =============================================== */
 + 
 +.nlu_navi1_id ul ul ul li a,
 +.nlu_navi1_id ul ul ul li a:link,
 +.nlu_navi1_id ul ul ul li a:visited,
 +.nlu_navi1_id ul ul ul li a:active {
 +   display: block;
 +   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) */
 +}
 +
 +.nlu_navi1_id ul#catv_36 ul ul li.sub_no a,
 +.nlu_navi1_id ul#catv_36 ul ul li.sub_ul a {
 +   color: White;
 +/*   text-decoration: underline; */
 +   background:  mediumvioletred url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
 +}
 +.nlu_navi1_id ul#catv_47 ul ul li.sub_no a,
 +.nlu_navi1_id ul#catv_47 ul ul li.sub_ul a {
 +   color: White;
 +/*   text-decoration: underline; */
 +   background:  slateblue url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
 +}
 +
 +
 +/*==== END LEVEL X ============================================= */
 +
 +/* ====  .active: Aktiver Link <a> // .active link <a> ==== */
 +.nlu_navi1_id ul#catv_36 li.active a,
 +.nlu_navi1_id ul#catv_36 ul li.active a,
 +.nlu_navi1_id ul#catv_36 ul ul li.active a {
 +   color: White;
 +/*   text-decoration: underline; */
 +   background: deeppink url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
 +}
 +.nlu_navi1_id ul#catv_47 li.active a,
 +.nlu_navi1_id ul#catv_47 ul li.active a,
 +.nlu_navi1_id ul#catv_47 ul ul li.active a {
 +   color: White;
 +/*   text-decoration: underline; */
 +   background: mediumslateblue url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
 +}
 +
 +/* ====  hover: Maus über Link <a> // hover link <a> ==== */
 +.nlu_navi1_id ul#catv_36 a:hover,
 +.nlu_navi1_id ul#catv_36 ul li a:hover,
 +.nlu_navi1_id ul#catv_36 ul ul li a:hover {
 +   color: White;
 +/*   text-decoration: underline; */
 +   background: hotpink url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
 +}
 +
 +/* ==== Beispielhafte Fortfuehrung fuer die anderen IDs ==== */
 +.nlu_navi1_id ul#catv_47 a:hover,
 +.nlu_navi1_id ul#catv_47 ul li a:hover,
 +.nlu_navi1_id ul#catv_47 ul ul li a:hover {
 +   color: White;
 +/*   text-decoration: underline; */
 +   background: mediumpurple url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
 +}
 +
 +/*==== IE only  ============================================= */
 + 
 +/* Holly Hack. IE Requirement \*/
 +* html .nlu_navi1_id ul li { float: left; height: 1%; }
 +* html .nlu_navi1_id ul li a { height: 1%; }
 + 
 +/* ==== End  nlu_navi1_ul_id ========================================= */
 +</code>
 +
 +\\
======  ====== ======  ======
deutsch/navigationen/nav_list_ul-beispiele/hintergrund-auf-id-basis.1287427759.txt.gz · Last modified: 2018/06/03 18:07 (external edit)
Show pageOld 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