Forum

[ThomasS]

Hallo,

ich versuche, die CSS für das Template "<ul>-Navigation für mehrere Benutzerbereiche inc. Breadcrumbs" (von Raybeam) zu erstellen.

Ich habe dieses Template eingebaut, weil darunter nach dem Einloggen weitere Menüpunkte freigeschaltet werden können. Am liebsten wäre es mir, wenn diese freigeschalteten Links anders aussehen würden als die restlichen Links, damit man erkennt: "Aha, diese Links sind nun nach dem Einloggen neu erschienen!"

Leider sind diesem Template keine Beispiel-CSS beigefügt.

Ich sehe, dass es verschiedene Klassen und Klassennamen gibt - und normalerweise kann ich auch Menüs mit CSS bauen... aber ich kriege es hier nicht hin, dass die Unter-Menüpunkte anders aussehen als die Hauptmenüpunkte

Ich möchte, dass sich die Navi beim Klick ausklappen kann, und dass dann weitere Unter-Menüpunkte und Unter-Untermenüpunkte entstehen.

Im Prinzip funktioniert das bei mir - nur kann ich z.B. den Links kein unterschiedliches Aussehen zuweisen.

Hat jemand evtl. dieses Menü bei sich eingebaut und kann mir ein Beispiel CSS für dieses Menü senden? Dann verstehe ich vielleicht die Funktionsweise besser!

Vielen Dank
und herzliche Grüße
Thomas

[Dr KillerJoe]

Hi.

Poste doch mal den ausgegebenen Code der navi (also den html code) und den dazu gehörigen CSS-Code. Dann kann man Dir vielleicht auch so helfen ohne die Navi zu verwenden

mfg
Flo

[ThomasS]

Hi Dr KillerJoe,

vielen Dank, ich glaube, das war der entscheidende Tipp!
Ich hatte versucht, aus dem PHP-Template schlau zu werden und bin nicht auf die Idee gekommen, den HTML Quelltext zu überprüfen!

Ich habe die Links reduziert, damit es nicht verwirrend wird und die drei Zustandsformen der Navi herauskopiert:


Ursprünglicher, geschlossener Zustand der Navi
Untereinander stehen die drei First-Level-Links "Home", "Testseiten" und "Impressum",
wobei Home zwangsläufig aktiv ist:

<ul class="navroot">
<li class="active open level1"><a class="level1 active" href="index.php?article_id=1">Home</a></li>
<li class="inactive level1"><a class="level1 inactive" href="index.php?article_id=5">Testseiten</a></li>
<li class="inactive level1"><a class="level1 inactive" href="index.php?article_id=57">Impressum</a></li>
</ul>


Öffnung der ersten Unter-Ebene
Ich klicke auf "Testseiten", es öffnen sich Testseite 1 und Testseite 2

<ul class="navroot">
<li class="inactive level1"><a class="level1 inactive" href="index.php?article_id=1">Home</a></li>
<li class="active open level1"><a class="level1 active" href="index.php?article_id=5">Testseiten</a>
<ul class="subnav1">
<li class="inactive level2"><a class="level2 inactive" href="index.php?article_id=28">Testseite 1</a></li>
<li class="inactive level2"><a class="level2 inactive" href="index.php?article_id=29">Testseite 2</a></li>
</ul>
</li>
<li class="inactive level1"><a class="level1 inactive" href="index.php?article_id=57">Impressum</a></li>
</ul>



Öffnung der zweiten Unter-Ebene
Ich klicke auf Testseite 1,
es öffnet sich Testseite 1a und Testseite 1b

<ul class="navroot">
<li class="inactive level1"><a class="level1 inactive" href="index.php?article_id=1">Home</a></li>
<li class="inactive open level1"><a class="level1 inactive" href="index.php?article_id=5">Testseiten</a>

<ul class="subnav1">
<li class="active level2"><a class="level2 active" href="index.php?article_id=28">Testseite 1</a>
<ul class="subnav2">
<li class="inactive level3"><a class="level3 inactive" href="index.php?article_id=43">Testseite 1a</a></li>
<li class="inactive level3"><a class="level3 inactive" href="index.php?article_id=44">Testseite 1b</a></li>
</ul>
</li>
<li class="inactive level2"><a class="level2 inactive" href="index.php?article_id=29">Testseite 2</a></li>
</ul>
</li>

<li class="inactive level1"><a class="level1 inactive" href="index.php?article_id=57">Impressum</a></li>
</ul>


