Zum Inhalt springen
View in the app

A better way to browse. Learn more.
Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

"aufklappbares" Dynamisches Menü

Swiffe
in Webdesign

Empfohlene Antworten

Veröffentlicht

Hey Leute,

wie das bei angehenden Entwicklern so ist, gefällt einem die eigene Arbeit nach 10 Minuten nicht mehr. Nun hoffe ich das ihr mir helfen könnt. Ich möchte ein "aufklappbares" (dynamisches) Menü mittels CSS und eventuel PHP erstellen. Javascript behersche ich nämlich nicht. So sieht es aktuell aus:

menu.jpg

Das Ziel ist das in dem Rahmen die Oberpunkte mit der Grafik zu sehen sind und bei einem MouseOver soll sich die entsprechenden Unterpunkte nach unten hin ausklappen. Kennt jemand da ein Tutorial bzw. eine Quelle von der ich sowas ableiten kann?

greetz Swiffe

Rein mit CSS und HTML ist das nicht möglich, denn das sind statische Komponenten. Also man kann HTML und CSS Eigenschaften via JavaScript manipulieren, d.h. in Deinem Fall musst Du eben bei einem MouseOver ein JavaScript starten, dass den Layer (div oder span) sichtbar schaltet und langsam vergrößert, ebenso das ganze wenn Du den Fokus verlierst rückgängig macht.

Alternativ kannst Du auch Flash für so etwas einsetzen

Als JavaScript-Einstieg könnte das was sein:


<script type=text/javascript>

function punkt1() {

 if(document.getElementByID('test1').style.visibility=='hidden') {

  document.getElementByID('test1').style.visibility='visible';

  document.getElementByID('test2').style.visibility='hidden';

  document.getElementByID('test3').style.visibility='hidden';

 }

}

function punkt2() {

 if(document.getElementByID('test2').style.visibility=='hidden') {

  document.getElementByID('test1').style.visibility='hidden';

  document.getElementByID('test2').style.visibility='visible';

  document.getElementByID('test3').style.visibility='hidden';

 }

}

function punkt3() {

 if(document.getElementByID('test3').style.visibility=='hidden') {

  document.getElementByID('test1').style.visibility='hidden';

  document.getElementByID('test2').style.visibility='hidden';

  document.getElementByID('test3').style.visibility='visible';

 }

}

</script>

<a href=# onclick=punkt1()>punkt 1</a>

<div id="test1">

Menu 1

</div>

<a href=# onclick=punkt2()>punkt 2</a>

<div id="test2">

Menu 2

</div>

<a href=# onclick=punkt3()>punkt 3</a> 

<div id="test3">

Menu 3

</div>

Bearbeitet von flashpixx

  • Autor

ich habe noch eine andere lösung gefunden:

#navi li ul { display:none; }

#navi li:hover ul { display:block; }

allerdings verhindern andere konfigurationen in der css datei das die obrigen erfüllt werden können.

Javascript behersche ich nämlich nicht.

Dann benutze ein Framework, um Dir das Code-Schreiben zu erleichtern, z.B. jQuery ;)

Das Ausklappen könnte dann mit click- statt mouseover-Event folgendermaßen aussehen:


$("#navi li").click(function () {

	$(this).next("ul").slideToggle("slow");

});

(ungetestet)

  • Autor

danke an alle erstmal für eure posts. Die Animationsidee habe ich auf später verworfen da es mit 

#navi li ul { display:none; }

#navi li:hover ul { display:block; }

auch recht schön aussieht.

Kann ich ein hover auch auf eine Überschrift anwenden?

Laut Css4you geht das:

Normaler Weise wird :hover für Hyperlinks eingesetzt, laut der W3C-Spezifikation ist diese Eigenschaft aber für alle Elemente zugelassen und so kannst du Mouseover-Effekte z.B. auch für Formularfelder, Tabellenzellen und <div>-Container definieren.

bei mir funktioniert das allerdings nicht.

Bearbeitet von Swiffe
text hinzugefügt

Glossy Accordion könnte vllt ein Ansatz für dich sein.

Kommt auf Code und Browser an. IE 6 beispielsweise hat hover nur bei a-Tags zugelassen. Wie es danach ausschaut, weiß ich nicht. Ohne den Code zu kennen ist aber auch sonst alles recht spekulativ. Rein auf CSS-Basis ist so ein dropdown allerdings etwas unschön und nicht so einfach, wenn es in allen Browsern funktionieren soll.

in der schule haben wir das drop down menü gemacht

(hier als beispiel:)

im html eine box (div id="navigation")

<body>

<div id="navigation">

<ul id="ebene01">

<li id="navi01" class="aktuell"><a href="Pferde.html">Pferde</a>

<ul class="ebene02">

<li id="navi0101"><a href="Hufe.html">Hufe</a></li>

<li id="navi0102"><a href="Ponys.html">Ponys</a></li>

<li id="navi0103"><a href="Fell.html">Fell</a></li>

</ul>

</li>

<li id="navi02"><a href="Hunde.html">Hunde</a>

<ul class="ebene02">

<li id="navi0201"><a href="Pfoten.html">Pfoten</a></li>

<li id="navi0202"><a href="Welpen.html">Welpen</a></li>

<li id="navi0203"><a href="Fell.html">Fell</a></li>

</ul>

</li>

<li id="navi03"><a href="Katzen.html">Katzen</a>

<ul class="ebene02">

<li id="navi0301"><a href="Tatzen.html">Tatzen</a></li>

<li id="navi0302"><a href="Babykatzen.html">Babykatzen</a></li>

<li id="navi0303"><a href="Schnurbarthaare.html">Schnurbarthaare</a></li>

</ul>

</li>

</ul>

</div> <!-- navigation schließt --></div>

</body>

im css dann (externes stylesheet! also im html head:<link rel="stylesheet" type="text/css" href="Navi.css" media="screen" />)

* {margin:0px;

padding:0px;}

html {height:101%;}

body {font-size:100.01em;}

#navigation {font-family:Verdana, Arial, Helvetica, sans-serif;

overflow:hidden;

background-color:#FF9;

font-size:12pt;

margin-top:9px;}

#navigation li {float:left;

list-style-type:none;

width:auto;

padding:5px;}

#navigation li a {text-decoration:none;

color:#000;

display:block;}

#navigation li a:hover,

#navigation li a:focus,

#navigation li.aktuell a {background-color:ff9;

color:#000;}

#navigation li li {clear:both;}

#navigation li ul {display:inline;

position:absolute;

top:-9999px;

left:-9999x;

width:0px;

height:0px;

background-color:transparent;}

#navigation li:hover ul {position:absolute;

top:auto;

left:auto;

width:auto;

height:auto;

color:#fff;

background-color:ff9;

display:block;}

#navigation li:hover ul a {color:#000;}

#navigation li ul li a:hover {color:#F99;}

hoffe es funktioniert bei dir =)

bei mir ist leider am linken rand nen abstand aber den bekomm ich noch weg =)

Erstelle ein Konto oder melde dich an, um einen Kommentar zu schreiben.

Zur Themenliste gehen

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.