Design Submenue

Moderator: Sisko1990

Forum rules
Forumregeln
befi
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Wed Dec 14, 2005 12:05 pm

Design Submenue

Postby befi » Wed Dec 14, 2005 1:26 pm

Hallo,

ich habe ein Problem mit meinem Menue.

Das Menue hat folgenden Aufbau:

Level1
  Level2
      Level3

Das Layout von Level1 und Level2 kann ich mit mainlevel bzw. sublevel definieren.

Aber wie kann ich Farbe, Schrift etc. auf Level3 beeinflussen?

Hat jemand eine Idee?

Befi

de
Joomla! Ace
Joomla! Ace
Posts: 1477
Joined: Thu Aug 18, 2005 9:06 am
Contact:

Re: Design Submenue

Postby de » Wed Dec 14, 2005 6:08 pm

Die ganzen Level-Klassen sind eigentlich eher ueberfluessig... du kannst das einfach so als Regel angeben:

Code: Select all

ul.mainlevel li li a.sublevel { ... }


Hier wird dann a.sublevel als direktes oder indirektes Element von einem li, einem weiteren li innerhalb der Liste. Das wuerde zutreffen fuer ein Menue, dass auf einer Liste aufbaut (wie es eigentlich sein sollte).

Bei einem Menue mit dem menu style "Vertical" (Tabelle) kann das ausgegebene HTML wohl eher als abenteuerlich bezeichnet werden und deine Regel koennte vermutlich so aussehen:

Code: Select all

.moduletable table div div a.sublevel { ... }

(Funktioniert nur mit entsprechender Modul-Tabelle drum herum... sonst musst du in deinem template einen eigenen container auswaehlen)

Ich hoffe das hilft dir weiter.

befi
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Wed Dec 14, 2005 12:05 pm

Re: Design Submenue

Postby befi » Thu Dec 15, 2005 4:05 pm

Kannst Du das erste Beispiel bitte etwas ausführlicher machen, sonst raff ich es nicht.

Habe mir erstmal so beholfen, dass ich in mod_mainmenu.php für die sublevels neue css-classes definiere:

if ($level > 0) {
  switch ($level) {
  case 1:
  $menuclass = 'sublevel'. $params->get( 'class_sfx');
  break;
 
  case 2:
  $menuclass = 'sublevel2'. $params->get( 'class_sfx');
  break;
 
  case 3:
  $menuclass = 'sublevel3'. $params->get( 'class_sfx');
  break;
 
  case 4:
  $menuclass = 'sublevel4'. $params->get( 'class_sfx');
  break;
 
  default:
  $menuclass = 'sublevel5'. $params->get( 'class_sfx');
  break;
  }
  }


Leider funktionieren damit nicht mehr alle anderen Templates.

Gruss
Befi

de
Joomla! Ace
Joomla! Ace
Posts: 1477
Joined: Thu Aug 18, 2005 9:06 am
Contact:

Re: Design Submenue

Postby de » Thu Dec 15, 2005 5:34 pm

Also das erste Beispiel funktioniert ja leider nicht mit dem normalen mainmenu Modul, da es Sub-Menue Eintraege nur beim menu style "Vertical" unterstuetzt... aber gluecklicherweise gibt es diverse andere Menue-Module.
(Eins davon ist mein "extended menu": http://forum.joomla.org/index.php/topic,10389.0.html)
Da Listen in jedem Fall zu bevorzugen waeren, wuerde ich dir vorschlagen ein anderes Modul zu verwenden... natuerlich sind die meisten Templates nur fuer die Standard-Tabelle ausgelegt und wuerden eine Veraenderung noetig machen... wenn du das vermeiden moechtest, koenntest du auch hier mein "extended menu" und eine eigene menu patTemplate Datei in deinem Template verwenden (Eine Beispiel menu.html ist in der Zip-Datei enthalten). in dem Fall wuerde nur fuer dein Template ein anderes HTML erzeugt.

Zur Erklaerung meines ersten Beispiels:
So saehe z.B. vereinfacht das HTML aus:

Code: Select all

<ul class="mainlevel">
  <li><a href="..." class="mainlevel">Menu 1</li>
  <li><a href="..." class="mainlevel">Menu 2
      <ul>
        <li><a href="..." class="sublevel">Menu 2.1</li>
        <li><a href="..." class="sublevel">Menu 2.2</li>
        <li><a href="..." class="sublevel">Menu 2.3
          <ul>
            <li><a href="..." class="sublevel">Menu 2.3.1</li>
            <li><a href="..." class="sublevel">Menu 2.3.2</li>
          </ul>
        </li>
      </ul>
   </li>
  <li><a href="..." class="mainlevel">Menu 3</li>
</ul>


Dein CSS koennte also so aussehen:

Code: Select all

ul.mainlevel a {
  display: block;
  color: white;
  background-color: red;
}
ul.mainlevel li a.sublevel {
  background-color: green;
}
ul.mainlevel li li a.sublevel {
  background-color: blue;
}


Alternativ zu den letzten beiden Regeln kannst du auch folgendes verwenden:

Code: Select all

ul.mainlevel a.sublevel {
  background-color: green;
}
ul.mainlevel ul a.sublevel {
  background-color: blue;
}


Das Resultat sollte sein, dass die Hintergrund farbe fuer das 1.Level rot, das 2.Level gruen und beim 3.Level blau erscheint. (Die Farbkombination kam mir irgendwie bekannt vor)

Ich hoffe anhand der Struktur wird dir das etwas klarer.

befi
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Wed Dec 14, 2005 12:05 pm

Re: Design Submenue

Postby befi » Sat Dec 17, 2005 9:24 am

Hallo,

ich habs kapiert und mit deinem Modul ausprobiert. Hat funktioniert. :).

Vielen Dank
Befi

thiessi
Joomla! Apprentice
Joomla! Apprentice
Posts: 22
Joined: Tue Nov 07, 2006 8:06 am

Re: Design Submenue

Postby thiessi » Sun Oct 28, 2007 7:45 pm

Übrigens: Falls jemand nicht das Navigationsmodul als Liste, sondern Vertikal anzeigen lässt:

1. Level (Mainlevel): #id_box a.mainlevel
2. Level (Sublevel): #id_box a.sublevel
3. Level (Sublevel): #id_box div div a.sublevel

Gruß THies


Return to “Template, CSS und Designfragen 1.0.x”

Who is online

Users browsing this forum: No registered users and 2 guests