Navigationsleiste dynamisch anzeigen lassen - wie realisieren?

[crystalfunky]

Moin,

ich habe hier eine website,
die noch in der Entwicklung ist.
Bei dem Link "Bilder" möchte ich eine art dynamische navigationsleiste,
die sich nach unten öffnet und wo man die Bilder von den vergangenen Jahren auswählen kann.

Link:

http://freenet-homepage.de/crystalfunky86/hekima/bilder.htm

Wer kann mir dabei helfen?
Wenns geht ohne Javascript, da das ja ohnehin von vielen browsern geblockt wird.

[DanMan]

Genauer bitte. Ein einfaches Dropdown Menü?

[LordZed]

Wenn es ein einfaches Dropdown sein soll könntest du da ne DIV-Box drunter setzen, die das CSS-Style "display: none" besitzt. Dann machst nen kleines Javascript, dass bei nem MouseOver diesen auf "display: block" setzt und bei nem MouseOut (oder sowas) wieder auf "display: none" somit.

Wie genau du das in JS machst musst du selber gucken. Erstens weiß ich es selber nicht genau und 2. wollen wir dir ja auch nicht die ganze Arbeit abnehmen.

[rotalever]

Ein Dropdown menü geht in vielen Browsern ohne Js aber nicht im IE. Macht aber auch nichts, Javascript hat eh fast jeder aktiviert. Braucht man schließlich für den ganzen Web 2.0 kram mit dem hippen Ajax.
Der suckerfish ist möglicherweise was du brauchst: http://htmldog.com/articles/suckerfish/dropdowns/

[crystalfunky]

ne kein dropdown menu. sowas weiß ich ja.

http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm

sowas möchte ich.

das Problem. ich habe schon CSS angaben für ul und il.
Ich kann es also nicht doppelt belegen. außerdem soll es ja in den ul und il bereich.

Wie kann ich das jez realisieren

[crystalfunky]

ne kein dropdown menu. sowas weiß ich ja.

http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm

sowas möchte ich.

das Problem. ich habe schon CSS angaben für ul und il.
Ich kann es also nicht doppelt belegen. außerdem soll es ja in den ul und il bereich (navigationsleiste).

Wie kann ich das jez realisieren

[DanMan]

Ja du bist witzig. Erstens ist es genau das gleiche, und zweitens steht doch alles da: http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern

Also präzisier doch deine Frage mal, was genau dir Probleme bereitet. ul und li schon belegt? Wie wärs mit Klassen?

[rotalever]

ne kein dropdown menu. sowas weiß ich ja.

http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm

sowas möchte ich.

Das ist ein Dropdown menu.:confused:

[crystalfunky]

mein problem ist,
dass ich die navigationsleiste schon habe,
die in meiner css datei ul und il angaben hat,
die ich nicht doppelt belegen kann.
Das dropdown menu befindet sich ja in der navigatiosleiste,
also kann ich keine klassen verwenden,
da ich ja dann eine neue klasse in der bereits geoeffneten
klasse oeffne, was nicht zum gewuenschten effekt fuehrt.

Ich hoffe ihr koennt mich jez besser verstehen.

Also wie realisiere ich das jez?

[DanMan]

mein problem ist, dass ich die navigationsleiste schon habe, die in meiner css datei ul und il angaben hat,
die ich nicht doppelt belegen kann.
Das dropdown menu befindet sich ja in der navigatiosleiste, also kann ich keine klassen verwenden, da ich ja dann eine neue klasse in der bereits geoeffneten klasse oeffne, was nicht zum gewuenschten effekt fuehrt.
Das ist schlichtweg falsch. Warum sollst du innerhalb einer CSS Klasse nicht noch eine neue definieren können? Steht wie gesagt alles auf der SelfHTML Seite, die du selbst verlinkt hast. Poste doch einfach mal den exakten Code, um den es geht... dann wird sich vllt. einer drum kümmern. Deine Erklärung macht jedenfalls keinen Sinn.

P.S.: US Tastatur oder warum keine Umlaute (und auch noch alles klein)?

[crystalfunky]

nun habe ich es soweit hinbekommen, dass ich die neue navileiste integriert habe.

http://freenet-homepage.de/crystalfunky86/hekima/deu/bilder.htm

ich bekomme es aber nicht hin, es dem Layout der eigentlichen Navileiste anzupassen.

