css drop down navigation probleme zu verstecken

bibifellow · 05.08.2009

Hallo ich habe eine Navigation erstellt in css und navi 02 hat ein Untermenü mit ul. Nun möchte ich die ul also das Untermenü verstecken und es soll nur beim draufdrücken aufgehen. Aber ich habe schon so viele Anleitungen und bekomme es nicht auf mein Navi anzuwenden. Wäre toll wenn mir jemand helfen würde. So viel Stunden und kein Erfolg.
Mein css
#navibereich {
color:#000000;
background-color:#999999;
height: 600px;
width: 200px;
position: fixed;
top: 130px;
}

mein html
<div id="navibereich">
<ul>
<li id="navi01"><strong>Startseite</strong></li>
<li id="navi02" title="Porträt"><a href="seite02.html">Porträt</a></li>
<ul class="dropdown">

<li id="button-7"><a href="#"><img class="spacer" src="images/spacer.gif" alt="Kinder" /></a></li>
<li id="button-8"><a href="#"><img class="spacer" src="images/spacer.gif" alt="Gruppen" /></a></li>
<li id="button-9"><a href="#"><img class="spacer" src="images/spacer.gif" alt="Familie" /></a></li>
</ul>

<li id="navi03" title="Hochzeit"><a href="seite03.html">Hochzeit</a></li>
<li id="navi04" title="Erotik"><a href="seite04.html">Erotik</a></li>
<li id="navi05" title="Werbung"><a href="seite05.html">Werbung</a></li>
<li id="navi06" title="Kunst"><a href="seite06.html">Kunst</a></li>
<li id="navi7" title="Referenzen"><a href="seite07.html">Referenzen</a></li>
<li id="navi08" title="Lebenslauf"><a href="seite08.html">Lebenslauf</a></li>
<li id="navi09" title="Schicken Sie uns eine Nachricht"><a href="kontakt.html">Kontakt</a></li>

</ul>

arbeite mit dreamweaver. Bitte um Hilfe!!

TheDon0Ne · 05.08.2009

AW: css drop down navigation probleme zu verstecken

wo is der css für die klasse "dropdown" ?

Kronod · 05.08.2009

AW: css drop down navigation probleme zu verstecken

genau, da fehlt was wie:

HTML:

.dropdown{
display:none;
}

Nun möchte ich die ul also das Untermenü verstecken und es soll nur beim draufdrücken aufgehen.

wenns ausgeblendet ist, kannst aber nicht mehr draufklicken

bibifellow · 06.08.2009

AW: css drop down navigation probleme zu verstecken

ich habe den Befehl eingefügt war aber schwarz kann irgendwie nicht passen.
<ul class="dropdown">
navi.dropdown{display;none}
<li id="button-7"><a href="#"><img class="spacer" src="images/spacer.gif" alt="Kinder" /></a></li>
<li id="button-8"><a href="#"><img class="spacer" src="images/spacer.gif" alt="Gruppen" /></a></li>
<li id="button-9"><a href="#"><img class="spacer" src="images/spacer.gif" alt="Familie" /></a></li>
</ul>
in einem tutorial habe ich gefunden
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover>ul {
display: block;
}
ul#Navigation>li:hover>a {
width: 8.2em;
background: #e00 url(pfeil.gif) no-repeat center right;
}
aber auch das brachte mich nicht weiter
meine Absicht ist das die Unterpunkte kinder Gruppen Familie verschwinden und wenn ich auf Porträt klicke sie wieder erscheinen. Habe ich nicht so gut erklärt. Vielleicht ist das nun etwas klarer was ich meine. Halt nicht ganz einfach.

Thyras · 06.08.2009

AW: css drop down navigation probleme zu verstecken

Wenn der Hauptpunkt Porträt verlinkt bleiben soll, könntest du hier auf ne statische Seite mit dazu passenden geöffneten Menü weiterleiten. Ist zwar unschön, aber bei kleinen überschaubaren / statischen Projekten eine einfache schnelle Lösung. Allerdings mit zunehmenden Umfang und häufigen Änderungen nicht zu empfehlen.

Ansonsten sollte zunächst der CSS-Code zum Verstecken des Untermenüs in den style-Bereich im Kopf der Seite bzw. extern über eine CSS-Datei eingebunden werden. (Alternativ zum Test kann man es notfalls auch gleich im style-Tag für die ul schreiben.)

Code:

ul.dropdown {
  display: none;
}

