CSS/HTML/PHP Pulldown Menü bei Mouseover

M.E.

Lt. Commander

Registriert

Jan. 2007

Beiträge

1.923

• 24. August 2008

• #1

Hallo,
da ich gerade dabei bin, meine Website koplett auf PHP umzustellen, möchte ich auch gleichzeitig übersicht & design verbessern.
Ich habe momentan eine Menüleiste oben, die aus Bildern besteht auf denen Text ist. Der Mausover effekt ist, das das Bild dunkler wird.

Jetzt möchte ich noch zusätzlich als Mouseover effekt einbauen, das sich ein Pulldown Menü öffnet, also die ganzen Unterlinks zu der Kategorie direkt unter dem Button erscheinen.
Wie kann ich das realisieren?
Ich kann bisher HTML CSS und PHP und verstehe JavaScript, wenn ich es lese und kann evtl den Code etwas ändern, aber nicht selber schreiben.

Ich freue mich auf Hilfe und Vorschläge!
Meine Website müsste in meiner Signatur sein, falls noch jemand einen anderen Vorschlag zur Design- /Übersichtlichkeitsverbesserung hat.

MfG

M.E.

 

ZooLxp

Lt. Commander

Registriert

Sep. 2005

Beiträge

1.514

• 24. August 2008

• #2

sowas ist bei adobe dreamweaver bei, nennt sich spry menubar ... ich glaub das gibts auch als 30-tage testversion
diese menübar basiert auf javascript

 

1

1668mib

Gast

• 24. August 2008

• #3

Die Frage ist nur ob er den JS-Code aus einer Trial-Version einfach so nutzen darf...

 

Turbostaat

Banned

Registriert

Apr. 2006

Beiträge

6.240

• 24. August 2008

• #4

Es geht auch komplett Javascript und Ajax (Spry) frei, rein basierend auf CSS mit den ul und li Listen Tags.
Habe auch eines geschrieben.

http://www.cssplay.co.uk/menus/ - hier findest du zig Menüs die, wovon ich ausgehe, dir ausreichen werden.

 

T

thetroll

Ensign

Registriert

Dez. 2005

Beiträge

140

• 24. August 2008

• #5

Hallo,
erst muss du dein menü erstellen wie normal. Dann die CSS-Eigenschaft "visibilty" auf hidden setzen. Dann mit Javascript über DOM auf das Objekt zugreifien so:

var x = document.getElementById("popup");

x.style.visibility = "visible";


und dann natürlich den umgekehrte Fall zb. onmouseout:


var y = document.getElementById("popup");

y.style.visibility = "hidden";



das ganze könnte so aussehen:


<script type="text/javascript">

function dropdown(num){

var a = num

if (a == 0)

{
var x = document.getElementById("popup");

x.style.visibility = "visible";


}
else{
var y = document.getElementById("popup");

y.style.visibility = "hidden";

}

}




</script>
<style type="text/css">

#popup { visibility: hidden;}

</style>







<div id="popup" onmouseover="dropdown(0) onmouseout="dropdown(1)">

hier menü
</div>

 

Zuletzt bearbeitet: 24. August 2008

zuo

Lt. Junior Grade

Registriert

Feb. 2008

Beiträge

351

• 25. August 2008

• #6

ich würde es ohne javascript machen weil es leute gibt die es bekanntlich deaktiviern

nimm das
http://www.cssplay.co.uk/menus/drop_definition.html
oder das hier
http://www.cssplay.co.uk/menus/dd_valid.html

besteht nur aus html und css
und ist W3C gerecht

 

M.E.

Lt. Commander

Ersteller dieses Themas

Registriert

Jan. 2007

Beiträge

1.923

• 25. August 2008

• #7

Hallo,
vielen Dank für die Links, ich hab mir eins rausgesucht und ein bisschen rumgebastelt.
Der "Quellcode" ist aber ziemlich lang und ich müsste den ja in jede Seite kopieren (oder etwa nicht?!). Wenn ich mal einen Link ändern sollte oder einen neuen Einfügen sollte, dann müsste ich das in jeder seite ändern...

Gibt es eine Möglichkeit das Komplette menü in einem Stylesheet sozusagen als Funktion abzuspeichern, die ich dann im HTML/PHP Dokument aufrufe? (Aber ohne Frameset!)

danke @thetroll den code konnte ich für was anderes gut verwerten ;-)

MfG

M.E.

 

Zuletzt bearbeitet: 25. August 2008 (Fehlerteufel...)

zuo

Lt. Junior Grade

Registriert

Feb. 2008