So sieht das alles schön logisch und ordendlich aus! Jetzt werde ich dafür die CSS bauen - sicher klappt es jetzt besser - wenn ich es geschafft habe poste ich die CSS!

Vielen Dank, Dr KillerJoe!
Herzliche Grüße
Thomas

[raybeam]

Hallo Thomas,

ich gehe oft sogar noch einen Schritt weiter und rücke die entsprechenden Zeilen ein, so werden sie noch übersichtlicher

Code: Alles auswählen

<ul class="navroot">
  <li class="inactive level1">...</li>
  <li class="inactive open level1">...
    <ul class="subnav1">
      <li class="active level2">...
        <ul class="subnav2">
          <li class="inactive level3">...</li>
          <li class="inactive level3">...</li>
        </ul>
      </li>
      <li class="inactive level2">...</li>
    </ul>
  </li>
  <li class="inactive level1">...</li>
</ul>


Sauberer wäre es natürlich neben dem Quelltext auch die CSS-Klassen und ID's ausführlich zu erläutern aber die Zeit ...

Gruß

Peter

[ThomasS]

Hallo,

vielen Dank, Peter, ich habe den Quelltext nun hübsch eingerückt.

Leider gehen diese Formatierungen wieder futsch, wenn ich sie hier einkopiere...

Ich glaube, dass ein CMS für breite Userbereiche besonders interessant ist, wenn ohne großen Aufwand unterschiedliche Menüs eingebaut werden können.

Ich hatte zunächst geglaubt, dieses - eigentlich geniale - Menü sei ein Fall für die X-Akten, weil meine CSS nicht umsetzbar waren. Dann habe ich herausgefunden, dass es an den Leerzeichen lag, die von den Browsern nicht interpretiert werden konnten. Ich habe daher erst einmal alle fehlenden Unterstriche im Template ergänzt, so dass die Klassen nun so aussehen:

Statt:
.active open level1
heißen sie nun z.B. :
.active_open_level1


Hier das geänderte Template:
*********************************************************

<?php
/*
Navigationstemplate zur Gestaltung von Seitennavigationen/-menüs auf der
Grundlage unsortierter Listen (<ul></ul>) mit folgenden Funktionen:

- beliebige Verschachtelungstiefe
- Veröffentlichungszeitraum (Online vom/bis) wird beachtet
- individuelle Benutzerbereiche werden ausgewertet
- Verschachtelung der unsortierten Listen wahlweise mit w3c-konformer
<ul>-Gliederung im jeweils übergeordnetern <li>-Element oder als
"Pseudo"-Verschachtelung in nur einem <ul>-Element
- Wahlweise Anzeige der Untermenüpunkte nur der aktuellen Kategorie oder
Anzeige aller Untermenüpunkte
- Wahlweise getrennte Anzeige von Haupt- und Untermenü
- Generierung eines Breadcrumb-Menüs

------------------------------------------------------------------------
Peter Reiche - www.raybeam.de
------------------------------------------------------------------------
letzte Änderung: 25.01.2007:
Wahlweise getrennte Anzeige von Haupt- und Untermenü ($subUl='extra')
letzte Änderung: 10.12.2006:
Einbindung eines "SuperUsers" der alle individuellen Menüpunkte sieht
Auswahl: Untermenüpunkte des aktiven Menüpunkts / alle anzeigen
letzte Änderung: 12.10.2006:
Darstellung der Untermenüpunkte erweitert
letzte Änderung: 09.07.2006:
Breadcrumb-Menü optimiert
------------------------------------------------------------------------

Installation:

Einbindung des Navigationstemplates in das Seitentemplate durch

// Template f. Navigation bestimmen
$navTemplateId = "14"; hier die aktuelle Navigations-Template-ID eintragen

// Navigation einbinden
include $REX['INCLUDE_PATH']."/generated/templates/$navTemplateId.template";

Darstellung des Breadcrumb-Menüs im HTML-Teil des Seitentemplates durch:
print $breadcrumb."\n";

Darstellung der Navigation im HTML-Teil des Seitentemplates durch:
print $navigation."\n";

Trennung von Haupt- und Unternavigation durch Setzen des "Menü-Umschalters" auf:
$subUl = 'extra';

Dadurch Darstellung der Navigation im HTML-Teil des Seitentemplates durch:
print $navigation."\n";

und Darstellung der Unternavigation im HTML-Teil des Seitentemplates durch:
print $subNavigation."\n";

*/

