Aufklappbare Navigation

kai1 · 01.02.2011

Hallo ich möchte gerne eine Aufklappbare Navigation haben.
Bin den halben tag da bei so was zu machen habe jetzt das fast so weit fertig mir fehlt nur noch ein kleines Bischen bei mir sind noch um den Navigation Text meine Bookmark/kontakt/Links/ Impressum ein Ramen drum der weg soll finde das leider nicht wie ich den weg bekomme.
Weiss jemand wie das geht könnte mir das jemand erklären oder wenn nicht so eine Navigation so machen so das ich sie in Dreamweaver verlinken kann

das ist meine seite wo ich am Bauen bin
und so soll die navigationmal sein

wahre echt klasse wenn mir hier auch bei dieser Aufgabe jemand Helfen könnte
vielen dank
gruss

Bleccer · 01.02.2011

AW: Aufklappbare Navigation

Mit border: none;

bzw. so wie ich das in deinem Code sehe so:

.hide:hover {
border: none;
}

woffi · 02.02.2011

AW: Aufklappbare Navigation

Äh, hast Du das jetzt schon reingebaut - ich kann da keinen wesentlichen technischen Unterschied sehen?

An der Positioniereung beim hover musst Du noch arbeiten, das zappelt.

kai1 · 02.02.2011

AW: Aufklappbare Navigation

woffi schrieb:
An der Positioniereung beim hover musst Du noch arbeiten, das zappelt.

Hallo Woffi

nein ich habe das noch nicht geändert, hatte Gestern Bleccer noch angeschrieben über pn weil mir das auch aufgefallen ist mit den zappeln und ich leider auch nicht das gefunden habe wo ich das von Bleccer eintragen muste so das es weg ist.
Es wahre super wenn mir jemand das richtig machen könnte die datei kann ich als email sofort schicken.
Habe das hier nicht geschrieben gehabt das ich das nicht so hinbekomme weil ich mich schäme tut mir leid

Kai

fexx · 02.02.2011

AW: Aufklappbare Navigation

kai1 schrieb:
Habe das hier nicht geschrieben gehabt das ich das nicht so hinbekomme weil ich mich schäme tut mir leid

hier gibts nicht zu schämen ;o) aber nur so können wir dir richtig helfen

Myhar · 02.02.2011

AW: Aufklappbare Navigation

Das gehört in deine CSS Datei (Die heißt bei dir format.css)

kai1 · 02.02.2011

AW: Aufklappbare Navigation

fexx schrieb:
hier gibts nicht zu schämen ;o) aber nur so können wir dir richtig helfen

Danke schön

habe jetzt die datei format css auf und auch den code da rein gemacht unter /* rahmen mehr oder weniger breit */
nur es hat sich nichts geändert leider mache da echt was Falsch tut mir leid

PHP:

/* breite der gesamtkonstruktion - verbreitern sie hier auch bei bedarf z.b. 920px oder 98% oder ähnliches */
#breite {width:878px}


body
{margin-top: 10px; margin-left: 0px; margin-right: 0px;margin-bottom: 20px;        background-color: #d4d4d4;
}


h2{ color:#AFAFAF;
margin-bottom:30px;letter-spacing:2px;
font-family: verdana,arial,helvetica, verdana, tahoma, sans-serif;
font-size: 22px;
font-variant:small-caps;font-weight:normal
}


/* rahmen mehr oder weniger breit */
.hide:hover {
border: none;
}

.fvoben {height:80px;background-color: ;
background-image:url(images/fvoben.jpg);
background-repeat:repeat-x;
background-position:50% 100%;}


#top1 {height:0px;
background-color:#fff;
height:43px;
width:100%;text-align:center;
border-top:solid 1px #CFCFCF;
border-left:solid 1px #CFCFCF;
border-right:solid 1px #CFCFCF;
}

#top2 {background-image:url(images/logo.jpg);
background-repeat:no-repeat;
height:390px;
background-color:#fff;
background-position:50% 100%;
border:solid 1px #CFCFCF;

}

#top3 {
background-color:#F7F7F7;
height:40px;
color:#56686D;
width:100%;
vertical-align:middle;
text-align:left;
border-left:solid 1px #CFCFCF;
border-right:solid 1px #CFCFCF;
background-image:url(images/fv1.jpg);
background-repeat:repeat-x;
background-position:50% 50%;
}



#name {height:0px;
letter-spacing:2px;
color:#AFAFAF;
padding-left:20px;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
font-size:26px;
font-variant:small-caps;
}


#inhalt {height:900px;
padding-top: 60px; padding-bottom: 90px;
padding-left: 40px;padding-right:40px;
background-color:#fff;
letter-spacing:0px;
width:100%;
vertical-align:top;
text-align:left;
color:#707070;
font-size: 16px;line-height: 22px;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
letter-spacing:0px;
background-image:url(images/fv2.jpg);
background-repeat:repeat-x;
background-position:50% 50%;
border:solid 1px #CFCFCF;}


#fuss1 {
color:#6F6F6F;background-color:#F7F7F7;
letter-spacing:0px;
font-size: 14px;line-height: 20px;
font-family: trebuchet ms,
verdana,arial,helvetica, verdana, tahoma, sans-serif;
height:40px;
text-align:center;
vertical-align:middle;
width:100%;
font-style:normal;
border-left:solid 1px #CFCFCF;
border-right:solid 1px #CFCFCF;
border-bottom:solid 1px #CFCFCF;
background-image:url(images/fv1.jpg);
background-repeat:repeat-x;
background-position:50% 50%;
}



#fuss2 {font-size: 15px;line-height: 20px;
color:#6F6F6F;background-color:#fff;
letter-spacing:0px;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
height:100px;
text-align:center;
vertical-align:middle;
width:100%;
font-variant:small-caps;
font-style:italic;

}