Damit werden die Unterpunkte weggeblendet. Wenn du das Menü beim Mouseover/-out nur auf-/zuklappen willst, reichen paar Befehle über CSS, ansonsten wirst du da wohl JavaScript brauchen. Dort wäre dann aber entscheidend, was du genau brauchst - sprich: Menü wieder zuklappen bei erneuten Anklicken? Anderes angeklicktes Hauptmenü schließt alle bisherig geöffneten Menüs? ...

Das Ein- und Wegblenden dieses Menüs ist nicht das Problem, aber ich denk dort immer schon weiter.

Wie sind deine weiteren Vorstellungen zu dem Projekt?

Kronod · 06.08.2009

AW: css drop down navigation probleme zu verstecken

hallo,

ok, ich habe mich evtl. zuvor etwas undeutlich ausgedrückt

das was ich oben als Codebeispiel angegeben habe ist CSS und müßte dann auch in dein CSS eingebunden werden.
Einfach zwischen den HTML-Code zu schreiben bringt da nicht viel, weil der Browser dann denkt es sein einfacher Text.

eine Möglichkeit das Untermenü erstmal auszublenden wäre über das style-Attribut:

Code:

<ul class="dropdown" [COLOR=Red]style="display:none"[/COLOR]>
 <li id="button-7"><a href="#"><img class="spacer" src="images/spacer.gif" alt="Kinder" /></a></li>
 <li id="button-8"><a href="#"><img class="spacer" src="images/spacer.gif" alt="Gruppen" /></a></li>
 <li id="button-9"><a href="#"><img class="spacer" src="images/spacer.gif" alt="Familie" /></a></li>
             </ul>

eine andere wäre dann über CSS im Kopf der Seite die Klasse "dropdown" auszublenden:

Code:

 [FONT=Arial]<style type="text/css">
ul.dropdown{
display: none;
}
</style>
[/FONT]

ich denke so hat Thyras es gemeint.
das einblenden wird dann nur über JavaScript gehen.

Thyras Idee mit den statischen Seiten ist sehr simple und auf jeden Fall einfacher und ohne größere Probleme zu bewerkstelligen. Das dann aber wie gesagt nur für kleinere Projekte.

@Thyras:
mir ist keine Ausgabe bekannt was bei CSS dazu führt, das man mit einem Mouseover über einen eingeblendeten Button, einen anderen ausgeblendeten einblenden kann , aber ich laß mich natürlich gerne belehren

Gruß
Kronod

P.S. guck mal

Bitte kostenlos registrieren, damit du die Links siehst.

, das steht so viel über HTML, CSS, JavaScript und andere nützliche Sachen. Wenn ich Hilfe bei sowas brauche guck ich da immer gerne nach

bibifellow · 06.08.2009

AW: css drop down navigation probleme zu verstecken

HAb in nem video das gefunden
#navibereich li ul {
position:absolute;
top: -9999px;
left: -9999px;
display: inline;
width: 0;
height: 0;
background-color: transparent; }
weiß nur nicht warum der es nicht ausblendet. Wahrscheinlich die Zuweisung
#navibereich nicht ganz richtig.

Kronod · 06.08.2009

AW: css drop down navigation probleme zu verstecken

no comment . . .

schau bitte mal

Bitte kostenlos registrieren, damit du die Links siehst.

les dich da mal ein wenig ein und probiere ein paar Sachen aus.
Nichts gegen Video-Tuts, aber bei Programmierung bin ich eher für die theoretische- / learning by doing Methode

auf Seiten lesen, die dafür geschaffen wurden und bei Selfhtml hast du auch gleich Beispiele die du an deine Bedürfnisse anpassen könntest.

MfG
Kronod

Thyras · 06.08.2009

AW: css drop down navigation probleme zu verstecken

@Kronod:

Sehr schön ausformuliert , hast aber:

... bzw. extern über eine CSS-Datei eingebunden werden. ...

ausgelassen.

mir ist keine Ausgabe bekannt was bei CSS dazu führt, das man mit einem Mouseover über einen eingeblendeten Button, einen anderen ausgeblendeten einblenden kann , aber ich laß mich natürlich gerne belehren

Ok erwischt, auch hier braucht man etwas Javascript. Kommt davon, wenn man nebenher arbeitet...

Allerdings ist bei nem einfachen Hover-Effekt wahrscheinlich erstmal weniger zu beachten, als bei nem Menü was nach dem Klicken offen stehen bleibt.

[edit]

@bibifellow: Du hast die Lösung zum Ausblenden hierstehen. Hör auf, dir irgendwelche Codeschnipsel aus Beispielen zu ziehen ohne das Beispiel komplett umzusetzen oder die entsprechenden CSS-Befehle zu verstehen! Dann baust du nur mehr Fehler ein. Sorry, aber paar Grundlagen nachschlagen sollte doch drin sein.