function build_navigation($userTyp, $nav, $path, $subUl='on',$pathIndex=1)
{
// Wenn der Veröffentlichungszeitraum "Online von / bis zum" nicht zutrifft, wird der
// Navigationslink nicht angezeigt. Artikel die direkt über den URL aufgerufen
// wurden, werden jedoch immer noch angezeigt. Das entsprechende Seiten-Template
// muss also bezügl. des Veröffentlichungszeitraums ebenfalls angepasst werden.
$time = time();

// Type-ID für den "SuperUser", der alle individuellen Menüpunkte sehen darf.
// Die ID sollte mit dem $su-Wert aus dem Authentifizierungstemplate übereinstimmen.
$su = 99;

if($nav->getValue('online_from') > $time || $nav->getValue('online_to') < $time)
{
return;
}
// Wenn die Typ-ID des Startartikels = 1 ist oder der UserTyp des angemeldeten
// Benutzers mit der Typ-ID des Startartikels der aktuellen Kategorie überein
// stimmt, geht es weiter
if($nav->getTypeId()==1 || $userTyp == $nav->getTypeId() || $userTyp == $su)
{
// Nur Submenü des aktuellen Root anzeigen
if($subUl=='on' || $subUl=='off' || $subUl=='extra')
{
if($nav->getId()==$path[$pathIndex])
{
// Durch ...->getChildren(1) anstatt ...->getChildren() werden
// nur Kategorien durchlaufen die "online" sind
if($nav->getChildren(1))
{
// "geöffnete" Rootkategorie durch css-Klasse '.open' markieren
if($pathIndex==1)
{
$oClass="open";
}
else
{
$oClass="";
}
if((count($path) > $pathIndex) && ($path[$pathIndex + 1] > 0))
{
if($pathIndex>1 && $subUl=='extra')
{
$subNavigation.='<li class="inactive_'.$oClass.'_level'.$pathIndex.'"><a class="level'.$pathIndex.'_inactive" href="'.$nav->getUrl().'">'.$nav->getName().'</a>';
}
else
{
$navigation.='<li class="inactive_'.$oClass.'_level'.$pathIndex.'"><a class="level'.$pathIndex.'_inactive" href="'.$nav->getUrl().'">'.$nav->getName().'</a>';
}
}
else
{
// bei 'extra' würde der root-Navigationspunkt ins submenü verschoben, soll er aber nicht
if($pathIndex>1 && $subUl=='extra')
{
$subNavigation.='<li class="active_'.$oClass.'_level'.$pathIndex.'"><a class="level'.$pathIndex.'_active" href="'.$nav->getUrl().'">'.$nav->getName().'</a>';
}
else
{
$navigation.='<li class="active_'.$oClass.'_level'.$pathIndex.'"><a class="level'.$pathIndex.'_active" href="'.$nav->getUrl().'">'.$nav->getName().'</a>';
}
}
// Wenn keine untergeordneten <ul>-Tags im Menü verwendet
// werden sollen ($subUl='off'), wird der <li>-Tag geschlossen
if($subUl=='off')
{
$navigation.= '</li>'."\n";
}
// Wenn untergeordnete <ul>-Tags im Menü verwendet
// werden sollen ($subUl='on'), wird in dem noch offenen
// <li>-Tag der <ul>-Tag geöffnet
else
{
if($pathIndex>1 && $subUl=='extra')
{
$subNavigation.= "\n<ul class=\"subnav".$pathIndex."\">\n";
}
else
{
$navigation.= "\n<ul class=\"subnav".$pathIndex."\">\n";
}
}
// Durch ...->getChildren(1) anstatt ...->getChildren() werden
// nur Kategorien durchlaufen die "online" sind - dazu wird die
// Funktion erneut aufgegrufen
foreach($nav->getChildren(1) as $sub)
{
$tmpNav=build_navigation($userTyp, $sub, $path,$subUl, $pathIndex+1);
$navigation.=$tmpNav[0];
$subNavigation.=$tmpNav[1];
}
// Wenn untergeordnete <ul>-Tags im Menü verwendet
// werden sollen ($subUl='on'), wird der <ul>-Tag hier wieder geschlossen
if($subUl=='on' || $subUl=='extra')
{
if($pathIndex>1 && $subUl=='extra')
{
$subNavigation.="</ul>\n";
}
else
{
$navigation.="</ul>\n";
}
}
}
else
{
if($pathIndex==1)
{
$oClass="open";
}
else
{
$oClass="";
}

if($pathIndex>1 && $subUl=='extra')
{
$subNavigation.='<li class="active_'.$oClass.'_level'.$pathIndex.'"><a class="level'.$pathIndex.'_active" href="'.$nav->getUrl().'">'.$nav->getName().'</a>';
}
else
{
$navigation.='<li class="active_'.$oClass.'_level'.$pathIndex.'"><a class="level'.$pathIndex.'_active" href="'.$nav->getUrl().'">'.$nav->getName().'</a>';
}


if($subUl=='off')
{
$navigation.= '</li>'."\n";
}
}
}
else
{
if($pathIndex>1 && $subUl=='extra')
{
$subNavigation.='<li class="inactive_level'.$pathIndex.'"><a class="level'.$pathIndex.'_inactive" href="'.$nav->getUrl().'">'.$nav->getName().'</a>';
}
else
{
$navigation.='<li class="inactive_level'.$pathIndex.'"><a class="level'.$pathIndex.'_inactive" href="'.$nav->getUrl().'">'.$nav->getName().'</a>';
}

if($subUl=='off')
{
$navigation.= '</li>'."\n";
}
}
if($subUl=='on' || $subUl=='extra')
{
if($pathIndex>1 && $subUl=='extra')
{
$subNavigation.= '</li>'."\n";
}
else
{
$navigation.= '</li>'."\n";
}
}
}
// Subemenüs aller Kategorien anzeigen
elseif($subUl=='allOn' || $subUl=='allOff')
{
if($nav->getChildren(1))
{
// "geöffnete" Rootkategorie durch css-Klasse '.open' markieren
if($pathIndex==1)
{
$oClass="open";
}
else
{
$oClass="";
}
if($nav->getId()==$path[$pathIndex])
{
$navigation.='<li class="active_'.$oClass.'_level'.$pathIndex.'"><a class="level'.$pathIndex.'_active" href="'.$nav->getUrl().'">'.$nav->getName().'</a>';
}
else
{
$navigation.='<li class="inactive_'.$oClass.'_level'.$pathIndex.'"><a class="level'.$pathIndex.'_inactive" href="'.$nav->getUrl().'">'.$nav->getName().'</a>';
}
// Wenn keine untergeordneten <ul>-Tags im Menü verwendet
// werden sollen ($subUl='allOff'), wird der <li>-Tag geschlossen
if($subUl=='allOff')
{
$navigation.= '</li>'."\n";
}
// Wenn untergeordnete <ul>-Tags im Menü verwendet
// werden sollen ($subUl='allOn'), wird in dem noch offenen
// <li>-Tag der <ul>-Tag geöffnet
else
{
$navigation.= "\n<ul class=\"subnav".$pathIndex."\">\n";
}
foreach($nav->getChildren(1) as $sub)
{
$tmpNav=build_navigation($userTyp, $sub, $path,$subUl, $pathIndex+1);
$navigation.=$tmpNav[0];
}
// Wenn untergeordnete <ul>-Tags im Menü verwendet
// werden sollen ($subUl='allOn'), wird der <ul>-Tag hier wieder geschlossen
if($subUl=='allOn')
{
$navigation.="</ul>\n";
}
}
else
{
if($nav->getId()==$path[$pathIndex])
{
$navigation.='<li class="active_'.$oClass.'_level'.$pathIndex.'"><a class="level'.$pathIndex.'_active" href="'.$nav->getUrl().'">'.$nav->getName().'</a>';
}
else
{
$navigation.='<li class="inactive_level'.$pathIndex.'"><a class="level'.$pathIndex.'_inactive" href="'.$nav->getUrl().'">'.$nav->getName().'</a>';
}
if($subUl=='allOff')
{
$navigation.= '</li>'."\n";
}
}
}
if($subUl=='allOn')
{
$navigation.= '</li>'."\n";
}
}



// Kleiner Trick, falls ausser der root-Kategorie alle weiteren aufgrund
// der Rechtevergabe ausgeblendet sind. Um validen HTML-Code zu erhalten
// muss am Ende des $navigations-String "<ul class=\"subnav1\">\n</ul>"
// gelöscht werden
if(strstr($navigation,"<ul class=\"subnav1\">\n</ul>"))
{
$navigation = str_replace("\n<ul class=\"subnav1\">\n</ul>","\n",$navigation);
}
$navArray=array();
$navArray[0].=$navigation;
$navArray[1].=$subNavigation;

return $navArray;
} /////////////////// Ende der function build_navigation //////////////


