-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA256
Hallo zusammen.
Das Prinzip ist eigentlich recht einfach:
HTML:
<ul class="level1">
<li class="level1">
<a href="#" class="lavel1">A</a>
<ul class="level2">
<li class="level2">
<a href="#" class="level2">1</a>
</li>
<li class="level2">
<a href="#" class="level2">2</a>
</li>
<li class="level2">
<a href="#" class="level2">3</a>
</li>
</ul>
</li>
<li class="level1">
<a href="#" class="level1">B</a>
<ul class="level2">
<li class="level2">
<a href="#" class="level2">1</a>
</li>
<li class="level2">
<a href="#" class="level2">2</a>
</li>
<li class="level2">
<a href="#" class="level2">3</a>
</li>
</ul>
</li>
</ul>
CSS:
li.level1 ul.level2 {
display:none;
}
li.level1:hover ul.level2,
li.level1-hover ul.level2 {
display:block;
}
Javascript (jQuery):
jQuery('li.level1').each(function(liId, liDomElement) {
jQuery(liDomElement).hover(
function() { // mousein
jQuery(liDomElement).addClass('level1-hover');
},
function() { //mouseout
jQuery(liDomElement).removeClass('level1-hover');
}
);
});
Das HTML baut eine Sitemap mit zwei Haupt- und je drei Unterpunkten.
* A
** 1
** 2
** 3
* B
** 1
** 2
** 3
Das CSS sorgt dafür dass im Mouseoutzustand die Unterpunkte ausgeblendet und im
Mosueinzustand die Unterpunkte eingeblendet bleiben.
Das JS fügt eine explizite li-hover-Klasse hinzu, weil ältere IEs mit li:hover
nicht können.
Haben wir auf unsere Seite natürlich auch so, Link siehe Signatur.
Grüße,
Stephan Schuler
Web-Entwickler
Telefon: +49 (911) 539909 - 0
E-Mail: stephan.schu...@netlogix.de
Internet: http://media.netlogix.de
- --
netlogix GmbH & Co. KG
IT-Services | IT-Training | Media
Andernacher Straße 53 | 90411 Nürnberg
Telefon: +49 (911) 539909 - 0 | Fax: +49 (911) 539909 - 99
E-Mail: mailto:i...@netlogix.de | Internet: http://www.netlogix.de/
netlogix GmbH & Co. KG ist eingetragen am Amtsgericht Nürnberg (HRA 13338)
Persönlich haftende Gesellschafterin: netlogix Verwaltungs GmbH (HRB 20634)
Umsatzsteuer-Identifikationsnummer: DE 233472254
Geschäftsführer: Stefan Buchta, Matthias Schmidt
- -----Ursprüngliche Nachricht-----
Von: typo3-german-boun...@lists.typo3.org
[mailto:typo3-german-boun...@lists.typo3.org] Im Auftrag von Lina Wolf
Gesendet: Freitag, 23. Juli 2010 14:06
An: typo3-german@lists.typo3.org
Betreff: Re: [TYPO3-german] Pulldown
JavaScript ist nicht per se SEO unfreundlich. Die meisten Pulldown Menüs, die
JavaScrip einsetzen sind eigendlich ne Art Sitemap, bei der die inaktiven
Ebenen per CSS eingeklappt sind und per CSS ausgeklappt werden.
Wenn Du es ganz JavaScroipt frei möchstest, sieh Dir mal dieses an:
http://eti-brandenburg.de/
Ist ein ganz normales HMENU mit TMENU und expAll =1 auf der ersten Ebene.
Der rest ist pures CSS mit Hack für den IE6 (das war vor 2 Jahren, heute kannst
DU ihn vielleicht ignorieren)
Du kannst aber auch ein solches Menü machen und das Pulldown per JavaScript
realisieren. wichtig ist für Suchmaschinen in der Regfel nur, dass diese ohne
JavaScript zu interpretieren den Links folgen können. Das kannst Du mit einem
LYNX Browser o.ä. ausprobieren.
-----BEGIN PGP SIGNATURE-----
Version: PGP Universal 3.0.0 (Build 2881)
Charset: Windows-1252
wpUDBQFMSa7mpp0IwsibV8MBCIQbBACpNmyU7RgsSHxM3S6mJ63pZ8PKSUDIgJQu
+Pw9GLvBcBqBLiIvxgO660Ejxl1F/zAc3fI0mNTI1e2w+VOaaySLwe3mEZ+NboLR
5x4oF3lGBTnnWyoGSQCScNesPa3d3NlRZnwbIP7z5Hm6rkfVsDfpPbEjGN7kFYER
TOKrK9APfw==
=Q3Ek
-----END PGP SIGNATURE-----
_______________________________________________
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
