[TYPO3-german] Pulldown

[Stephan Schuler]

-----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.Schuler at 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:info at 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-bounces at lists.typo3.org [mailto:typo3-german-bounces at lists.typo3.org] Im Auftrag von Lina Wolf
Gesendet: Freitag, 23. Juli 2010 14:06
An: typo3-german at 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-----