//////////////// ------- Navigation erstellen ------------ ///////////////

// Voreinstellungen:
$path = explode("|",$this->getValue("path").$this->getValue("article_id")."|");

// Usertyp festlegen, um Authentifizierung zu ermöglichen
$userTyp='0';
if ($FORM['USR_TYP'] != 0)
{
$userTyp = $FORM['USR_TYP'];
}
//////////////////////////////////////////////
// " M E N Ü - U M S C H A L T E R "
//////////////////////////////////////////////
// Menü mit <ul></ul> Auszeichnung
// auch in den Unter-Menüpunkten oder
// alle Untermenüpunkte ständig anzeigen
// <ul> einschalten:.................. on
// <ul> ausschalten:.................. off
// alle mit <ul> ständig anzeigen:.... allOn
// alle ohne <ul> ständig anzeigen:... allOff
// Untermenü extra:................... extra
//////////////////////////////////////////////

$subUl = 'on';

//////////////////////////////////////////////

// Durch ...::getRootCategories(1) anstatt ...::getRootCategories()
// werden nur die Root-Kategorien durchlaufen die "online" sind
$navi=array();
foreach (OOCategory::getRootCategories(1) as $nav)
{
$navi=build_navigation($userTyp, $nav, $path, $subUl);
$navMain.=$navi[0];
$navSub.=$navi[1];
}

