Dropdown - Menü

GuardianAngel93 · 31. August 2012

Hallo zusammen

Ich darf für einen Jugendchor eine Homepage machen. Alles schön gemacht in HTML, jedoch stehe ich jetzt an einem Problem an und zwar möchte ich für die Gallery ein Dropdown menü erstellen. Sprich ich möchte, wenn man mit der Maus drauf fährt, das eine liste Herunterfällt mit den Namen der alben, welche ich dann ganz normal als Link verwenden kann.

Ähnlich wie von www.adobe.com einziger Unterschied: ich möchte, das es "sanft" ein und ausgeblendet wird.

Das Menü besteht momentan aus Folgenden Elementen:
Home | Wir Stellen Uns Vor | Gallery | Songs | News | Kontakt | Links

Ich hoffe Ihr wisst was ich meine und das Ihr mir Helfen könnt!

Gruss

Cave Johnson · 31. August 2012

Da wirst du dich wohl mit Javascript auseinandersetzen müssen (ich glaube zumindest, dass ein sanftes Einblenden nur mit CSS nicht möglich ist (CSS3 evtl.)). Google mal nach jquery dropdown, da findest du Haufenweise Beispiele:

Das wäre sowas wie du es suchst: http://www.instantshift.com/demo/dropdown_menu/

http://www.smashingapps.com/2012/04/05/15-handpicked-jquery-drop-down-menus-tutorials.html
http://slodive.com/web-development/best-jquery-dropdown-menus/

GuardianAngel93 · 31. August 2012

Danke für die schnelle Antwort.
Ich hoffe jedoch, das dies auch via Java Scrjpt machbar ist?
Dann könnte ich mir eher sicher sein, das 2 verschiedene Skrjpte auf einer Seite harmornierend Funktionieren.
Oder ist das im allgemeinen mit JS und z.B. CSS auch möglich?

Daaron · 31. August 2012

Animation via CSS3 ist möglich, ausgenommen IE<10 sowie deutlich überlagerte Versionen der anderen Browser.
Beispiel-Link siehe: https://www.computerbase.de/forum/t...dieser-seite-erstellen.1097613/#post-12527304

JS ist ein Krampf. Da verbringt man noch einmal genau so viel Zeit damit, ein No-JS-Fallback zu schreiben, wie man für die eigentliche Animation gebraucht hat... oder länger.

Edit: Was hat JS mit CSS zu tun? JS ist eine Programmiersprache, CSS ist (eigentlich) nur eine Deklaration von Darstellungen. JS kann CSS manipulieren, das ist alles...

GuardianAngel93 · 31. August 2012

Okay danke.
Habe mir nun dies Rausgesucht wie nr. 2
http://www.webchief.co.uk/blog/simple-jquery-dropdown-menu/index.php#
kann ich diesen auch normal in den HTML code integrieren? sprich ohne ein Scrjpt oder ähnliches dazu nehmen muss?

Habe mal gehört das sich versiedene Scrjpt-Arten bzw. JS, CSS usw. untereinander stören können bzw. dass diese untereinander Fehlfunktionen auslösen können, ist dies wahr?

EDIT:

Habe nun doch noch ein anderes Scrjpt gefunden, so wie in der help.txt eingebunden. Jedoch sieht es Momentan so aus:

Uploaded with ImageShack.us

Ihr seht unter der Navigations-liste sind die Grauen Kästchen, und ganz richtig Funktionieren tut das Drop-Down auch nicht.
Könnt ihr mir evtl. bei dem Code (im HTML) helfen?
Die Aufteilung wäre:
Home | Wir Stellen Uns Vor | Gallery | Songs | News | Kontakt | Links

Wobei nur bei Gallery das drop-down benötigt würde für 9 Alben..

<body>
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.1.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
<li><a href="#"><span>Sub Item 1.3</span></a></li>
<li><a href="#"><span>Sub Item 1.4</span></a></li>
<li><a href="#"><span>Sub Item 1.5</span></a></li>
<li><a href="#"><span>Sub Item 1.6</span></a></li>
<li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.7.1</span></a></li>
<li><a href="#"><span>Sub Item 1.7.2</span></a></li>
</ul></div>
</li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 2</span></a></li>
<li><a href="#"><span>Sub Item 3</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Product Info</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Sub Item 2</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
<li><a href="#"><span>Sub Item 5</span></a></li>
<li><a href="#"><span>Sub Item 6</span></a></li>
<li><a href="#"><span>Sub Item 7</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Help</span></a></li>
<li class="last"><a href="#"><span>Contacts</span></a></li>
</ul>
</div>

Daaron · 1. September 2012

GuardianAngel93 schrieb:
Okay danke.
Habe mir nun dies Rausgesucht wie nr. 2
http://www.webchief.co.uk/blog/simple-jquery-dropdown-menu/index.php#
kann ich diesen auch normal in den HTML code integrieren? sprich ohne ein Scrjpt oder ähnliches dazu nehmen muss?

HTML ist eine Auszeichnungssprache. Im Endeffekt deklariert HTML nur, was du darstellen willst, nicht wie du es darstellen willst. Es gibt da einige Inkonsistenzen, wo über HTML auch das Wie beantwortet wird, aber primär sagt HTML nur das Was aus.
Du kommst nie um CSS herum und, wenn es um Animationen geht, kaum um JS. CSS3-Animationen sind noch lange nicht flächendeckend verfügbar und bei weitem nicht so flexibel wie JS.

Eine möglichst einfache Variante der Navigation (HTML5+CSS) ist:

HTML:

<nav>
 <ul class="level_1">
   <li><a href="#">Punkt 1</a></li>
   <li><a href="#">Punkt 2</a></li>
   <li>
     <a href="#">Punkt 3</a>
     <ul class="level_2">
      <li><a href="#">Punkt 3.1</a></li>
      <li><a href="#">Punkt 3.2</a></li>
     </ul>
   </li>
 </ul>
</nav>

Code:

ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
.level_1 li
{
float: left;
}
.level_2 li
{
float: none;
}
ul.level_2
{
 position: absolute;
 display:none;
}
li:hover ul
{
display: block;
}

So als Quick&Dirty - Hack ohne Animationsfaxen. Wenn du unbedingt Animationen hast, dann geh entweder den JavaScript - Weg und such dir ein Tutorial, oder wähle den CSS3-Weg und bau nach, was ich bei playport-dresden.de gemacht habe.
Sei dir aber der Vor- und Nachteile beider Varianten bewusst. Mach dir erst einmal klar, was bei der Dreifaltigkeit aus HTML, CSS & JS eigentlich welche Bedeutung und Aufgabe hat.

Suche

Dropdown - Menü

GuardianAngel93

Lieutenant

Cave Johnson

Gast

GuardianAngel93

Lieutenant

Daaron

Fleet Admiral

GuardianAngel93

Lieutenant

Daaron

Fleet Admiral

Ähnliche Themen