Navigation per CSS Problem.

[firevegeta]

Schönen guten Tag meine Damen und Herren :)


Ich habe eine frage, denn ich glaube es liegt an mir, das ich mich nicht ganz so auskenne mit CSS da ich erst anfange :)

Ich Arbeite mit Contao, das ist aber eher nebensächlich :)

Ich möchte eine Navigation via CSS formatieren. Funktioniert auch soweit ganz gut.
Nur komme ich gerade auf keinen Grünen Zweig denn momentan ist es ja so das man wenn man über "Firstlevel" drüber fährt die Untermenüs aufklappen.
Ich möchte aber erst bei einem Mausklick die Untermenüs direkt darunter angezeigt werden.
Aber irgendwie möchte das nicht so wie ich :)
Daher melde ich mich nun hier und würde mich freuen, wenn ihr mir helfen könntet.

.mod_navigation, .mod_navigation ul.level_1 { padding: 0; margin: 0; list-style: none;}
.mod_navigation a { display: block; width: 10em;}
.mod_navigation li { float: left; width: 10em;}
.mod_navigation li ul { position: absolute; width: 10em; left: -999em;}
.mod_navigation li:hover ul.level_2 { left: auto;}
.mod_navigation li ul ul { margin: -1em 0 0 10em;}
.mod_navigation, .mod_navigation ul { padding: 0; margin: 0; list-style: none; line-height: 1;}
.mod_navigation li:hover ul ul { left: -999em;}
.mod_navigation li:hover ul ul{ left: -999em;}
.mod_navigation li:hover ul, .mod_navigation li li:hover ul { left: auto;}
.mod_navigation li:hover ul ul, .mod_navigation li:hover ul ul ul { left: -999em;}
.mod_navigation li:hover ul, .mod_navigation li li:hover ul, .mod_navigation li li li:hover ul { left: auto;}
.mod_navigation li:hover ul ul, .mod_navigation li:hover ul ul ul, .mod_navigation li:hover ul ul ul ul { left: -999em;}
.mod_navigation li:hover ul, .mod_navigation li li:hover ul, .mod_navigation li li li:hover ul, .mod_navigation li li li li:hover ul { left: auto;}

 

[Zejo]

Ich habe eine frage, denn ich glaube es liegt an mir, das ich mich nicht ganz so auskenne mit CSS da ich erst anfange :)

Na ja, ich glaube es liegt nicht an dir, sondern an den begrenzten Möglichkeiten der "normalen" Pseudoelemente in CSS 2.1

Ich Arbeite mit Contao, das ist aber eher nebensächlich :)

Hmm, ob das so nebensächlich ist? Denn du brauchst dort doch keine großen HTML und CSS Kenntnisse, oder? Denke mal diese Klassen, die unten zu finden sind, hat dir Contao automatisch angelegt, oder?

Nur komme ich gerade auf keinen Grünen Zweig denn momentan ist es ja so das man wenn man über "Firstlevel" drüber fährt die Untermenüs aufklappen.
Ich möchte aber erst bei einem Mausklick die Untermenüs direkt darunter angezeigt werden.

Hmm, das ist sozusagen die Königsklasse der Navigationsgestaltung, na ja fast. ;-)

Da gibt es meines Wissens nur 2 Möglichkeiten:

1. Mit Javascript und den Event-Handlern (onclick usw.)
2. Das neue Pseudoelement von CSS3 ( :target bzw. :not(:target) )

Beide Möglichkeiten haben ihre Vor -und Nachteile. Bei Javascript muss Javascript beim Benutzer im Browser aktiviert sein und bei :target muss der Browser das Element kennen.
Beide Möglichkeiten setzen jedoch fortgeschrittenes Wissen voraus.

Wie gesagt, ob Contao sowas automatisch erzeugen kann, weiss ich nicht, da ich dieses CMS noch nicht groß benutzt habe.

 

[Tronjer]

Wobei die für die Navigation angegebenen Verschiebungen unsauber sind. Da muss man entweder mit overflow:hidden arbeiten, oder es bilden sich Scrollbalken.

Davon abgesehen würde ich auch JavaScript empfehlen. Denn je nach Zustand soll das Menü beim Klick ja auf- oder zuklappen.

 

[firevegeta]

Hallo Leute :)

Also ich habe es nun doch mit Javascript gemacht da es doch deutlich einfacher ist.

Wie bekomme ich das nun hin das die Seiten die nur eine Ebene haben (level_1) trotzdem anklickbar sind bzw. verlinkt sind?
und das die "level_1" mit mehrere Ebenen auch anklickbar sind, aber diese dann trotzdem aufklappen ?!
Ich hoffe es war einigermaßen verständlich wie ich es erklärt habe :)




So sieht momentan mein Code aus... (Sehr einfach und vlt leicht unsauber, aber um die funktionen zu testen reicht das.)


Java Script:

<script type="text/javascript"><!-- 
var listSubMenus = $$('.mod_navigation ul.level_1 a.submenu');
var count = 0; // Zählvariable für die Schleife
var cat = 0; // Kategorienummer


listSubMenus.each(function(el){
  if (el.hasClass('trail')){ // ist das Element das aktive?
    cat = count; // dann ist die richtige Kategorie gefunden
  }
  count = count + 1;
});


var webShopNav = new Accordion($$('.mod_navigation ul.level_1 a.submenu'), $$('.mod_navigation ul.level_2'), {
  
  display: cat, // Die Kategorie, welche geöffnet wird
  alwaysHide: true, // true = Das Akkordeon kann komplett geschlossen werden
  opacity: false, // Überblendeffekte ein- und ausschalten
  onActive: function(toggler, el){ // Event, welches ausgeführt wird, wenn ein Untermenü eingeblendet wird
    toggler.removeClass('submenu'); // Klasse submenu wird entfernt
    toggler.addClass('open'); // Klasse open wird wird hinzugefügt
  },
  onBackground: function(toggler, el){ // Event beim Ausblenden
    toggler.removeClass('open'); // Klasse open wird wieder entfernt
    toggler.addClass('submenu'); // Klasse submenu wird wieder hinzugefügt -> entspricht dem Ausgangszustand
  }
});


$$('.level_1 > .sibling > a').addEvent('click',function(){
//toller Code, der dann das passende Element öffnet und alle anderen schließt, z.B. indem du CSS-Klassen zum Element hinzufügst und entfernst
return false; //damit der Link nicht mehr die Seite wechselt
});
--></script>

CSS Code:

.mod_navigation {	display: block;    
	left: -40px;    
	list-style: none outside none;    
	margin: 0;    
	position: absolute;    
	text-align: center;    
	top: 0;    
	z-index: 5;}
}
.mod_navigation ul {
  margin:0;
  list-style:none
}
.mod_navigation ul li {
  display:block;
  border-bottom:1px dotted #000
}
.mod_navigation ul li.last {
  border-bottom:none
}
.mod_navigation ul li a {
  display:block;
  padding:5px 5px 5px 20px;
  color:#000;
  text-decoration:none;
  
}
}


}
.mod_navigation ul li a.active,
.mod_navigation ul li a.trail {
  font-weight:bold;
  color:#000
}
.mod_navigation ul li a:hover {
  color:#000
}
.mod_navigation ul li ul {
  padding:0;
}
.mod_navigation ul li ul li {
  border-bottom:none
}
.mod_navigation ul li ul li a {
  padding-left: 40px;
  
}