if($navMain)
{
$navigation= "<ul class=\"navroot\">\n".$navMain."</ul>\n";
}

if($navSub)
{
$subNavigation= "<ul class=\"navsub\">\n".$navSub."</ul>\n";
}

//////////////// ------- Breadcrumb erstellen ---------- ////////////////

$aktArticle = OOArticle::getArticleById($this->getValue('article_id'));
$tree = $aktArticle->getParentTree();

//////////////////////////////////////////////
// Titel und Trennzeichen für die
// Breadcrumb-Links festlegen
//////////////////////////////////////////////

$bcTitle = 'Sie befinden sich hier: ';
$bcDivi = ' > ';

//////////////////////////////////////////////

if(is_array($path))
{
$breadcrumb = '<div id="breadcrumb">'."\n".'<span class="bcTitle">'.$bcTitle.$REX ['SERVERNAME'].'</span>';
foreach($path as $bcNr)
{
if($bcNr!='')
{
$art = OOArticle::getArticleByID($bcNr);
if($art->getValue('id')!=$this->getValue('article_id'))
{
// Pfad-Einträge des Artikels verlinken
$breadcrumb .= $bcDivi.$art->toLink();
}
else
{
// Artikelname der aktuellen Seite nicht verlinken
$breadcrumb .= $bcDivi.'<span class="bcActive">'.$this->getValue("name")."</span>\n";
}
}
}
$breadcrumb .='</div>'."\n";
}
?>

*********************************************************
Möglicherweise scheint es in der dritten Ebene (zweite Unterebene) noch nicht ganz richtig zu funktionieren, dort entstehen zwei Unterstriche direkt hintereinander (vorher entstanden dort 2 Leerzeichen direkt hintereinander, die sind aber optisch nicht aufgefalllen):

<li class="active__level2"><a class="level2_active" href="index.php?article_id=28">Testseite 1</a>

Ich vermute, es sollte dort nur 1 Unterstrich stehen. Oder? Ich habe die zwei Striche allerdings nicht wegbekommen - wenn ich das Template geändert hatte, dann fehlte immer ein Unterstrich an anderer Stelle...

Das sind meine Test-CSS, leider sind sie nicht besonders knapp geworden. Mir wäre es lieber, wenn ich da noch einiges zusammenfassen könnte, weil das Menü dann sicher schneller lädt. Aber so, wie es jetzt ist, ist es anschaulich:

/******************************************************************************
Navigation vertikal - ausklappende Navi mit Loginmöglichkeit
*******************************************************************************/

/****************************
Betrifft <ul> Element "navroot", es umfasst die gesamte Navi
*****************************/

.navroot {
/* padding-top: 100px; */
font-family: verdana, arial, helvetica, sans-serif;
font-size:12px;
width: 180px;
list-style: none;
}

/****************************
Ebene 1
*****************************/

/* .............. Ebene 1 <ul>: .............. */

.navroot li {
list-style-type: none;
}

/* .............. Ebene 1 <li>: .............. */

.active_open_level1 {}
.inactive_open_level1 {}

.active_level1 {}
.inactive_level1 {}


/* .............. Ebene 1 <a>: .............. */

/* Ebene 1 inaktiver Link */
a.level1_inactive {
font-weight: bold;
display: block;
width: 176px !important; /* Breite für netscape, Firefox, Opera usw. */
width: 190px; /* Breite für IE */
text-decoration: none;
color: #333;
padding: 5px;
margin-top: 1px;
background: #F8F8F8;
}

