Html/css/js dropdown menü nach oben aufklappen

Computer: Software & Programmierung HTML & CSS
#1

hiho…

hab ein kleines problem…

ich möchte ein dropdown-menü verwenden, welche jedoch nicht nach unten, sondern nach oben ausklappt…

hab da derzeit auch nen nettes kleines stück code gefunden was direkt funktionierte, jedoch das menü nach unten ausfährt.

wie änder ich das jetzt ab, das es nach oben ausklappt?

hier mal mein code…

function surfto(form) {
var myindex=form.select1.selectedIndex
if (form.select1.options[myindex].value != „0“) {
window.open(form.select1.options[myindex].value, target=„center“);}
}

MENÜ
test0
test1
test2

wie man sieht ist das ganze schön kurz und knapp gehalten und beliebig erweiterbar und nicht wie die bei google zu findenen lösungen mit kilometerlangen codezeilen…

aber wie zur hölle kann ich das menü nun nach oben ausklappen lassen

#2

menü nach oben aufklappen
Noch nicht fertig, aber ein Ansatz wäre in den JavaScript-Teil einzufügen:

function Platz0(event) {
if (event.target.name!="select1")
// beim IE: if (window.event.srcElement.name!="select1")
 document.getElementById('menu').style.top=yUnten;
else
 document.getElementById('menu').style.top=yOben;
}
onmousedown=Platz0;

yOben muss einmal berechnet werden.
Und für menu muss style=„position=absolute;“ definiert werden, möglichst in separatem CSS-Teil.

#3

mhhhh… versteh ich nicht ganz… leider…

aber die sache mit der css war mir klar und hab ich auch bereits…

hier der entsprechende codeschnipsel der css

div#menu {
position: absolute;
top: 765px;
left: 541px;
z-index:3;
}

#4

hab das mal versucht umzusetzen… aber ohne den erwünschten erfolg…

function surfto(form) {
if (event.target.name!=„select1“)
// beim IE: if (window.event.srcElement.name!=„select1“)
document.getElementById(‚menu‘).style.top=yUnten;
else
document.getElementById(‚menu‘).style.top=yOben;
}
onmousedown=surfto;

#5

genau so einfügen
Deine Funktion surfto bleibt unverändert.
Meine Funktion ist zusätzlich, umbenennen darfst du natürlich.
onmousdown= steht direkt vor , aber noch im JavaScript-Bereich.

#6

Hallo,

ich möchte ein dropdown-menü verwenden, welche jedoch nicht
nach unten, sondern nach oben ausklappt…

hab da derzeit auch nen nettes kleines stück code gefunden was
direkt funktionierte, jedoch das menü nach unten ausfährt.

wie änder ich das jetzt ab, das es nach oben ausklappt?

hier mal mein code…

function surfto(form) {
var myindex=form.select1.selectedIndex
if (form.select1.options[myindex].value != „0“) {
window.open(form.select1.options[myindex].value,
target=„center“);}
}

MENÜ
test0
test1
test2

Wenn Du ein form-Element für Dein Menu nimmst, dann benutzt Du ein Element, dessen Darstellung nahezu komplett dem OS (und nicht mal dem Browser) überlassen wird. Man kann da zwar etwas dran rum-stylen, aber erst einmal nur wenig.
Wenn man form-Elemente, und vor allem Dropdowns mehr stylen will braucht man wieder mehr Script, und dann kannst Du gleich eine verschachtelte ul nehmen - was semantisch eh sauberer wäre und auch ohne JS funktionieren kann.

Grüße
Christian
http://netz-coaching.de

#7

Moin,

ich möchte noch etwas aus Sicht von HTML hinzufügen, weil ich an den Fragen hier immer wieder sehe, dass da noch Nachholbedarf besteht:

ich möchte ein dropdown-menü verwenden
hab da derzeit auch nen nettes kleines stück code gefunden

MENÜ
test0
test1
test2

Der Einwand: Das ist kein Menü!
Als erstes wird eine Gruppe definiert, die nur die ID „menu“ trägt, dadurch aber nicht zu einem Menü wird. Diese Gruppe enthält nur ein einziges Element, was die Gruppe an sich ad absurdum führt. Ein einzelnes Element ist keine Gruppe. Das div kann komplett wegfallen.

Dann kommt ein Formular - das ist auch kein Menü.

Ein Menü stellt man im allgemeinen als eine Liste dar, das wurde hier nicht gemacht. Deswegen kann der Inhalt in diesem Code auch nicht von Clients (z.B. einer Suchmaschine) als Menü erkannt werden.

Die JS-Lösung von jott053 habe ich nur überflogen und gerade bei js bin ich nicht 100% sicher, aber ich glaube nicht dass man per JS/CSS dem select sagen kann, in welche Richtung es ausklappt. Wie Christian Fischer richtig sagte, gehören Formularelemente zu den Elementen, deren Aussehen und Verhalten weitestgehend vom Betriebssystem vorbestimmt wird und nur eingeschränkt verändert werden kann. Wohin das ausklappt, bestimmt die Lage des Elements im Fenster, wenn es am unteren Rand steht, müsste es nach oben ausklappen.

Wo man immer schöne Anregungen für Menüs findet, ist Listamatic: http://css.maxdesign.com.au/listamatic/

Liebe Grüße,
-Efchen