Navigation(-Buttons) im CMS erstellen?!

[Iller13]

Hi Freunde,
so, ich habe mal wieder ein kleines "Problem".
Und zwar möchte ich für ein Projekt eine Navigation umsetzen, glaube aber, dass es recht schwierig wird diese mit phpwcms umzusetzen.
Zum einfacheren Verständnis hier erst einmal ein Screenshot.
Oberes Teilbild im Normalzustand, das untere bei Klick auf einen Naviagtionspunkt.



Das Problem an der Sache, sind die unterschiedlich langen Buttons und das im Grunde jeder Button einen eigenen Hintergrund (Wellenlinie) hat.

Weiß jemand eine Umsetzungsmöglichkeit integriert im CMS? Oder werde ich diese Navi "extern und solid" bauen müssen.

Danke & Grüße
13

[update]

Nichts einfacher als das!
Hier lesen: http://www.phpwcms-howto.de/wiki/doku.p ... v_horiz_dd
Deine Navi hat keine Flyouts, also wird die Navi in der Tiefe begrenzt.
Jeder einzelne Menüpunkt hat eine eigene li-ID, daher ist er auch stylebar - einschließlich Hintergrund usw....

[flip-flop]

.... oder wenn keine Untermenüs verlangt werden reicht die NAV_LIST_UL (CSS) völlig aus.

Schaue bitte einmal bei beiden NAVIs auf die Klassen die mitgegeben werden bei den verschiedenen Zuständen.

Ich verstehe auch nicht was an einer Navi in phpwcms schwieriger sein soll als an einer extern zusammengeschraubten. (Außer es sind fertige Klassen vorhanden, die eine ganz bestimmte Ansprache erfordern).

Knut

[Iller13]

Danke für Eure Antworten!

Mit der NAV Hor DD habe ich ja schon Erfahrungen.
Ist übrigens nur diese eine Ebene.
Aber wie mache ich das mit dem Hintergrund. Jeder Button hat ja ein eignen Bildhintergrund und durch die Wortlänge eine eigene Breite.
Die Breite ist ja nicht das Problem, aber der geschwungene Bildhintergrund, welche von Button zu Button unterschiedlich ist.
Versteht ihr was ich meine?
Muss ich da nicht jeden Menüpunkt ein eigenes Bild zuweisen?
(Der Hintergrundwechsel bei "Klick", also dann im aktivem Zustand ist nicht das Problem!)

Ich will eigentlich nur PHPWCMS interne Navis verwenden. Bin bis jetzt auch immer mit klargekommen, aber hatte halt noch nie "verschiedene" Bildhintergründe im Button.

Grüße
13

[update]

mach erstmal die Navi, dann siehst Du im Quellcode sowas wie

Code: Select all

li class="sub_no" id="cat-id_71"><a href="fb-intern.phtml" class="horiz_enclose">FB-Intern</a></li>

Das CSS wäre dann sowas wie

Code: Select all

li #cat-id_71{background:transparent url(/pics/welle1.png) 0 0 no-repeat;width:4em;}
usw

Das hier ist aber nur eine Prinzipskizze
Die width kommt dann eher in die a- Anweisung - nee, doch nicht... probier mal
Habe eben mal schnell selber probiert:

Code: Select all

#pmenu li#cat-id_50{width:150px;font-weight:bold;color:#ffffff;background:transparent url(/pics/welle1.png) 0 0 no-repeat;}

Sowas in der Art sollte funktionieren ...

[update]

Und? Geht was?

[Iller13]

Dauert noch n bissl ... Muss noch andere Sites vorher finishen
Ich poschte dann aber!

Grüßle 13

[Iller13]

Hallo,
also ich habe mal ein wenig rumprobiert und dazu die {NAV_HORI_DD:ID} verwendet.

Läuft soweit, aber das mit der CSS Anpasung auf einzelne, das läuft irgendwie nicht.
Wo muss ich die Änderung denn im CSS einfügen?
Ich habe das mal unterhalb von #pmenu gemacht.
Aber das interessiert nicht?!?

Code: Select all