a.level1_inactive:hover {
background: #FFFFE1;
}

/* Ebene 1 aktiver Link: */
a.level1_active {
font-weight: bold;
display: block;
width: 176px !important;
width: 190px;
text-decoration: none;
color: #333;
padding: 5px;
margin-top: 1px;
background: #E4E4E4;
}

a.level1_active:hover {
background: #FFFFE1;
}

/****************************
Ebene 2
*****************************/


/* .............. Ebene 2 <ul>: .............. */

.subnav1 {
margin-left: 10px;
}

/* .............. Ebene 2 <li>: .............. */

.active_level2 {}
.inactive_level2 {}

/* ........... Ebene 2 <a>: .............. */


/* Ebene 2 aktiver Link: */
a.level2_active {
display: block;
width: 166px !important;
width: 180px;
text-decoration: none;
color: #333;
padding: 5px;
margin-top: 1px;
background: #E4E4E4;
}

a.level2_active:hover {
background: #FFFFE1;
}


/* Ebene 2 inaktiver link */
a.level2_inactive {
display: block;
width: 166px !important;
width: 180px;
text-decoration: none;
color: #333;
padding: 5px;
margin-top: 1px;
background: #F8F8F8;
}

a.level2_inactive:hover {
background: #FFFFE1;
}


/****************************
Ebene 3
*****************************/


/* ............. Ebene 3 <ul>: .............. */

.subnav2 {
margin-left: 10px;
}


/* .............. Ebene 3 <li>: .............. */

.active_level3 {}
.inactive_level3 {}


/* ........... <a>: .............. */

/* Ebene 3 aktiver Link:
das Problem mit den 2 Unterstrichen habe ich so gelöst:
*/
a.level3_active, a.level3__active {
display: block;
width: 156px !important;
width: 170px;
text-decoration: none;
color: #333;
padding: 5px;
margin-top: 1px;
background: #F8F8F8;
background: #E4E4E4;
}

a.level3_active:hover, a.level3__active:hover {
background: #FFFFE1;
}


/* Ebene 3 inaktiver Link */
a.level3_inactive, a.level3__inactive {
display: block;
width: 156px !important;
width: 170px;
text-decoration: none;
color: #333;
padding: 5px;
margin-top: 1px;
background: #F8F8F8;
}

a.level3_inactive:hover, a.level3__inactive:hover {
background: #FFFFE1;
}


*********************************************************
Herzliche Grüße
Thomas

[benny]

Hallo

Kann jetzt sein, dass ich was falsch verstanden habe, aber: Die Leerzeichen sind beabsichtigt (meiner Meinung nach). Damit können nämlich mehrere Namen klassen zugewiesen werden, die man dann untereinander wieder kombinieren kann.

[raybeam]

Kann jetzt sein, dass ich was falsch verstanden habe, aber: Die Leerzeichen sind beabsichtigt (meiner Meinung nach). Damit können nämlich mehrere Namen klassen zugewiesen werden, die man dann untereinander wieder kombinieren kann.

Genau so war's gedacht

Gruß

Peter

[ThomasS]

Hallo,

nachdem ich mich nun tagelang abgemüht habe, ohne zum Erfolg zu kommen, wiederhole ich meine anfängliche Bitte um ein Beispiel-CSS.

Ich verstehe leider überhaupt nicht, wie das mit den Leerzeichen gemeint ist und wie ich eine CSS Datei für dieses Menü erstellen kann.

Z.B. für das Menü "3 Ebenen / Liste mit li-Tags" von blumbeet - web.studio konnte ich absolut problemlos die CSS bauen.

Vielen Dank für Eure Hilfe!
Herzliche Grüße
Thomas

[benny]

Ich kann dir meins posten. Da ich aber auch nicht der CSS-Held bin, sondern das per "try and error" ausprobiert habe, könnte es durchaus kleine "Sinnlosigkeiten" darin geben um das mal so auszudrücken.

Code: Alles auswählen

/*   Navigation Klappbar  -
   Wenn die Navigation nicht mit der ID 5 verwendet wird, kann alles bis
   zum nächsten Kommentar gelöscht werden
------------------------------------------------------------------------------*/
#navigation {
    float:left;
   width:200px;
   padding:14px 0;
}

#header-nav {
}

#header-nav ul.navroot{
    width:170px;
}

#header-nav ul.navroot li{
    padding:8px 0 8px 14px;
}

#header-nav ul.navroot li.active,
#header-nav ul.navroot li.open{
    background:#f7f7f7;
}

