• 19.04.2024, 01:46
  • Registrieren
  • Anmelden

  • Sie sind nicht angemeldet.

 

Gleitendes Dropdown-Menu auf Webseite

Lieber Besucher, herzlich willkommen bei: Aqua Computer Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

cuto8

Full Member

Beiträge: 552

Gleitendes Dropdown-Menu auf Webseite

Donnerstag, 2. April 2009, 11:55

Servus!

Ich soll für meinen alten Herrn eine Webseite erstellen, was prinzipiell nicht so das Problem wäre. Die fingen erst an, als er über diese Webseite gestollpert ist, denn "das sieht schön aus, wie die Menüs da runtergleiten". Da die Realisierung von sowas allerdings meine HTML/Javascript-Kentnisse übersteigt, erhoffe ich mir hier Hilfe.
Zur Demonstration einfach mal mit dem Cursor in der o.g. Webseite über "Nützliches" gehen. Mouseover, visibility, z-index und a:hover kenn ich wohl - das Problem ist der Effekt, der die Animation des "Runtergleitens" der Menüs realisiert. Kann mir da jemand weiterhelfen?

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »cuto8« (2. April 2009, 11:56)


cuto8

Full Member

Beiträge: 552

Donnerstag, 2. April 2009, 14:09

Danke schon mal, aber gibts auch eine Möglichkeit mit weniger als 4377 Zeilen Javascript :whistling:
Ist ja nicht so, als wäre ich faul, aber ich versteh zumindest gerne den Ansatz, der hinter der Lösung steht :huh:

elbarto`

God

Beiträge: 7 044

Donnerstag, 2. April 2009, 17:25

ich blick da auch nicht durch, aber ich könnte mir vorstellen das es evtl einfach mit ner schleife geht in der man die höhe von nem div langsam erhöht

cuto8

Full Member

Beiträge: 552

Freitag, 3. April 2009, 10:00

Das hatte ich mir auch schon überlegt. Allerdings kann ich mir dann auch vorstellen, dass das ganze auf unterschiedlich schnellen Rechnern dann auch unterschiedlich schnell ablaufen würde...

Y0Gi

God

Beiträge: 12 708

Freitag, 3. April 2009, 13:20

jQuery ist eine Bibliothek. Ohne eine solche machen JavaScript an sich und speziell AJAX und Effekte praktisch keine Freude in der Entwicklung und Browserkompatibilität.

Was du willst, ist nach dem Einbinden von jQuery (kann man übrigens zur Ladezeit-Optimierung auch von Google beziehen) mit drei Zeilen erledigt:

Quellcode

 
1
2
3

$('#navigation li a').click(function() {
    $(this).find('ol').slideDown();
});


Damit wird ein Untermenü innerhalb eines Navigationsmenüs ausgefahren. Folgende HTML-Struktur setzt das in etwa voraus:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<ol id="navigation">
  <li><a href="#">1</a>
    <ol>
      <li><a href="#">1.1</a></li>
      <li><a href="#">1.2</a></li>
    </ol>
  </li>
  <li><a href="#">2</a>
    <ol>
      <li><a href="#">2.1</a></li>
      <li><a href="#">2.2</a></li>
      <li><a href="#">2.3</a></li>
    </ol>
  </li>
  <li><a href="#">3</a></li>
</ol>

Die dann noch hübsch mit CSS (nach Wunsch horizontal) formatiert (`display: block;` für die Anker bietet sich stark an, für weiteres siehe den A List Apart-Artikel "Taming Lists") und fertig ist ein sehr schlankes, flexibles Aufklappmenü mit Schnickschnack-Effekt.
This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Ähnliche Themen