This copyright notice must be untouched at all times.
 
    The original version of this stylesheet and the associated (x)htmlis
    available at http://www.cssplay.co.uk/menus/simple_vertical.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the associated (x)html may be modified in any
    way to fit your requirements.
 
    08.11.07 KH (flip-flop) Enhanced: Start[ID] {NAV_HORIZ_DD:ID}
    http://www.phpwcms.de/forum/viewtopic.php?p=94688#94688
    (http://www.phpwcms.de/forum/viewtopic.php?p=89743#89743)
    =================================================================== */
    /* 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;
    }
    /* Einstellungen für die einzelnen Navigationspunkte */
	#pmenu #cat-id_4{width:150px;font-weight:bold;color:#ff3300;background:transparent url(/pics/welle1.png) 0 0 no-repeat;}
	
	
    /* Set up the sub level borders */
    /* Einstellen der Rahmen fuer die Unterebenen  */
    #pmenu li ul li a, #pmenu li ul li a:visited {
       border-width: 0 1px 1px 1px;
    }
    #pmenu li a.horiz_enclose, #pmenu li a.horiz_enclose:visited {
       border-width: 1px;
    }
    /* Set up the list items */
    /* Einstellen der Listeneinzelheiten */
    #pmenu li {
       float: left;
            list-style-type: none;
       background: #7484ad;
    }
    /* 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: #D1D5DF; /* ORG #dfd7ca; */
       color: #BF4300;      /* ORG #c00; */
    }
    /* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif (leer.gif) is for IE to work */
    /* Einstellen der Unterebenenlisten mit einer absoluten Positionierung fuer die FlyOuts und dem "Ueberfahren-Abstand"
       Das transparente gif (leer.gif) ist fuer den IE gedacht */
    #pmenu li ul {
       display: none;
    }
    /* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
    /* Fuer alle nicht-IE + IE7 wird die Unterebenenliste sichtbar bei einem Ueberfahren (hover) */
    #pmenu li:hover > ul {
       display: block;
       position: absolute;
       top: -7px;         /* ORG -11px */
       left: 80px;
       padding: 6px 30px 30px 30px; /* ORG padding: 10px */
       background:transparent url(../../img/article/leer.gif);
       width: 120px;
    }
    /* Position the first sub level beneath the top level links */
    /* Positioniere die erste Unterebene nach dem Topebenenlink */
    #pmenu > li:hover > ul {
       left: -30px;
       top: 16px;
    }
    /* get rid of the table */
    /* Tabelle neu einstellen */
    #pmenu table {
       position: absolute;
       border-collapse: collapse;
       top: 0;
       left: 0;
       z-index: 1000;
       font-size: 1em;
    }
    /* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
    /* Fuer den IE5 und IE6 gebe dem hover-Link eine relative Position und wechsele die Hinter- und Vordergrundfarbe. Das ist notwendig damit der IE angestoszen wird die Unterebenen auszugeben */
    * html #pmenu li a:hover {
       position: relative;
       background: #D1D5DF; /* ORG #dfd7ca; */
       color: #c00;
    }
    /* For accessibility of the top level menu when tabbing */
    /* Fuer die Aktivierung der ersten Ebene, wenn im Menue geblättert wird */
    #pmenu li a:active, #pmenu li a:focus {
       background: #dfd7ca;
       color: #BF4300;      /* ORG #c00; */
    }
    /* Set up the pointers for the sub level indication */
    /* Einstellen der Symbole/Pfeile für die Unterebenenanzeige */
    #pmenu li.fly_ul {
       background: #7484ad url(../../img/symbols/klapp_zu.gif) no-repeat 107px center;
    /*   background: #7484ad url(../../img/article/navi/fly.gif) no-repeat right center;
    */
    }
 
    #pmenu li.drop_ul {
       background: #7484ad url(../../img/symbols/klapp_auf.gif) no-repeat 105px center;
       /* background: #7484ad url(../../img/article/navi/drop.gif) no-repeat right center;
    */
    }
    /* KH: Active Path output */
    /* KH: Ausgabe des aktiven Pfads */
    #pmenu li.act_path {
       background:#4161AF url(../../img/symbols/klapp_auf.gif) no-repeat 105px center;
    /*   background:#cccccc url(../../img/article/navi/drop.gif) no-repeat right center;
       */
    }
 
    /* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */
    /* change the drop down levels from display:none; to visibility:hidden; */
    /* Dies ist fuer den IE5.5 und IE6 notwendig um die Unterebenen anzuzeigen */
    /* Wechselt die Unterebenen von display:none; nach visibility:hidden; */
 
    * html #pmenu li ul {
       visibility: hidden;
       display: block;
       position: absolute;
       top: -11px;
       left: 80px;
       padding: 10px 30px 30px 30px;
       background: transparent url(../../img/article/leer.gif);
    }
    /* keep the third level+ hidden when you hover on first level link */
    #pmenu li a:hover ul ul {
       visibility: hidden;
    }
    /* keep the fourth level+ hidden when you hover on second level link */
    #pmenu li a:hover ul a:hover ul ul {
       visibility: hidden;
    }
    /* keep the fifth level hidden when you hover on third level link */
    #pmenu li a:hover ul a:hover ul a:hover ul ul {
       visibility: hidden;
    }
    /* keep the sixth level hidden when you hover on fourth level link */
    #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
       visibility: hidden;
    }
    /* make the second level visible when hover on first level link and position it */
    #pmenu li a:hover ul {
       visibility: visible;
       left: -30px;       /*          (IE5 ONLY) */
       top: 10px;         /* ORG 14px (IE5 ONLY) */
       lef\t: -31px;      /*          (IE6 ONLY) */
       to\p: 11px;        /* ORG 15px (IE6 ONLY) */
    }
    /* make the third level visible when you hover over second level link and position it and all further levels */
    #pmenu li a:hover ul a:hover ul {
       visibility: visible;
       top: -11px;        /* ORG -11px (IE6 ONLY) */
       left: 80px;
    }
    /* make the fourth level visible when you hover over third level link */
    #pmenu li a:hover ul a:hover ul a:hover ul {
       visibility: visible;
    }
    /* make the fifth level visible when you hover over fourth level link */
    #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {
       visibility: visible;
    }
    /* make the sixth level visible when you hover over fifth level link */
    #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {
       visibility: visible;
    }
    /* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */

