aufklappbares Menü

[konsument]

hallo zusammen,

habe schon ausführlichst die suche benutzt und auch schon einen thread gefunden der das selbe problem "behandelt". allerdings würde ich mir gerne mehr als nur "tips" mit angehängten zwinkersmileys wünschen.

ich möchte ein unglaublich simples vertikales menü haben, was sich stück für stück aufklappt wobei min 3 klassen für die entsprechenden links gegeben sein sollten. z.B.

--------------------------------------------------------------------------------------------

äpfel (class="äpfel")

  - blaue äpfel (class="blaue_äpfel")

      - gelb-blaue äpfel (class="gelb_blaue_äpfel")
      - grün-blaue äpfel
      - etc.

  - grüne äpfel
  - rote äpfel

birnen

bananen

--------------------------------------------------------------------------------------------

ich habs heute schon den ganzen tag versucht mir ein template zu modifizieren, bzw mir bereits modifizierte templates besorgt, allerdings alles ohne erfolg. ich bin echt am verzweifeln.

hab mich am simple_navigation.tpl versucht, aber ich scheitere und verzweifle an dem ganzen if &node kram.

vielleicht kann mir ja jemand mehr helfen, als nur einen wink zu geben.

viele grüße

[cyberman]

ich möchte ein unglaublich simples vertikales menü haben,

Das ist so unglaublich simple, dass du wahrscheinlich deswegen nicht drauf gekommen bist. Guckst du hier

Sind genau genommen sogar 4 Ebenen, erstellt mit dem mitgelieferten Muster-Template "Top simple navigation + left subnavigation + 1 column".

[konsument]

moin..

erstmal danke für den hinweis. allerdings ist das nicht ganz was ich suche. ich würde eben gerne für jeden opa-link, papa-link, sohn-link, sohn-vom-sohn-link eine spezielle klasse definieren.

bei der simple navigation springt leider immer automatisch der .active zum .current und wieder zurück. kann man den nicht definieren, das jede ebene eine eigene klasse hat?

grüße

[konsument]

hallo..

hat sich erledigt. habe meinen css-horizont etwas erweitert, womit sich das problem aufgelöst hat.

merci und noch einen recht schönen tag.

[cyberman]

ich würde eben gerne für jeden opa-link, papa-link, sohn-link, sohn-vom-sohn-link eine spezielle klasse definieren.

Die sind bis zur dritten Ebene bereits definiert - schau dir mal die CSS Navigation: Simple - Vertical an:

/* third level has some padding to have it stand out */
div#menu_vert ul ul ul {
  padding-bottom: 0.5em;
}

/* menu li block */
#menu_vert li {
  list-style: none;
  margin: 0;
  border-bottom: 1px solid #c0c0c0;
  display: block;
}

#menu_vert ul ul li {
  border: none;
}

/** fix stupid ie bug with display:block; **/
* html #menu_vert li a { height: 1%; }
* html #menu_vert li hr { height: 1%; }
/** end fix **/

/* first level links */
div#menu_vert a {
  text-decoration:none; /* no underline for links */
  display: block; /* IE has problems with this, fixed above */
  padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
  color: #18507C; /* this will be link color for all levels */
  background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;
  min-height:1em; /* Fixes IE7 whitespace bug */
}

/* next level links, more padding and smaller font */
div#menu_vert ul ul a {
  font-size: 90%;
  padding: 0.5em 0.5em 0.5em 2.8em;
  background-position: 1.5em center;
}

/* third level links, more padding */
div#menu_vert ul ul ul a {
  padding: 0.3em 0.5em 0.3em 4.3em;
  background: url(images/cms/dash.gif) no-repeat 2.8em center;
}

/* hover state for all links */
div#menu_vert a:hover {
  background-color: #C3D4DF;
}
div#menu_vert a.activeparent:hover {
  background-color: #C3D4DF;
  color: #18507C;
}

/*
active parent, that is the first-level parent
of a child page that is the current page
*/
div#menu_vert li a.activeparent {
  background: url(images/cms/arrow-down.gif) no-repeat 0.4em center;
  background-color: #385C72;
  color: #fff;
}

div#menu_vert ul ul li a.activeparent {
  background-position: 1.5em center;
  background-color: transparent;
  color: #18507C;
}


/*
current pages in the default Menu Manager
template are unclickable. This is for current page on first level
*/
div#menu_vert ul h3 {
  background: url(images/cms/arrow-right-active.gif) no-repeat 0.4em center;
  background-color: #385C72;
  display: block;
  padding: 0.8em 0.5em 0.8em 1.5em;  /* some air for it */
  color: #fff;                                /* this will be link color for all levels */
  font-size: 1em;                          /* instead of the normal font size for */
  margin: 0;                                  /* as normally has some margin by default */
}

/*
next level current pages, more padding,
smaller font and no background color or bottom border
*/
div#menu_vert ul ul h3 {
  font-size: 90%;
  padding: 0.3em 0.5em 0.3em 2.8em;
  background-position: 1.4em center;
  background-color: transparent;
  border-bottom: none;
  color: #000;   
}

/* current page on third level, more padding */
div#menu_vert ul ul ul h3 {
  padding: 0.3em 0.5em 0.3em 4.3em;
  background: url(images/cms/arrow-right-active.gif) no-repeat 2.7em center;
}

[konsument]

jo danke.

wie gesagt. mir war nicht bewusst, dass ich endlos verschachteln kann mit css. man lernt eben nie aus.