Hintergrund ID basiert

Jeder der drei verschiedene Zustände einer Navigation (normal, hover, active) bekommt ein eigenes Hintergrundbild bzw. eine Farbe zugewiesen.

Hier gezeigt an einem einfachen Beispiel für eine einzeilige Navigation mit den beiden Navigationen NAV_HORIZ_DD:ID,Ebenentiefe oder NAV_LIST_UL (CSS).

Horizontal

HTML:

Navi Tag:

<div id="pmenu">{NAV_HORIZ_DD:0,1}</div>
 
oder
 
<div id="pmenu">{NAV_LIST_UL:,0,1,active,act_path,cat}</div>

CSS:

Bsp.: Hintergrundbilder in template/img/custom/nav/*

nav[Kategorie-ID].png

Zustand normal:      nav[cat-ID].png
Zustand aktiv:   nav_act[cat-ID].png
Zustand hover:   nav_hov[cat-ID].png

CSS

/* ==================================================================
  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; */
}

.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;

 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 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;

 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) */

} * html .nlu_navi1_id ul li { float: left; height: 1%; } * html .nlu_navi1_id ul li a { height: 1%; }

Docu: –
Forum: Navigation(-Buttons) im CMS erstellen?!

Autor: 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

deutsch/navigationen/nav_list_ul-beispiele/hintergrund-auf-id-basis.1287126816.txt.gz · Last modified: 2018/06/03 18:07 (external edit)

Show pagesource Old revisions