• 18.07.2025, 01:41
  • Register
  • Login

  • You are not logged in.

 

Gleitendes Dropdown-Menu auf Webseite

cuto8

Full Member

Gleitendes Dropdown-Menu auf Webseite

Thursday, April 2nd 2009, 11:55am

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?

This post has been edited 1 times, last edit by "cuto8" (Apr 2nd 2009, 11:56am)


Y0Gi

God

Thursday, April 2nd 2009, 12:58pm

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

cuto8

Full Member

Thursday, April 2nd 2009, 2:09pm

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

Thursday, April 2nd 2009, 5:25pm

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

Friday, April 3rd 2009, 10:00am

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

Friday, April 3rd 2009, 1:20pm

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:

Source code

 
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:

Source code

 
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)

Similar threads