Differences

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

english:navigation:nav_list_ul-example:background-id-based [2010/10/14 21:31]
Knut Heermann (flip-flop)
english:navigation:nav_list_ul-example:background-id-based [2018/06/03 18:09] (current)
Line 5: Line 5:
Each of the three different states of a navigation //(normal, hover, active)// get its own background image or a color assigned. Each of the three different states of a navigation //(normal, hover, active)// get its own background image or a color assigned.
-Here shown by a simple example of a single-line navigation using the two navigationen [[english/navigation/dropdown-flyout/nav_horiz_dd]] or [[english/navigation/nav_list_ul]].+Here shown by a simple example of a single-line navigation using the two navigations [[english/navigation/dropdown-flyout/nav_horiz_dd]] or [[english/navigation/nav_list_ul]].
\\ \\
 +
 +
 +===== Horizontal =====
{{:deutsch:navigationen:nav_list_ul-beispiele:one_row_id_based_1.gif|}} {{:deutsch:navigationen:nav_list_ul-beispiele:one_row_id_based_1.gif|}}
Line 189: Line 192:
~~UP~~ ~~UP~~
-===== Vertikal =====+ ===== Vertical ===== 
 +
-**Annahme:** A combination of horizontal // (see above) // and vertical navigation.  +**Adoption:** A combination of horizontal // (see above) // and vertical navigation.  
Example how individual areas under a certain category can be colored with CSS. Example how individual areas under a certain category can be colored with CSS.
Line 210: Line 214:
$level_id = $GLOBALS['LEVEL_ID'][1]; $level_id = $GLOBALS['LEVEL_ID'][1];
echo '<div class="nlu_navi1_id">'.LF; echo '<div class="nlu_navi1_id">'.LF;
-echo '{NAV_LIST_UL:,'.$level_id.',,act_path,active,cat}';+echo '{NAV_LIST_UL:,'.$level_id.',,act_path,active,catv}';
echo '</div>'; echo '</div>';
} }
Line 216: Line 220:
</code> </code>
-==== Generierter Quelltext: ====+\\ 
 + 
 +==== Generated source: ====
<code html> <code html>
<div class="nlu_navi1_id"> <div class="nlu_navi1_id">
-  <ul id="cat_36" class="act_path"> +  <ul id="catv_36" class="act_path"> 
-    <li id="li_cat_37" class="sub_ul act_path sub_first"><a href="category06_01.phtml" title="Category06_01">Category06_01</a> +    <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="cat_37" class="act_path"> +      <ul id="catv_37" class="act_path"> 
-        <li id="li_cat_40" class="sub_no act_path active sub_first"><a href="category06_01_01.phtml" title="Category06_01_01">Category06_01_01</a></li> +        <li id="li_catv_40" class="sub_no act_path active sub_first"><a href="category06_01_01.phtml" title="Category06_01_01">Category06_01_01</a></li> 
-        <li id="li_cat_41" class="sub_no"><a href="cat05_06_01_02.phtml" title="Category06_01_02">Category06_01_02</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_cat_42" class="sub_no"><a href="category06_01_03.phtml" title="Category06_01_03">Category06_01_03</a></li>+        <li id="li_catv_42" class="sub_no"><a href="category06_01_03.phtml" title="Category06_01_03">Category06_01_03</a></li>
     </ul>      </ul>
    </li>     </li>
-    <li id="li_cat_38" class="sub_ul"><a href="category_06_02.phtml" title="Category06_02">Category06_02</a> +    <li id="li_catv_38" class="sub_ul"><a href="category_06_02.phtml" title="Category06_02">Category06_02</a> 
-      <ul id="cat_38"> +      <ul id="catv_38"> 
-        <li id="li_cat_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_43" class="sub_no sub_first"><a href="category06_02_01.phtml" title="Category06_02_01">Category06_02_01</a></li> 
-        <li id="li_cat_44" class="sub_no"><a href="category06_02_02.phtml" title="Category06_02_02">Category06_02_02</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_cat_45" class="sub_no"><a href="category06_02_03.phtml" title="Category06_02_03">Category06_02_03</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>       </ul>
    </li>     </li>
