|
|||
css menü ein und ausklappen
hallo,
ich habe in vielen foren und einer lösung unter google ohne erfolgt gesucht um eine vertikale navigation zu erstellen, die wie folgt aussieht: ich möchte nur mit css ( IE / FF / Opera ) gerecht ohne JS eine navigation haben, die wie folgt aussieht: menü: - eintrag 1 - eintrag 2 - eintrag 3 wenn man mit der maus auf eintrag 2 klickt sollen die unterpunkte angezeigt werden solange eintrag 1 oder eintrag 3 usw. angeklickt wird also bei eintrag 2.1 und eintrag 2.2 sollen auch unterpunkte von eintrag 2 zu sehen sein: - eintrag 1 - eintrag 2 - eintrag 2.1 - eintrag 2.2 - eintrag 3 wenn aber jetzt auf eintrag 3 geklickt wird soll eintrag 2 mit den unterpunkten geschlossen werden und die unter punkte von eintrag 3 sich öffnen - eintrag 1 - eintrag 2 - eintrag 3 - eintrag 3.1 - eintrag 3.2 ich habe mit visiblity: none; sowie visiblity: visible bzw. display: block und display: none versucht aber ohne erfolg meine bisherigen dummy daten sind : HTML-Code:
<div id="content"> <div class="arrowlistmenu" style="float: left;"> <h3 class="headerbar">Haupt Navigation</h3> <ul> <li><a href="index.php">Home</a></li> <li><a href="index.php?site=ueberuns">Über uns</a></li> <li><a href="index.php?site=modelle">Modelle</a> <ul id="modelle" style="display: none;"> <li><a href="index.php?site=modelle&id=damen">Damen</a></li> <li><a href="index.php?site=modelle&id=herren">Herren</a></li> </ul> </li> <li><a href="index.php?site=ambiente">Ambiente</a></li> <li><a href="index.php?site=honorar">Honorar</a></li> <li><a href="index.php?site=jobs">Jobs</a></li> <li><a href="index.php?site=anfahrt">Anfahrt</a> <ul id="anfahrt" style="display: none;"> <li><a href="index.php?site=anfahrt&id=karte">Anfahrtskarte</a></li> <li><a href="index.php?site=anfahrt&id=route">Routenplaner</a></li> <li><a href="index.php?site=anfahrt&id=weg">Wegbeschreibung</a></li> </ul> </li> <li><a href="index.php?site=kontakt">Kontakt</a></li> <li><a href="index.php?site=impressum">Impressum</a></li> </ul> </div> Code:
.arrowlistmenu { width: 180px; /*width of menu*/ } .arrowlistmenu .headerbar { font: bold 14px Arial; color: white; background: black url(../media/titlebar.png) repeat-x center left; margin-bottom: 0px; margin: 0px; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/ } .arrowlistmenu ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px; /*bottom spacing between each UL and rest of content*/ } .arrowlistmenu ul li { padding-bottom: 0px; /*bottom spacing between menu items*/ } .arrowlistmenu ul li a { color: #A70303; background: url(../media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/ display: block; padding: 0px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: bold; border-bottom: 1px solid #dadada; font-size: 90%; } .arrowlistmenu ul li a:visited { color: #A70303; } .arrowlistmenu ul li a:hover { /*hover state CSS*/ color: #A70303; background-color: #F3F3F3; } /* Second Level of Menu */ .arrowlistmenu ul ul li a:hover { color: black; background-color: #F3F3F3; } .arrowlistmenu ul ul li a:visited { color: #A70303; background-color: #F3F3F3; } .arrowlistmenu ul ul li { margin-left: 15px; } |
Sponsored Links |
|
||||
Gut ich nehm dir jetzt den Wind aus den Segeln: das was du vorhast ist nicht ohne JS oder dem Neuladen der Navigation möglich!
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Sponsored Links |
|
|||
hi,
wenn ich JS verwenden soll wie mache ich es denn? gibt es keinen problem bei IE und FF sowie OP Brwosern ? und was ist wenn JS deaktiviert ist? kenne mich mit JS nicht so gut aus sowie mit CSS vielen dank |
|
||||
Zitat:
2 Möglichkeiten: 1) Schande über die die kein JS aktiviert haben 2) Schreibe das Menü so, das wenn kein js da ist das menü komplett ausgeklappt ist.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
|||
ich habe das menü momentan so dass die untermenüs ausgeklappt sind und gerade möchte ich diese ja ändern
was den jQuery betrifft: habe einiges darüber gelesen aber wie ich und von wo ich herunterlade und einrichte um es zu nutzen keine ahnung, wenn du es sagst mit jQuery gibt es keine probleme für das was ich erreichen möchte... lg cakalman |
|
||||
binde einfach mal ans ende deines HTML Dokuments das folgende ein:
HTML-Code:
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4.1");</script> anschließend hast du schonmal jquery.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
|||
das problem habe ich mit php gelösst jedoch bleibt mir das lösen mit CSS, JS oder jQuery offen....
und um die zu schließen würde ich gerne einen ansatz haben wollen, aber wenn es mit php geht, was ich letzt endlich geschafft habe ist es auch keine frage mehr... lg abdullah |
|
||||
dadurch wird die navigation aber vollständig neugeladen nicht wahr?
Der Lösungsansatz für Javascript ist: du gibst dem Aktivierten Element beim anklicken eine Neue Klasse die das Menüanzeigt, solltest du nun auf einen neuen Punkt klicken so soll der alte "zugemacht" werden und der neue soll aufgeklappt werden.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hilfe bei CSS Menue gesucht | CSS_Beginner | CSS | 2 | 21.09.2009 18:03 |
Problem mit CSS Dropline menü | horst77 | CSS | 1 | 12.08.2009 12:49 |
herunterfahrendes Menü mit CSS | Pablo | CSS | 1 | 27.12.2007 18:07 |
CSS Menü - Buttonfrage | Ralgar | CSS | 6 | 01.12.2006 18:14 |
Menü mit CSS aber mit JS Animation? | xy2er | CSS | 6 | 20.03.2005 21:47 |