kostenloser Webspace werbefrei: lima-city

Aufklappbare Liste per JS oder CSS

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   vctb

   vctb hat kostenlosen Webspace.

   13:47, 9.8.2012

   Hallo,
   
   ich bräuchte mal Hilfe. Ich möchte Inhalte einer Datenbank in eine aufklappbare Liste ausgeben lassen, da die Datenbank nicht gerade klein ist.
   
   Das Schema wie ich es ausgeben lassen möchte sieht wie folgt aus:
   
   Kat A:
   A:
   A...
   A...
   B:
   B....
   ...
   Kat B:
   ...
   Die Katergorien sollen aufklappbar sein und dann die Unterkategorien zusätzlich auch. Ich habe es mit CSS und DIV's schon versucht, aber da sieht es nicht so aus wie ich es möchte.
   
   Gibt es da eine Möglichkeit es über javascript oder CSS hinzubekommen, so dass es auch auf allen Browsern läuft (vorausgesetzt es ist aktiviert)?
   
   Gruß vctb

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. g****e

   13:58, 9.8.2012

   Mit jQuery wirst du denk ich schnelle erfolge erzielen :)
   Hiermit sollte das ganz einfach für dich sein. Stichwort wäre .slideToggle()
   
   Liebe Grüße
4. Autor dieses Themas

   vctb

   vctb hat kostenlosen Webspace.

   17:02, 9.8.2012

   Danke für den Tip werd ich mir mal anschauen...

5. kgreen

   

   kgreen hat kostenlosen Webspace.

   16:51, 10.8.2012

   Also CSS und JavaScript laufen auf allen Browsern.
   
   Und sofern Du schon mit CSS angefangen hast, würde ich es auch damit zu Ende bringen.
   Natürlich ist JavaScript / jQuery eine Möglichkeit, aber wenn Dir damit noch die Erfahrung fehlt, empfehle ich lieber CSS zu nehmen.
   
   Es gibt hierzu auch unzählige Lösungen im Internet und das Deine Vorstellung nicht dabei sein sollte, kann ich mir nur schwer vorstellen.
   
   Zeige Deine Lösung bzw. Deinen bisherigen Ansatz mit CSS hier einmal auf.
   Hast Du die Idee schon einmal irgendwo in Aktion gesehen und kennst noch die Adresse?
   
   Alleine auf dieser Seite - http://www.dynamicdrive.com/style/csslibrary/category/C2/ - solltest Du schon eine Möglichkeit finden.
   
   Beitrag zuletzt geändert: 10.8.2012 16:55:31 von kgreen
6. Autor dieses Themas

   vctb

   vctb hat kostenlosen Webspace.

   18:37, 10.8.2012

   Nunja javascript läuft ja leider nicht auf allen Browsern, zumindest nicht wenn es gesperrt ist, deshalb wollte ich davon Abstand halten.
   Habe es jetzt aber per js gelöst und eine Alternative für deaktivierte js Browser die zwar nicht so funktioniert wie ich es wollte, aber man kann ja auch js wieder aktivieren...
   
   Achja ich habe nicht viel Erfahrung mit js, da mich die Möglichkeit des deaktivierens immer stört, deshalb benutze ich eigentlich für alles CSS und PHP.

7. ploco

   

   ploco hat kostenlosen Webspace.

   23:25, 11.8.2012

   vctb schrieb:
   Nunja javascript läuft ja leider nicht auf allen Browsern, zumindest nicht wenn es gesperrt ist, deshalb wollte ich davon Abstand halten.
   Habe es jetzt aber per js gelöst und eine Alternative für deaktivierte js Browser die zwar nicht so funktioniert wie ich es wollte, aber man kann ja auch js wieder aktivieren...

   Als reine CSS-Lösung würde mir nur folgendes in den Sinn kommen:
   

   <ul>
   	<li>
   		<a href="#a">
   			Kat A
   			<ul>
   				<li>A</li>
   				<li>A</li>
   				<li>A</li>
   			</ul>
   		</a>
   	</li>
   	<li>
   		<a href="#b">
   			Kat B
   			<ul>
   				<li>B</li>
   				<li>B</li>
   				<li>B</li>
   			</ul>
   		</a>
   	</li>
   </ul>

   ul li a ul {
   	display: none;
   }
   ul li a:active ul {
   	display: block;
   }
   ul li a {
   	text-decoration: none;
   	color: inherit;
   }

   
   Jeder Browser, der nicht gerade der Internet-Steinzeit entspringt, sollte das unterstützen. Bezüglich des Stylings solltest du hiermit auch sehr viele Freiheiten haben.
   Mit CSS3-Animationen kannst du für moderne Browser noch eine optisch ansprechender Version fabrizieren.
   
   Beitrag zuletzt geändert: 11.8.2012 23:27:04 von ploco
8. Autor dieses Themas

   vctb

   vctb hat kostenlosen Webspace.

   21:44, 12.8.2012

   Ich habs per Div gelöst, die die Größe beim anklicken ändern. Wie gesagt es funktioniert aber sieht nicht so aus wie ich es haben wollte... Ich werde die Lösung mit Listen mal anschauen. Vielen Dank.

9. azooo

   azooo hat kostenlosen Webspace.

   17:05, 15.8.2012

   Superfish: http://users.tpg.com.au/j_birch/plugins/superfish/
   
   JQuery DropDown Menü. Einfach auf deine <ul> und <li> die geforderten Klassen anwenden und die Javascript Dateien einbetten. Selber schon sehr oft genutzt und nie Probleme mit gehabt.

10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?