-    <li id="li_cat_39" class="sub_no"><a href="cat05_06_03.phtml" title="Category06_03">Category06_03</a></li>+    <li id="li_catv_39" class="sub_no"><a href="cat05_06_03.phtml" title="Category06_03">Category06_03</a></li>
  </ul>   </ul>
     
Line 257: Line 263:
-CSS from file [[english/navigations/nav_list_ul]].+CSS from file [[english/navigation/nav_list_ul]].
The difference is identified here as an example of colors //(see picture above)//. The difference is identified here as an example of colors //(see picture above)//.
Line 263: Line 269:
Compendium for the first range Category06_01.... Compendium for the first range Category06_01....
<code css|h CSS |h> <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 li { position: relative; }
 + 
 + 
 +/* ==== Styles for Menu Items =================================== */
 + 
/* ==== LEVEL X ================================================= */ /* ==== 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;
 + 
 +   /* ++ 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) */
 +}
/* ====  simple link <a> // einfacher Link <a> ==== */ /* ====  simple link <a> // einfacher Link <a> ==== */
Line 293: Line 363:
} }
/* ====  simple link <a> // einfacher Link <a> ==== */ /* ====  simple link <a> // einfacher Link <a> ==== */
-.nlu_navi1_id ul li#li_cat_37 a, +.nlu_navi1_id ul li#li_catv_37 a, 
-.nlu_navi1_id ul li#li_cat_37 a:link, +.nlu_navi1_id ul li#li_catv_37 a:link, 
-.nlu_navi1_id ul li#li_cat_37 a:visited, +.nlu_navi1_id ul li#li_catv_37 a:visited, 
-.nlu_navi1_id ul li#li_cat_37 a:active {+.nlu_navi1_id ul li#li_catv_37 a:active {
   color: #FFFFFF;           /* ++ Text color // Textfarbe */    color: #FFFFFF;           /* ++ Text color // Textfarbe */
Line 305: Line 375:
} }
-.nlu_navi1_id ul li#li_cat_38 a, +.nlu_navi1_id ul li#li_catv_38 a, 
-.nlu_navi1_id ul li#li_cat_38 a:link, +.nlu_navi1_id ul li#li_catv_38 a:link, 
-.nlu_navi1_id ul li#li_cat_38 a:visited, +.nlu_navi1_id ul li#li_catv_38 a:visited, 
-.nlu_navi1_id ul li#li_cat_38 a:active {+.nlu_navi1_id ul li#li_catv_38 a:active {
   color: #FFFFFF;           /* ++ Text color // Textfarbe */    color: #FFFFFF;           /* ++ Text color // Textfarbe */
Line 316: Line 386:
   background: brown  url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;    background: brown  url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;
} }
-.nlu_navi1_id ul li#li_cat_39 a, +.nlu_navi1_id ul li#li_catv_39 a, 
-.nlu_navi1_id ul li#li_cat_39 a:link, +.nlu_navi1_id ul li#li_catv_39 a:link, 
-.nlu_navi1_id ul li#li_cat_39 a:visited, +.nlu_navi1_id ul li#li_catv_39 a:visited, 
-.nlu_navi1_id ul li#li_cat_39 a:active {+.nlu_navi1_id ul li#li_catv_39 a:active {
   color: #FFFFFF;           /* ++ Text color // Textfarbe */    color: #FFFFFF;           /* ++ Text color // Textfarbe */
Line 340: Line 410:
   
/* ====  Aktiver Pfad - Linkverfolgung im Baum // active path in tree (link tracing) ==== */ /* ====  Aktiver Pfad - Linkverfolgung im Baum // active path in tree (link tracing) ==== */
-.nlu_navi1_id ul li#li_cat_37.act_path a, +.nlu_navi1_id ul li#li_catv_37.act_path a, 
-.nlu_navi1_id ul li#li_cat_37.act_path a:link, +.nlu_navi1_id ul li#li_catv_37.act_path a:link, 
-.nlu_navi1_id ul li#li_cat_37.act_path a:visited, +.nlu_navi1_id ul li#li_catv_37.act_path a:visited, 
-.nlu_navi1_id ul li#li_cat_37.act_path a:active {+.nlu_navi1_id ul li#li_catv_37.act_path a:active {
   color: White;    color: White;
   font-weight: bold;    font-weight: bold;
