NAVIGATION
This is an old revision of the document!
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 NAV_HORIZ_DD:ID,Level depth or NAV_LIST_UL (CSS).
Navi Tag:
<div id="pmenu">{NAV_HORIZ_DD:0,1}</div> or <div id="pmenu">{NAV_LIST_UL:,0,1,active,act_path,cat}</div>
Example: Background images in template/img/custom/nav/*
nav[Category-ID].png
State normal: nav[cat-ID].png State active: nav_act[cat-ID].png State hover: nav_hov[cat-ID].png
/* ================================================================== 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 100px 0; /* 100px only for testing - default = 0 */ position: relative; width: 735px; 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; } /* ACTIVE ===================================== */ /* Aktive Navigationspunkte */ #pmenu #cat-id_1.act_path a, #pmenu #li_cat_1.act_path a { color: #444; background: palegoldenrod url(../img/custom/nav/nav_act01.png) 0 0 no-repeat; } #pmenu #cat-id_2.act_path a, #pmenu #li_cat_2.act_path a { background: lightgreen url(../img/custom/nav/nav_act02.png) 0 0 no-repeat; } #pmenu #cat-id_3.act_path a, #pmenu #li_cat_3.act_path a { background: salmon url(../img/custom/nav/nav_act03.png) 0 0 no-repeat; } #pmenu #cat-id_4.act_path a, #pmenu #li_cat_4.act_path a { background: cornflowerblue url(../img/custom/nav/nav_act04.png) 0 0 no-repeat; } #pmenu #cat-id_13.act_path a, #pmenu #li_cat_13.act_path a { background: goldenrod 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: #444; /* 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: #444; /* 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; */ }
Docu: –
Forum: Navigation(-Buttons) im CMS erstellen?!
Author: K.Heermann (flip-flop) http://planmatrix.de
CMS Version: >= 1.4x
Version: V1.0 (21.04.2010)
Update: –
Condition: –
— Knut Heermann (flip-flop) 2010/04/21 07:07