Kann mir da jemand sagen, wie ich die CSS datei schreiben muss?
Danke

P.S.: EIn anderes Problem ist, dass es im IE7 anders aussieht.

[DanMan]

ich bekomme es aber nicht hin, es dem Layout der eigentlichen Navileiste anzupassen.

Kann mir da jemand sagen, wie ich die CSS datei schreiben muss?
Ohne Hinweis wie es denn aussehen soll?

[crystalfunky]

es soll natürlich so aussehen, wie die navigationsleiste.

[crystalfunky]

sacht ma an hier, ich brauche da echt eure hilfe.

[DanMan]

Man, man, man - bin ich heute wieder nett. Hier dein komplettes CSS. Was du nicht brauchst hab ich rausgeschmissen. Der einzige Haken: Funktioniert erst, wenn du dein HTML fehlerbereinigst, und ich sag dir nicht woran es liegt :tongue:

/* global whitespace reset (leftjustified.net) */
* { padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, fieldset, address { margin: 1em 0; }
li, dd { margin-left: 2em; }
fieldset { padding: .5em; }
/* end whitespace reset */

body {
padding: 0;
background-color: #FEFDC1;
font-size: 11px;
font-family: Lucida Grande, Verdana, sans-serif;
color: #000;
text-align: center;
}

a {
color: #0577c1;
text-decoration: none;
}

a:hover {
color: #0577c1;
text-decoration: underline;
}

img {
font-size: 10px;
border: 0px;
}

code {
color: #090;
}


/* lists */
ul {
padding: 5px 3px 10px 0;
margin: 0;
}

ul.left {
float: left;
clear: none;
width: 49%;
padding: 15px 0px;
}

ul.right {
float: right;
clear: none;
width: 49%;
padding: 15px 0px;
}


/* layout */
#wrapper {
width: 800px;
padding: 0;
margin: 0 auto;
text-align: left;
}

#header {
margin: 0;
}


/* navbar */
#nav {
width: 797px;
float: left;
margin: 0 0 16px 0;
border: 1px solid;
border-top-color: #212121;
border-bottom-color: #212121;
border-left-color: #737373;
border-right-color: #737373;
list-style-type: none;
color: #fff;
background-image: url(../bilder/button_back.gif);
}

#nav a, #nav a:link, #nav a:visited {
display: block;
color: #fff;
}

#nav a:hover {
color: #EEDB5B;
text-decoration: none;
}

#nav li {
float: left;
border-right: 1px solid #777;
text-align: center;
position:relative;
padding:1ex 1em;
}
#nav li:hover ul {
display:block;
}
#nav ul {
list-style:none; display:none;
position:absolute;left:0;
}
#nav ul li {
float:none;
background-image: url(../bilder/button_back.gif);

}

/* content section */
#main {
/* clear: both; */
float: left;
width: 800px;
padding-right: 20px;

}
#main * {
line-height: 1.4em;
}

#main strong {
font-weight: bolder;
line-height: 1.2em;
letter-spacing: 0.02em;
}

#main div#cleft{ width: auto; float:left;}
#main div#cright{ float:right;}

#main img#map{ margin:15px; border:10px solid rgb(54,44,30); }
#main h2, #main h3, #main h4 {
clear: both;
font-size: 1.2em;
border-bottom: 1px solid #000;
padding-bottom: 1px;
margin: 16px 0 2px 0;
}


/* footer style */
#footer {
color: #555;
clear: both;
padding: 5px 0 25px 0;
border-top: 1px solid #000;
text-align: center;
background-image:url(../bilder/top.jpg);
}

#footer ul {
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0 0 10px 0;
}

#footer li {
display: inline;
padding: 0 1em;
margin: 0;
border-right: 1px solid #000;
text-align: center;
}

#footer li.last {
border: none;
}

#footer li.lang {
border: none;
padding: 0 0.3em;
}

#footer p {
margin: 0;
}

[crystalfunky]

hmm toll, leider kann ich damit noch nicht sehr viel anfangen,
da ich es jez nicht mehr im Firefox anzeigen lassen kann
und im Inet7 klappt es sich schon nach dem 2. Link, wenn man über die Links fährt.

Außerdem ist jez meine Navigationsleiste so dick.
Hilf mir dochmal etwas mehr. sry ich bin kein Profi,
der alles auf anhieb erkennt.
Und was ich in den HTML Code schreiben muss,
krieg ich auch nicht raus.