Line 350: Line 420:
/* ====  Einfacher Link - Keine Unterebene  // simple link - no su level ==== */ /* ====  Einfacher Link - Keine Unterebene  // simple link - no su level ==== */
-.nlu_navi1_id ul ul#cat_37 li.sub_no a, +.nlu_navi1_id ul ul#catv_37 li.sub_no a, 
-.nlu_navi1_id ul ul#cat_37 li.sub_no a:link, +.nlu_navi1_id ul ul#catv_37 li.sub_no a:link, 
-.nlu_navi1_id ul ul#cat_37 li.sub_no a:visited, +.nlu_navi1_id ul ul#catv_37 li.sub_no a:visited, 
-.nlu_navi1_id ul ul#cat_37 li.sub_no a:active {+.nlu_navi1_id ul ul#catv_37 li.sub_no a:active {
   color: White;    color: White;
   font-weight: normal;    font-weight: normal;
Line 360: Line 430:
/* ====  Aktiver Pfad - Linkverfolgung im Baum // active path in tree (link tracing) ==== */ /* ====  Aktiver Pfad - Linkverfolgung im Baum // active path in tree (link tracing) ==== */
-.nlu_navi1_id ul ul#cat_37 li.act_path a, +.nlu_navi1_id ul ul#catv_37 li.act_path a, 
-.nlu_navi1_id ul ul#cat_37 li.act_path a:link, +.nlu_navi1_id ul ul#catv_37 li.act_path a:link, 
-.nlu_navi1_id ul ul#cat_37 li.act_path a:visited, +.nlu_navi1_id ul ul#catv_37 li.act_path a:visited, 
-.nlu_navi1_id ul ul#cat_37 li.act_path a:active {+.nlu_navi1_id ul ul#catv_37 li.act_path a:active {
   color: White;    color: White;
   font-weight: bold;    font-weight: bold;
Line 381: Line 451:
   
/* ====  active link <a> // aktiver Link <a> ==== */ /* ====  active link <a> // aktiver Link <a> ==== */
-.nlu_navi1_id ul#cat_37 li.active a, +.nlu_navi1_id ul#catv_37 li.active a, 
-.nlu_navi1_id ul#cat_37 li.active a:link, +.nlu_navi1_id ul#catv_37 li.active a:link, 
-.nlu_navi1_id ul#cat_37 li.active a:visited, +.nlu_navi1_id ul#catv_37 li.active a:visited, 
-.nlu_navi1_id ul#cat_37 li.active a:active {+.nlu_navi1_id ul#catv_37 li.active a:active {
   color: White;    color: White;
   font-weight: bold;    font-weight: bold;
Line 392: Line 462:
/* ====  hover: Maus über Link <a> // hover link <a> ==== */ /* ====  hover: Maus über Link <a> // hover link <a> ==== */
-.nlu_navi1_id ul li#li_cat_37 a:hover {+.nlu_navi1_id ul li#li_catv_37 a:hover {
   color: White;    color: White;
/*   text-decoration: underline; */ /*   text-decoration: underline; */
   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;    background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
} }
- +.nlu_navi1_id ul li#li_catv_37.sub_no a:hover {
-.nlu_navi1_id ul li#li_cat_37.sub_no a:hover {+
   color: White;    color: White;
   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;    background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
} }
-.nlu_navi1_id ul li#li_cat_37.sub_ul a:hover {+.nlu_navi1_id ul li#li_catv_37.sub_ul a:hover {
   background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;    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> ==== */ /* ====  hover: Wenn Sublevel vorhanden <a> // hover: "if there is a sub_level" <a> ==== */
-.nlu_navi1_id ul li#li_cat_37.sub_ul_true a:hover {+.nlu_navi1_id ul li#li_catv_37.sub_ul_true a:hover {
   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;    background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
} }
   