[flip-flop]

Die IDs in der Navi hast du aktiviert?

Code: Select all

//    IDs for every li  ======= If you need the ID class, please uncomment/comment
//    IDs fuer jedes li ======= Wenn sie die ID Klassen benoetigen, bitte dekommentieren/kommentieren
//      $l  = str_repeat('   ', $counter+1) . '<li'. $class . ' id="cat-id_' . $value['acat_id'] . '">';
      $l  = str_repeat('   ', $counter+1) . '<li'. $class . '>';

Knut

[Iller13]

Ich hätte schwören können ich habe es umgestellt. Aber natürlich war dem nicht so.
Danke Knut!

Jetzt läuft es:

Code: Select all

#pmenu #cat-id_4{
       width:154px;
       height:30px;
       font-weight:bold;
       background:transparent url(../../picture/navigation/welleid4.png) 0 0 no-repeat;}

Aber wie schaut das mit Hover und active und visited aus?

Code: Select all

#pmenu li:hover > a {
       background: #FFCC00; /* ORG #dfd7ca; */
       color: #BF4300;      /* ORG #c00; *
        }
	   
        #pmenu li:hover > a #cat-id_11{
        width:65px;
        height:30px;	   
        font-weight:bold;
        background:transparent url(../../picture/navigation/welleid11.png) 0 0 no-repeat;}

So stimmt es irgendwie nicht!?

Visited muss gleich dem normalzustand sein!?

[Iller13]

HILFEEEEEE! Ich komme nicht weiter!

Ich habe jetzt mal das Forum durchstöbert und gesucht, auch n wenig was gefunden, erhalte aber keine Reaktion im CSS.
Ich suche immernoch die Möglichkeit, den einzelnen IDs die verschiedenen Zustände active und hover zuzuweisen.
Ich erhalte aber keinerlei Reaktion, außer das es die Navigation zerhaut.

Code: Select all

#pmenu #cat-id_4{
      width:154px;
      height:30px;
      margin: 0 1px 0 0;
      font-weight:bold;
      background:transparent url(../../picture/navigation/welleid4.png) 0 0 no-repeat;}

Das ist die momentane Aussgangssituation.

Code: Select all

#pmenu #cat-id_4 a
#pmenu #cat-id_4 a: hover{
      width:154px;
      height:50px;
      margin: 0 1px 0 0;
      font-weight:bold;
      background:transparent url(../../picture/navigation/welleid4a.png) 0 0 no-repeat;}

Das habe ich versucht für den "hover" einzubauen. Geht aber nicht.

Bleibt der Rest in der CSS erhalten? Oder muss ich #pmenu, #pmenu ul , #pmenu a, #pmenu a:visited, #pmenu li:hover > a , #pmenu li:hover, ... entfernen oder anpassen?

Hoffe auf Hilfe!

Danke & Grüße
13

[top]

Mach mal das Leerzeichen zwischen a: und hover raus.

Code: Select all

a:hover

[Iller13]

hallo top,
bringt leider nichts!

Trotzdem Danke!

Grüße
13

[top]

Da springt mir gerade noch ein Fehler ins Auge. Wenn du Eigenschaften verschiedenen Klassen oder IDs zuordnen möchtest, müssen die durch ein Komma getrennt sein. (Der Absatz ist keine Trennung. Zur Übersichtlichkeit aber trotzdem sinnvoll.)

Code: Select all

#pmenu #cat-id_4 a,
#pmenu #cat-id_4 a:hover {

[flip-flop]

Teste bitte das einmal an: Navigation: Hintergrund ID basiert



Id basiert, eine Zeile, für

Code: Select all

<div id="pmenu">{NAV_HORIZ_DD:0,1}</div>

oder/und

Code: Select all

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

Code: Select all

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

Wobei ich die NAV_LIST_UL verwenden würde.

Knut