/* scrolleiste internet explorer ab vers.5.5 */

body
{scrollbar-arrow-color: #535353; scrollbar-base-color: #fff;
scrollbar-highlight-color : #535353; scrollbar-shadow-color : #fff;
SCROLLBAR-TRACK-COLOR: #EFEFEF;}

/* ========== Schatten um Hauptbereich ========== */


#s1 {
background-image:url(images/s1.jpg);
background-repeat:no-repeat;
background-position:  100% 0%;
}

#s2 {
background-image:url(images/s2.jpg);
background-repeat:repeat-x;
background-position:  0% 0%;
}

#s3 {
background-image:url(images/s3.jpg);
background-repeat:repeat-x;
background-position:  0% 0%;
}

#s4 {
background-image:url(images/s4back.jpg);
background-repeat:repeat-y;
background-position:  100% 100%;
height:100%;
}



#s6 {
background-image:url(images/s6back.jpg);
background-repeat:repeat-y;
background-position:  0% 0%;
}

#s7 {
background-image:url(images/s7.jpg);
background-repeat:no-repeat;
background-position:  100% 0%;
}

#s8 {
background-image:url(images/s8.jpg);
background-repeat:repeat-x;
background-position:  0% 0%;
}

#s9 {
background-image:url(images/s9.jpg);
background-repeat:no-repeat;
background-position:  0% 0%;
}

kai1 · 02.02.2011

AW: Aufklappbare Navigation

Wenn mir das jemand richtig machen könnte wahre ich super Dank bar
Könnte den jenigen die ftp daten geben so das er sich das runter ziehen könnte die datei die er braucht und so richtig machen kann.

Kayko · 02.02.2011

AW: Aufklappbare Navigation

kai1 schrieb:
habe jetzt die datei format css auf und auch den code da rein gemacht

Hallo Kai,

du hast dein Menü in der menue.css gestaltet, also solltest du auch darin weiterarbeiten.
In dieser menue.css hast du einen Eintrag, der "menu ul li:hover ul li a " lautet

Code:

.menu ul li:hover ul li a {
        display:block;
        background-color:transparent;
        color:#889A80;
        font-style:italic;
        border:solid 1px #bfbfbf;
        line-height:40px;
        background-repeat:repeat;
        -moz-opacity: 0.70;
        opacity: 0.70;
}

Ändere den border und füge ein padding dazu, damit deine floats nicht kaputtgehen:

Code:

.menu ul li:hover ul li a {
        display:block;
        background-color:transparent;
        color:#889A80;
        font-style:italic;
        border:none;
        padding: 1px;
        line-height:40px;
        background-repeat:repeat;
        -moz-opacity: 0.70;
        opacity: 0.70;
}

Dann haben die Aufklapplinks keinen Rand mehr. (Zumindest im Firefox) Allerdings noch immer im Hover-Status. Sollen die auch weg?

Grüße
Kayko

kai1 · 02.02.2011

AW: Aufklappbare Navigation

Hallo Kayko

diese Hier ( "menu ul li:hover ul li a " ) leider 3 mal drin in der menu.css in mehren zeilen habe dir mal eine pn geschickt dann könntest du dir das vielleicht mal richtig anschauen wahre super klasse

Kai

Kayko · 02.02.2011

AW: Aufklappbare Navigation

Aus PM:

kai1 schrieb:
Habe das nun rein gemacht leider sind da drei zeilen mit den ( "menu ul li:hover ul li a " )
zeile 58/ 86/ 100

Es steht nur in Zeile 58, in den anderen Zeilen steht noch was dahinter, also ist es ein anderes Element

kai1 schrieb:
habe das in den letzten beiden zeilen geändert aber leider ist das immer noch so

... natürlich, weil es (s.o.) ein anderes Element betrifft.

Ich gucke nachher mal drüber.

Grüße
Kayko

Kayko · 02.02.2011

AW: Aufklappbare Navigation

Hallo Kai,
guck mal auf deine Seite. Ich habe einige Änderungen vorgenommen. Deine "alte" Datei ist noch unter menue_sicher.css zum Vergleichen.
Nicht benötigte Anweisungen habe ich meistens auskommentiert, geänderte kommentiert.
Deine Navigation hat jetzt nirgends mehr Rahmen und zappelt nicht mehr. Beim Überfahren der zweiten Ebene ändert sich die Farbe, da durch die Transparenz nicht viel zu sehen ist. Die Transparenz macht über dem dunklen Hintergrund alles auch etwas schlecht sichtbar. Das solltest du noch einmal überarbeiten.
Ich hoffe, du kommst jetzt weiter.

Grüße
Kayko

kai1 · 02.02.2011

AW: Aufklappbare Navigation

Hallo Kayko Das sieht so mit der navigation hammer geil aus den rest den werde ich machen das ist kein ding Farbe stil usw vielen vielen dank

Kayko · 02.02.2011

AW: Aufklappbare Navigation

Schön, dass du damit weiterkommst.

Noch etwas: solltest du dieses Menü einem anderem nachempfunden haben, wäre es angebracht, Copyright-Informationen in die css-Datei einzubinden und/oder einen Backlink zu setzen.
Dein Menü ähnelt dem von Stu Nicholls auf CSSplay sehr ()

Und ändere bitte dein FTP-Passwort. Ich werde zwar deine Dateien bei mir löschen, aber trotzdem ....

Viel Spaß noch mit deiner Seite
Kayko

kai1 · 02.02.2011

AW: Aufklappbare Navigation

die navigation die ist nicht von da kannte die seite vorher gar nicht da ich kein Englisch kann gehe ich auf solchen seiten nicht rauf wenn so was kommt gehe ich sofort weg
vielen dank

Kai