/* ----------Einfach nur von Menü 2 kopiert! (ohne Sinn und Verstand)----------- */

#header-nav ul.navroot li.active a:link {
   color:#090; /* grün */
}

#header-nav ul.navroot a,
#header-nav ul.navroot a:link {
   display:block;
   color:#606060; /* grau */
   font-size:1.2em;
   font-weight:bold;
}

#header-nav ul.navroot a:hover {
   color:#090;
}

#header-nav ul.navroot li ul.navroot li {
   padding:0;
   margin-left:14px;
   list-style-type:square;
}

#header-nav ul.subnav1 a,
#header-nav ul.subnav1 a:link {
   display:block;
   padding:4px 0 4px 0;
   font-size:1.1em;
   font-weight:normal;
}

#header-nav ul.subnav1 a.active,
#header-nav ul.subnav1 a.active:link,
#header-nav ul.subnav1 a:hover {
   text-decoration:underline;
    color:#090;
}
/* ----------------------------------------------------------------------------------------------- */

/* Ab hier noch vom ausprobieren ;-) */
#header-nav ul.subnav1{
}

#header-nav li.active a{
color:#090;
}

#header-nav li.inactive {
}

#header-nav li.open {
}

#header-nav li.level1 {
}

#header-nav li.level2 a.inactive a {
    color:#606060;
}

#header-nav a.active {
}

#header-nav a.inactive {
}

#header-nav a.open {
}

#header-nav a.level1 {
}

#header-nav a.level2 {
}


mfg Benny

[raybeam]

Hallo Thomas,

wie Benny bereits andeutete, ist es möglich mehrere CSS-Klassen zuzuordnen. Diese werden dann durch class="klasse1 klasse2 klasse..." definiert.

Es ist nicht erforderlich alle Klassen zu benutzen. Du kannst deinen Stil auch nur mittels einer Klasse beschreiben und nimmst die anderen einfach nicht in dein Stylesheet auf.

Willst Du jedoch mehrere Klassen zuordnen, kannst Du dies in deinem Stylesheet z. B. wie folgt beschreiben:

Code: Alles auswählen

li.level1{border-bottom: 1px dotted #DCDCDC;}

li.active.level1{border-bottom: 1px solid #FF1493;}

li.inactive.open.level1{border-bottom: 1px dotted #FF1493;}


In meinem Beitrag vom 22.05. oben siehst Du alle Styles auf einen Blick. Mit Hilfe dieser Übersicht und dem CSS-Beispiel hier sollten Dir deine Styles gelingen.

Und wie gesagt, die Klassen sollen nur eine gewisse Flexibilität ermöglichen, man muss nicht alle einsetzen.

Gruß

Peter

[natalie]

Hallo,
das Thema möchte ich noch einmal aufgreifen, da ich ebenfalls Probleme habe.
Im CSS gebe ich ja für die Navigation an:
#navigation {
}

Aber für die erste Unternavigation???
#subnavigation{
}
#subnav{
}
oder
#subnav1{
}
haben keine Auswirkung.
Was ist richtig??? Das Untermenü soll eine kleinere Schrift und eine andere Farbe haben, daher meine Frage.

[Thomas.Blum]

Hej,

Was ist richtig??? Das Untermenü soll eine kleinere Schrift und eine andere Farbe haben, daher meine Frage.

Schicke doch am besten einen Link zu deiner Seite. Dann kann man das recht schnell feststellen und dir helfen. Falls die Seite offline ist, poste den Quellcode.

vg Thomas

[natalie]

ich denke, mir ist nun doch ein licht aufgegangen, falls es nicht funktioniert, melde ich mich nochmal

[raybeam]

Hallo Natalie,

hier ein kleines Beispiel:

Code: Alles auswählen

ul.subnav1{ background-color: Yellow; }
ul.subnav1, ul.subnav3{ font-family: sans-serif; }
ul.subnav2{ font-family: serif; background-color: White; }


Die Untermenüs werden durch <ul class=“subnav...“> eingeleitet.

Code: Alles auswählen

ul.subnav1{ background-color: Yellow; }

füllt die erste Unterebene mit einer gelben Hintergrundfarbe. Da subnav1 aber auch alle weiteren Unterebenen umschließt (siehe mein Quelltextbeispiel oben), erhalten auch diese den gelben Hintergrund.

Code: Alles auswählen

ul.subnav1, ul.subnav3{ font-family: sans-serif; }

gibt als Schriftart sans-serif vor. Da subnav1 alle folgenden umschließt, werden auch diese mit sans-serif dargestellt.