Beiträge

351

• 26. August 2008

• #8

M.E. schrieb:

Wenn ich mal einen Link ändern sollte oder einen neuen Einfügen sollte, dann müsste ich das in jeder seite ändern...

Gibt es eine Möglichkeit das Komplette menü in einem Stylesheet sozusagen als Funktion abzuspeichern, die ich dann im HTML/PHP Dokument aufrufe? (Aber ohne Frameset!)

Zum Vergrößern anklicken....

1. Nein
2. Ja

Das Zauberwort heist PHP-Include.

Du erstellst im Rootverzeichniss eine Datei z.B. menu.php
Dort speicherst du dein Menü rein.

Nun kopierst du überall wo dein Menü sein soll diese Zeile rein.

PHP:

<? include '/menu.php'; ?>

Gegebenfalls musst du den Pfad anpassen.

wenn du Fragen hast melde dich

mfg ZUO

 

Zuletzt bearbeitet: 26. August 2008

M.E.

Lt. Commander

Ersteller dieses Themas

Registriert

Jan. 2007

Beiträge

1.923

• 26. August 2008

• #9

Hey, danke, das mit dem Include wäre das dritt-nächste Kapitel im tutorial gewesen ;-)

Das is ja fast genauso wie in C++

Danke, wennn ich fragen hab meld ich mich nochmal

MfG

M.E.

 

M.E.

Lt. Commander

Ersteller dieses Themas

Registriert

Jan. 2007

Beiträge

1.923

• 9. September 2008

• #10

Ich habe mir jetzt ein Menü gebastelt, nur bugt es noch ein bisschen...
Andere Browser, andere Bugs.
Macht euch bitte selbst ein Bild und gebt mir Tipps, was ich verbessern kann. Danke

index.php (so soll alles am ende aussehen)
http://sbm.kilu.de/Zwischenablage/index.php

menu.php
http://sbm.kilu.de/Zwischenablage/menu.php

und das css file:
http://sbm.kilu.de/Zwischenablage/menu.css

MfG
M.E.

 

M.E.

Lt. Commander

Ersteller dieses Themas

Registriert

Jan. 2007

Beiträge

1.923

• 15. September 2008

• #11

Hallo,
Das Hauptproblem ist jetzt noch, dass es bei jedem Browser und bei jeder Bildschirmauflösung das Menü fröhlich nach rechts und links verschiebt. Es soll aber immer in der Mitte bleiben.
Bei Opera 9 @ 1280x1024 ist es momentan richtig (1px zu weit nach rechts)

Ich denke es liegt irgendwie daran:

Code:

/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#menu_container {
height:25px;
vertical-align:middle;
text-align:center;
background-color: #000;
width:100%;
margin-left: 15%;
margin-right:15%;
margin-bottom:1px;
}

Ich habe alles durchprobiert, aber ich komme nicht drauf... Bitte könnt ihr mir nochmal helfen ;-)

Hier nocheinmal die Dateien:
index.php
http://sbm.kilu.de/Zwischenablage/index.php

menu.php
http://sbm.kilu.de/Zwischenablage/menu.php

und das css file:
http://sbm.kilu.de/Zwischenablage/menu.css

MfG
M.E.

 

S1MpLe

Lt. Junior Grade

Registriert

Mai 2008

Beiträge

259

• 15. September 2008

• #12

lass den container mal von nem containerwrapper umschliessen und setz den mal auf text-align:center;

 

M.E.

Lt. Commander

Ersteller dieses Themas

Registriert

Jan. 2007

Beiträge

1.923

• 15. September 2008

• #13

sry ich bin nicht so der css freak; was ist ein containerwrapper und wie wende ich ihn an?


MfG
M.E.

 

M.E.

Lt. Commander

Ersteller dieses Themas

Registriert

Jan. 2007

Beiträge

1.923

• 16. September 2008

• #14

Ok, ich habe es jetz ohne Containerwrapper gelöst und die Seite wird in Opera & Firefox nach meinen Wüschen angezeigt.
Google Chrome Beta bugt, aber das is mir egal, weils ne beta is.

ABER:
Aller IEs zeigen die Seite völlig falsch an.... (Ab IE 6 getestet bis IE 8 Beta)

Ich würde gerne eine Abfrage einbauen, die Bei IE einfach das Alte Menü ohne Pulldown anzeigt, also einfach meinentwegen menu_old.php included wird.

[If lte IE 7] usw funktioniert aber aus irgend einem Grund nicht...

Was gibt es für alternativen für eine Browserabfrage?

MfG
M.E.