Drop Down Menü umwandeln!!!!!!

taschi · 21.12.2010

Hallo alle zusammen

Ich habe ein Wordpress Blog, daran arbeite ich gerade am Layout. Im Headerbereich habe ich ein horizontales Menü eingebaut. Dieses würde ich gerne zu einem Drop down Menü umwandeln.
Ich habe es geschafft, dass es nach unten geht. Aber eigentlich würde ich es gerne so aussehen lassen:

Simple Linear Drop-Down Menu Demo

Hier mal mein CSS Code:

Code:

/*main navi
------------*/
#mainnavi{
  margin-top: 10px;
  padding: 5px;
  background: #000;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  border-bottom: solid 4px #838383;
  border-top: solid 4px #838383; }
 
#mainnavi ul{
  list-style-type:none;
  margin: 0 auto;
  padding: 0;
  text-align: center; }
 
#mainnavi li{
  width:128px;
  float:left;
  font-size: 13px;
  text-transform: uppercase;}
 
#mainnavi li ul {
  display:none; }
 
#mainnavi li:hover ul { 
   display: block; }
 
#mainnavi a:link,
 
#mainnavi a:visited {
  color: #fff;
  text-decoration: none;
  font-style: normal;}
 
#mainnavi a:hover,
 
#mainnavi a:active  {
  color: #aaa;
  text-decoration: underline;
  font-style: normal; }

und so sieht es zur Zeit aus:

Ich hoffe mir kann dabei jemand helfen, ist sehr wichtig!

Crackp0t · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

Was dir fehlt ist die Höhe und Breite des UL Elements in dem die Listenpunkte, also die Untermenüpunkte stehen.

leveler · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

am besten Du nimmst Dir mal Firebug, schaust Dir den originalen Code an
-->

ul.dropdown-linear {
width: 100%;
}

ul.dropdown-linear ul li {
float: left;
}

ul.dropdown-linear li.hover,
ul.dropdown-linear li:hover {
position: static;
}

ul.dropdown-linear ul ul {
display: none !important;
}

und münzt das dann entsprechend um

taschi · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

leveler schrieb:
am besten Du nimmst Dir mal Firebug, schaust Dir den originalen Code an
-->

und münzt das dann entsprechend um

