DropDownMenü mit CSS ... Idee ! Umsetzung ?

[SN-Moderator]

Hi Freunde,
ich habe eine grandiose Idee für das Navigationssystem meiner Webseite, doch zunächst, damit ihr versteht, wie ich all das hier meine: SmartNewsBlog.de - Tech, Specs & More

Meine Idee ist folgende:
In den zwei grünen Div-Container wird eine tolle Navigation entstehen. Die erste Zeile beinhaltet die Obersten Hauptseiten, während die zweite Zeile dann die Unterseiten beinhaltet. Fährt man also mit dem Mauszeiger über eine Hauptseite, so werden die Unterseiten in der zweiten Zeile angezeigt.

Wenn ihr wisst, was ich meine, dann freue ich mich über die Ideen und Tipps zur Umsetzung.
SN-Moderator

 

[Cheffchen]

Hallo,

also ganz so grandiose ist die Idee nicht und vor allem nicht alt zu neu :O)

Da gibts einige fertige sachen die genau das tun. schau mal bei Stu Nicholls | CSSplay | Experiments with cascading style sheets | Doing it with Style glaube da mal genau das gesehen zu haben. wo anders auch aber fällt mir gerade nicht wo.

Cheffchen

 

[SN-Moderator]

Mir ist so in den Sinn gekommen, dass ich eigentlich nur einige übereinanderliegende div-Container brauche. Beim draufzeigen mit der Maus wird dann jeweils nur der entsprechende Container angezeigt. Gibt es also Befehlle, die einen Div-Container unsichtbar machen?

 

[Cheffchen]

Hallo,

klar aber alleine damit wirst nicht weit kommen.

display:none mit css oder per jquery .hide()

da bekommst eher ein fertigen script eingebunden.

Cheffchen

 

[SN-Moderator]

da bekommst eher ein fertigen script eingebunden.

Erstens: Tut mir leid, habe deinen Post nicht ganz verstanden. Was ist mit einem fertigen Skript?

 

[SN-Moderator]

Noch eine Frage: Wie stelle ich es an, dass sich der Hover-Effekt auch eine andere id auswirkt?

Muss ich das in etwa so machen:
#NavigationErsteZeile: hover > #NavigationZweiteZeile

Bitte eine "Formel" schreiben, wird auch noch später wichtig sein,
DANKE

 

[Cheffchen]

Hallo,

ich habe dir 2 Befehle gezeigt, der eine ist für css und der andere für jquery, einfach mal Onkel G fragen.

Ein hover kann sich nur in verschachtelten auswirken wenn ds nur mit css macht, mit jquery geht alles :O).

mit css könnte das so aussehen

#NavigationErsteZeile:hover #NavigationZweiteZeile {display:block}

damit würde #NavigationZweiteZeile sichtbar werden wenn mit der maus über #NavigationErsteZeile gehst aber nur wenn #NavigationZweiteZeile in #NavigationErsteZeile drin ist.
so:

<div id=NavigationErsteZeile>  
  <div id=NavigationZweiteZeile style="display:none">XX</div>
</div>

Cheffchen

 

[Banana_Jones]

Noch eine Frage: Wie stelle ich es an, dass sich der Hover-Effekt auch eine andere id auswirkt?

Muss ich das in etwa so machen:
#NavigationErsteZeile: hover > #NavigationZweiteZeile

Bitte eine "Formel" schreiben, wird auch noch später wichtig sein,
DANKE

Das würde nur funktionieren, wenn #NavigationZweiteZeile ein Kindelement von #NavigationErsteZeile wäre. Entweder du baust dein Markup entsprechend um, oder du manipulierst die Eigenschaften beim Hovern per Javascript (jQuery).

 

[SN-Moderator]

Erstens: Was ist jquery? Ist das eine Abwandlung von Java (aus Google nicht ganz schlau geworden)? Wie muss ich die Dateien einbinden, genauso wie CSS? Welche Endungen haben die Dateien?

 

[Cheffchen]

Hallo,

Java hat nicht mit Javascript (JS) zu tun.
jquery ist Javascript nur halt um einiges leichter da vieles von jquery abgenommen wird.

Hier ist die Docu und das schöne immer gleich mit ein Beispiel was anschauen kannst
hier für dsa einblenden: .show() | jQuery API Documentation

Cheffchen

 

[SN-Moderator]

Ich versuche jQuery nun ein bisschne zu lernen, doch ich verstehe das einbinden noch nicht so ganz. Könt ihr mir das nochmal für Dumme erklären.

 

[SN-Moderator]

Um genauer zu sein versuche ich nur dieses Einfaches Drop-Down Menü mit jQuery | Web-Union.de zu erstellen, doch das will nicht gehen.
Die Codes habe ich kopiert und eingefügt und die ids und class´sind auch die selben. Es scheitert an dem einbinden, denn ich habe schon 20.000 Einbindungen ausprobiert und nichts wirkt.

 

[Elroy]

Hallo.

Also wenn du dir das auch komplett durchgelesen hast dann ist dir wahrscheinlich auch diese Zeile aufgefallen:

Vorher sollte im Head natürlich jQuery eingebunden werden:

Und genau dort kommt auch das Javascript hin.

Ausserdem hättest du dir bei dem Demo das dort vorhanden ist auch einfach mal den Quelltext ansehen können, das geht schneller als 20.000 Einbindungen auszuprobieren.


Gruss
Elroy