/* ====  hover: Parent Link <a> // hover: "Only for the parent link" <a> ==== */ /* ====  hover: Parent Link <a> // hover: "Only for the parent link" <a> ==== */
-.nlu_navi1_id ul li#li_cat_37.sub_parent a:hover {+.nlu_navi1_id ul li#li_catv_37.sub_parent a:hover {
   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;    background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
} }
   
/* ====  hover: Der aktive Link <a> // hover: "Only for the active link" <a> ==== */ /* ====  hover: Der aktive Link <a> // hover: "Only for the active link" <a> ==== */
-.nlu_navi1_id ul li#li_cat_37.active a:hover {+.nlu_navi1_id ul li#li_catv_37.active a:hover {
   background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;    background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;
} }
-.nlu_navi1_id ul ul#cat_37 li.act_path a:hover{+.nlu_navi1_id ul ul#catv_37 li.act_path a:hover{
   background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;    background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;
} }
 + 
 +
 +/* ==== Beispielhafte Fortfuehrung fuer die anderen IDs ==== */
 +.nlu_navi1_id ul li#li_catv_38 a:hover {
 +   color: White;
 +/*   text-decoration: underline; */
 +   background: #BF5F5F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
 +}
 +.nlu_navi1_id ul li#li_catv_39 a:hover {
 +   color: White;
 +/*   text-decoration: underline; */
 +   background: #93AF57 url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
 +}
 + 
 +/* ==== LEVEL X+1 =============================================== */
 + 
 +.nlu_navi1_id ul ul li.sub_no a,
 +.nlu_navi1_id ul ul li.sub_no a:link,
 +.nlu_navi1_id ul ul li.sub_no a:visited,
 +.nlu_navi1_id ul ul li.sub_no a:active,
 +.nlu_navi1_id ul ul li.sub_ul a,
 +.nlu_navi1_id ul ul li.sub_ul a:link,
 +.nlu_navi1_id ul ul li.sub_ul a:visited,
 +.nlu_navi1_id 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) */
 +}
 + 
 +
 + 
 + 
 +/* ==== LEVEL X+2 =============================================== */
 + 
 +.nlu_navi1_id ul ul ul li.sub_no a,
 +.nlu_navi1_id ul ul ul li.sub_no a:link,
 +.nlu_navi1_id ul ul ul li.sub_no a:visited,
 +.nlu_navi1_id ul ul ul li.sub_no a:active,
 +.nlu_navi1_id ul ul ul li.sub_ul a,
 +.nlu_navi1_id ul ul ul li.sub_ul a:link,
 +.nlu_navi1_id ul ul ul li.sub_ul a:visited,
 +.nlu_navi1_id 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) */
 +}
 + 
 +
 +/*==== END LEVEL X ============================================= */
 + 
 +/* 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> </code>
 +\\
 +~~UP~~
\\ \\
-======  ====== 
 +====== Example No 2 ======
-----+===== Horizontal ===== 
 + 
 +{{:deutsch:navigationen:nav_list_ul-beispiele:one_row_id_based04_1.gif|}} 
 + 
 +==== HTML: ==== 
 + 
 + 
 +**Navi Tag:** 
 +<code html> 
 +<div id="pmenu">{NAV_HORIZ_DD:0,1}</div> 
 + 
 +oder 
 + 
 +<div id="pmenu">{NAV_LIST_UL:,0,1,active,act_path,cat}</div> 
 +</code> 
 + 
 + 
 +\\ 
 + 
 +==== CSS: ==== 
 + 
 + 
 +<code |h CSS |h> 
 +/* ================================================================== 
 +  18.04.10 KH (flip-flop) http://planmatrix.de 
 +  Simple ID-based navigation for one row 
 +  <div id="pmenu">{NAV_LIST_UL:,0,1,active,act_path,cat}</div> 
 +  =================================================================== */ 
 +/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */ 
 +/* margin hinzugefuegt - ausschließlich fuer diese demo - und ein "relative position" mit einem hohen z-index Wert um sicherzustellen dass das Menue ueber jedem nachfolgenden Element aufklappt. */ 
 +  
 +#menu_container { 
 +   margin: 0 0 0px 0;  /* 100px only for testing - default = 0 */ 
 +   position: relative; 
 +   width: 920px; 
 +   height: 21px;      /* ORG 20px */ 
 +   z-index: 1000; 
 +
 +  
 +/* Get rid of the margin, padding and bullets in the unordered lists */ 
 +/* margin und padding auf 0, Aufzählungszeichen der unsortierten Liste unterdruecken */ 
 +#pmenu, #pmenu ul { 
 +   padding: 0; 
 +   margin: 0; 
 +   list-style-type: none; 
 +
 +  
 +/* Set up the link size, color and borders */ 
 +/* Einstellen der Groessen, Farben und Rahmen fuer die Links */ 
 +#pmenu a, #pmenu a:visited { 
 +    display: block; 
 +/*    width: 120px; */ 
 +    font-size: 11px; 
 +    color: #fff; 
 +    height: 21px;      /* ORG 25px */ 
 +    line-height: 20px; /* ORG 24px */ 
 +    text-decoration: none; 
 +    text-indent: 5px; 
 +    border: 1px solid #fff; 
 +    border-width: 1px 0 1px 1px; 
 +    font-weight:bold; 
 +
 +  
 +  
 +/* BASE ===================================== */ 
 +/* Einstellungen für die einzelnen Navigationspunkte */ 
 +  
 +#pmenu #cat-id_1 a,     /* NAV_HORIZ_DD */ 
 +#pmenu #li_cat_1 a {    /* NAV_LIST_UL  */ 
 +    color: #444; 
 +    width:110px; 
 +    background: gold           url(../img/custom/nav/nav01.png) 0 0 no-repeat; 
 +
 +#pmenu #cat-id_2 a, 
 +#pmenu #li_cat_2 a { 
 +    width:160px; 
 +    background: green          url(../img/custom/nav/nav02.png) 0 0 no-repeat; 
 +
 +#pmenu #cat-id_3 a, 
 +#pmenu #li_cat_3 a { 
 +    width:130px; 
 +    background: red            url(../img/custom/nav/nav03.png) 0 0 no-repeat; 
 +
 +#pmenu #cat-id_4 a, 
 +#pmenu #li_cat_4 a { 
 +    width:150px; 
 +    background: blue           url(../img/custom/nav/nav04.png) 0 0 no-repeat; 
 +
 +#pmenu #cat-id_13 a, 
 +#pmenu #li_cat_13 a { 
 +    width:120px; 
 +    background: peru           url(../img/custom/nav/nav13.png) 0 0 no-repeat; 
 +
 +#pmenu #cat-id_36 a, 
 +#pmenu #li_cat_36 a { 
 +    width:90px; 
 +    background: mediumvioletred   url(../img/custom/nav/nav36.png) 0 0 no-repeat; 
 +
 +#pmenu #cat-id_47 a, 
 +#pmenu #li_cat_47 a { 
 +    width:90px; 
 +    background: slateblue      url(../img/custom/nav/nav36.png) 0 0 no-repeat; 
 +
 +  
 +/* ACTIVE ===================================== */ 
 +/* Aktive Navigationspunkte */ 
 +  
 +#pmenu #cat-id_1.active a, 
 +#pmenu #li_cat_1.active a { 
 +    color: #444; 
 +    background: palegoldenrod  url(../img/custom/nav/nav_act01.png) 0 0 no-repeat; 
 +
 +#pmenu #cat-id_2.active a, 
 +#pmenu #li_cat_2.active a { 
 +    background: lightgreen     url(../img/custom/nav/nav_act02.png) 0 0 no-repeat; 
 +
 +#pmenu #cat-id_3.active a, 
 +#pmenu #li_cat_3.active a { 
 +    background: salmon         url(../img/custom/nav/nav_act03.png) 0 0 no-repeat; 
 +
 +#pmenu #cat-id_4.active a, 
 +#pmenu #li_cat_4.active a { 
 +    background: cornflowerblue url(../img/custom/nav/nav_act04.png) 0 0 no-repeat; 
 +
 +#pmenu #cat-id_13.active a, 
 +#pmenu #li_cat_13.active a { 
 +    background: goldenrod      url(../img/custom/nav/nav_act013.png) 0 0 no-repeat; 
 +
 +#pmenu #cat-id_36.active a, 
 +#pmenu #li_cat_36.active a { 
 +    background: deeppink       url(../img/custom/nav/nav_act013.png) 0 0 no-repeat; 
 +
 +#pmenu #cat-id_47.active a, 
 +#pmenu #li_cat_47.active a { 
 +    background: mediumslateblue  url(../img/custom/nav/nav_act013.png) 0 0 no-repeat; 
 +
 +  
 + 
 +  
 +/* Set up the list items */ 
 +/* Einstellen der Listeneinzelheiten */ 
 +#pmenu li { 
 +   float: left; 
 +   list-style-type: none; 
 +   background: #7484ad; 
 +
 +  
 +/* HOVER ===================================== */ 
 +/* For Non-IE browsers and IE7 */ 
 +/* Fuer alle nicht IE + IE7 */ 
 +  
 +#pmenu li:hover { 
 +   position: relative; 
 +
 +/* Make the hovered list color persist */ 
 +/* Festlegen der Farbe fuer hover li */ 
 +  
 +#pmenu li:hover a { 
 +   background: fuchsia;        /* Simple fallback */ 
 +   color: #BF4300;      /* ORG #c00; */ 
 +
 +  
 +#pmenu li#cat-id_1 a:hover, 
 +#pmenu li#li_cat_1 a:hover  { 
 +   background: yellow          url(../img/custom/nav/nav_hov01.png) 0 0 no-repeat; 
 +   color: #444;      /* ORG #c00; */ 
 +
 +#pmenu li#cat-id_2 a:hover, 
 +#pmenu li#li_cat_2 a:hover  { 
 +   background: lime            url(../img/custom/nav/nav_hov02.png) 0 0 no-repeat; 
 +   color: #444;      /* ORG #c00; */ 
 +
 +#pmenu li#cat-id_3 a:hover, 
 +#pmenu li#li_cat_3 a:hover  { 
 +   background: tomato          url(../img/custom/nav/nav_hov03.png) 0 0 no-repeat; 
 +   color: #222;      /* ORG #c00; */ 
 +
 +#pmenu li#cat-id_4 a:hover, 
 +#pmenu li#li_cat_4 a:hover  { 
 +   background: mediumslateblue url(../img/custom/nav/nav_hov04.png) 0 0 no-repeat; 
 +   color: #000;      /* ORG #c00; */ 
 +
 +#pmenu li#cat-id_13 a:hover, 
 +#pmenu li#li_cat_13 a:hover  { 
 +   background: orange          url(../img/custom/nav/nav_hov13.png) 0 0 no-repeat; 
 +   color: #444;      /* ORG #c00; */ 
 +
 +#pmenu li#cat-id_36 a:hover, 
 +#pmenu li#li_cat_36 a:hover  { 
 +   background: hotpink          url(../img/custom/nav/nav_hov13.png) 0 0 no-repeat; 
 +   color: #444;      /* ORG #c00; */ 
 +
 +#pmenu li#cat-id_47 a:hover, 
 +#pmenu li#li_cat_47 a:hover  { 
 +   background: mediumpurple          url(../img/custom/nav/nav_hov13.png) 0 0 no-repeat; 
 +   color: #000;      /* ORG #c00; */ 
 +
 +</code> 
 + 
 +~~UP~~ 
 +\\ 
 + 
 +===== Vertikal ===== 
 + 
 +**Adoption:** A combination of horizontal  //(see above)//  and vertical navigation.   
 + 
 +Example how the area under a category can be colored with CSS. 
 + 
 +{{:deutsch:navigationen:nav_list_ul-beispiele:vertical_id_based0405_1.gif|}} 
 + 
 +\\ 
 +The call of vertical navigation is made in the Template by using ther "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>  
 + 
 +\\ 
 +==== Generated source: ==== 
 + 
 +**Below Category06,** Category06_01_03 is active:  
 + 
 + 
 +<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> 
 + 
 +\\
======  ====== ======  ======
english/navigation/nav_list_ul-example/background-id-based.1287084706.txt.gz · Last modified: 2018/06/03 18:08 (external edit)
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