Das habe ich versucht aber entweder ich bin zu blöd oder es geht nicht...
Könnt ihr mir da weiterhelfen?=(

leveler · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

oder es geht nicht...

doch..das geht..C.R.A.C.K.p0t (sorry, musste ich so schreiben) hat Dir doch schon nen Tip gegeben und die Lösung liegt doch ebenfalls im Klartext/Quellcode vor..musste halt nur anpassen

taschi · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

*****p0t schrieb:
Was dir fehlt ist die Höhe und Breite des UL Elements in dem die Listenpunkte, also die Untermenüpunkte stehen.

Das da wäre... ?
ist das zwingend von Nöten?

Crackp0t · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

Gib "#mainnavi li ul" mal eine höhe von 25 px und eine Breite von 800 px, dann stehen die Punkte schonmal nebeneinander. Jetzt muss das ganze nur vernünftig positioniert werden, da bin ich noch dran.

"#mainnavi" könnte auch noch eine Höhe von 15px vertragen und "#header" ein padding-bottom von 50 px, damit das Layout nicht verrutscht beim Hover.

Einfach mal mit Firebug rumspielen

//edit: Man bekommt die Untermenüpunkte mit einem negativem Margin-Left in die passende Position.

taschi · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

leveler schrieb:
doch..das geht..C.R.A.C.K.p0t (sorry, musste ich so schreiben) hat Dir doch schon nen Tip gegeben und die Lösung liegt doch ebenfalls im Klartext/Quellcode vor..musste halt nur anpassen

tut mir leid dann bin ich anscheinend zu blöd es zu verstehen....-.-"
ich meine ich beschäftige mich jetzt seit ca einem halben Jahr mit CSS habe auch schon einige Fortschritte gemacht aber jetzt steh ich grad völligst aufm Schlauch=(

taschi · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

*****p0t schrieb:
Gib "#mainnavi li ul" mal eine höhe von 25 px und eine Breite von 800 px, dann stehen die Punkte schonmal nebeneinander. Jetzt muss das ganze nur vernünftig positioniert werden, da bin ich noch dran.

"#mainnavi" könnte auch noch eine Höhe von 15px vertragen und "#header" ein padding-bottom von 50 px, damit das Layout nicht verrutscht beim Hover.

Einfach mal mit Firebug rumspielen

//edit: Man bekommt die Untermenüpunkte mit einem negativem Margin-Left in die passende Position.

Wenn ich es so mache wie du sagst, dann rutscht alles weg und nur noch Home ist zu sehen....

Crackp0t · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

Editier mal so, das der Fehler auftritt und lad es hoch, ich schau es mir dann nochmal an...

//Edit: Kann es sein, dass du den IE zum Testen benutzt?

taschi · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

Ah ich hatte einen Fehler gemacht und die Sachen ins falsche Feld eingetragen.. *an Kopf hau*
tut mir leid=(

Kann ich das dann auch verschieben dass nicht die letzte Seite verschwindet? *sind halt 6 Stück*
Also dass es schon bei Home anfängt unten?

LG

Crackp0t · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

Füge zu "#mainnavi li ul" hinzu:

Margin-Left: -130px

Und in Zukunft liest du die Beiträge von Nutzern die dir helfen wolln mal genauer durch

taschi · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

*****p0t schrieb:
Füge zu "#mainnavi li ul" hinzu:

Margin-Left: -130px

Und in Zukunft liest du die Beiträge von Nutzern die dir helfen wolln mal genauer durch

Vielen vielen vielen Dank!!!!!!!! *o*

Und es tut mir leid, ich habe es total überlesen, mache ich =(

AndrOve · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

Hallo,

Du hast doch alles, was Du brauchst....?!
Bei mir klappt alles reibungslos, wenn ich die ZIP-Datei entpacke und die simple.horizontal.html öffne.
Wieso erfindest Du das Rad neu,wenn das eh unter GNU General Public License steht?
Nimm doch einfach die Stylesheets und klopf' sie in Wordpress hinein.

Es grüßt verwirrt Andreas

taschi · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

AndrOve schrieb:
Hallo,

Du hast doch alles, was Du brauchst....?!
Bei mir klappt alles reibungslos, wenn ich die ZIP-Datei entpacke und die simple.horizontal.html öffne.
Wieso erfindest Du das Rad neu,wenn das eh unter GNU General Public License steht?
Nimm doch einfach die Stylesheets und klopf' sie in Wordpress hinein.

Es grüßt verwirrt Andreas

-.-
Ich habe was ich brauche..-.-
Außerdem habe ich das versucht und leider nicht hinbekommen *wirred*
Weil ich nicht wusste wie ich es in meine Funktion von Wordpress reinbringe wp_pagelist....
Und ist da nicht auch JavaScript dabei?
Wenn du mir sagst wie ich das zusammen basteln kann mach ich es so

leveler · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

Und ist da nicht auch JavaScript dabei?

im Quelltext der gesamten Seite schon, das ist für Dein Beispiel aber irrelevant, die Navi funktioniert rein mit CSS

taschi · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

leveler schrieb:
im Quelltext der gesamten Seite schon, das ist für Dein Beispiel aber irrelevant, die Navi funktioniert rein mit CSS

Achso okay dann bedanke ich mich noch mals=)

Muss ich dann die beiden CSS reinkopieren in meinen CSS Code und anpassen?
Und wie kann ich die HTML datei die verlinkung in meinen Wordpress Code ein welche so in der PHP steht: wp_pagelist ?
Das is diesbezüglich mein größtes Problem....

Crackp0t · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

Sie hat das Beispiel ja nun schon teilweise nachkonstruiert und "learning by doing" ist die beste Methode um CSS zu lernen. Klar gibt es den meisten Code schon fertig, aber dann setzt man sich damit nicht so sehr auseinander.

Naja, hast ja noch einiges vor dir

Und nimm dir meine Mail zu Herzen.^^

AndrOve · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

oh, sorry taschi, Missverständnis.
Ich dachte, Du baust das Menü nochmal per Hand nach :lol:

wenn du die zip-Datei runtergeladen hast, dann musst Du

css/dropdown/themes/default/helper.css
css/dropdown/dropdown.css
css/dropdown/themes/default/default.css

mittels style - tag einbinden.

Im HEAD-Bereich noch den Conditional Comment für IExplorer mittels

HTML:

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script><![endif]-->

ergänzen.

Anschließend die Navigation zurecht frickeln mit

HTML:

<ul id="nav" class="dropdown dropdown-horizontal">

Den <li>-Tag's, die Band und Gallerie beinhalten, gibst Du noch die Klasse "dir" mit, und die Sache ist gewuppt.

EDIT:
Welches Wordpress-Theme nutzt Du? Hast Du da mal einen Link zum downloaden?

Gruß Andreas

taschi · 21.12.2010

AW: Drop Down Menü umwandeln!!!!!!

AndrOve schrieb:
oh, sorry taschi, Missverständnis.
Ich dachte, Du baust das Menü nochmal per Hand nach :lol:

wenn du die zip-Datei runtergeladen hast, dann musst Du
css/dropdown/themes/default/helper.css
css/dropdown/dropdown.css
css/dropdown/themes/default/default.css

mittels style - tag einbinden.

Im HEAD-Bereich noch den Conditional Comment für IExplorer mittels

HTML:



ergänzen.

Anschließend die Navigation zurecht frickeln mit

HTML:

<ul id="nav" class="dropdown dropdown-horizontal">

Den <li>-Tag's, die Band und Gallerie beinhalten, gibst Du noch die Klasse "dir" mit, und die Sache ist gewuppt.

EDIT:
Welches Wordpress-Theme nutzt Du? Hast Du da mal einen Link zum downloaden?

Gruß Andreas

Ich HABE es per Hand geschrieben aber Danke!
Und das Wordpress Theme habe ich mir nicht runtergeladen sondern auch selbst geschrieben!