NAVIGATION
This shows you the differences between two versions of the page.
english:navigation:nav_list_ul-example:background-id-based [2010/10/14 21:32] 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 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> | ||
+ | |||
+ | \\ | ||
====== ====== | ====== ====== |