Warum dann ul.subnav3 hier nochmal aufführen?

In der letzten Anweisung

Code: Alles auswählen

ul.subnav2{ font-family: serif; background-color: White; }

erhält ul.subnav2 die Hintergrundfarbe weiß und die Schrift-Type serif.. Da ul.subnav2 aber alle folgenden Unterebenen umschließt, erhalten diese eine weiße Hintergrundfarbe und die Schrift serif.

Damit aber nur die Unterebene 2 die Schrift serif erhält und alle nachfolgenden wieder sans-serif, muss dies der Unterebene 3 nochmals explizit zugeordnet werden.

Ich hoffe, dass ich es einigermaßen verständlich erklärt habe.



Gruß

Peter

[ThomasS]

Hallo Peter, hallo Benny,

vielen Dank für Eure Hilfe! Dadurch und mit ein bisschen Try and Error ist mir die Erstellung der CSS genau so gelungen, wie ich es haben wollte!

Dieses Menü ist wirklich sehr vielseitig anpassbar, man muss sich allerdings ein bisschen mit CSS auskennen...

Zwei Anregungen hätte ich noch:

Angenommen, wir haben etwa 15 Links, und ein Besucher loggt sich ein.
Nun erscheinen ganz still und heimlich unten z.B. zwei weitere, jetzt freigeschaltete Links. Leider fallen die überhaupt nicht auf.

Klar sollte man in einem Text darauf hinweisen.

Vielleicht wäre es aber auch möglich, als Option einen Trennungsstrich oder dergleichen zwischen die neuen, freigeschalteten Links und den öffentlichen Links einzubauen, oder die neuen Links z.B. mit einer anderen Hintergrundfarbe auszustatten.

Ein Problem ergab sich, weil die Sitemap (von Michael Seifried) die eigentlich unsichtbaren Links sichtbar anzeigt. Wenn man darauf klickt, erscheint error 404 not found.
Ich habe das Problem genial gelöst, indem ich die Sitemap erst mal entfernt habe....



Viele Grüße
und danke, Ihr habt mir sehr weitergeholfen!
Thomas





Hier eine von unzähligen CSS-Möglichkeiten:

/****************************
Ebene 1
*****************************/


/* <ul> Element "navroot" umfasst die gesamte Navi */

.navroot {
/* padding-top: 100px; */
font-family: verdana, arial, helvetica, sans-serif;
font-size:11px;
font-weight: bold;
width: 180px;
list-style: none;
}

.navroot a {
display: block;
width: 176px !important; /* Breite für netscape, Firefox, Opera usw. */
width: 190px; /* Breite für IE */
font-weight: bold;
text-decoration: none;
border-top: 0px;
border-right: 1px solid #FFF;
border-bottom: 1px solid #FFF;
border-left: 3px solid #FFF;
color: #000033;
padding: 3px 3px 3px 7px;
margin-top: 1px;
background: #CCFFFF;
}
.navroot a.active{
border-left: 3px solid #FF0000;
color: #FF0000;
}

.navroot a:hover{
border-left: 3px solid #FF0000;
color: #FF0000;
}

/****************************
1. Unterebene (subnav1)
*****************************/
.subnav1 {
list-style: none;
margin-left: 10px;
}

.subnav1 a {
display: block;
width: 166px !important;
width: 180px;
font-weight: bold;
text-decoration: none;
border-top: 0px;
border-right: 1px solid #FFF;
border-bottom: 1px solid #FFF;
border-left: 3px solid #FFF;
color: #000033;
padding: 3px 3px 3px 7px;
margin-top: 1px;
background: #CCFFFF;
}

.subnav1 a.active{
border-left: 3px solid #FF0000;
color: #FF0000;
}

.subnav1 a:hover{
border-left: 3px solid #FF0000;
color: #FF0000;
}

/****************************
1. Unterebene (subnav2)
*****************************/
.subnav2 {
list-style: none;
margin-left: 10px;
}

.subnav2 a {
display: block;
width: 156px !important;
width: 170px;
font-weight: bold;
text-decoration: none;
border-top: 0px;
border-right: 1px solid #FFF;
border-bottom: 1px solid #FFF;
border-left: 3px solid #FFF;
color: #000033;
padding: 3px 3px 3px 7px;
margin-top: 1px;
background: #CCFFFF;
}

.subnav2 a.active{
border-left: 3px solid #FF0000;
color: #FF0000;
}

.subnav2 a:hover{
border-left: 3px solid #FF0000;
color: #FF0000;
}