 DHTML Menü? |
|
Willkommen, Gast ( Anmelden | Registrierung )
HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML  |
 25.02.2004 - 12:41
Beitrag
#1
|
|
|
DELETE FROM users WHERE search_count < 1  Gruppe: Admin Beiträge: 314 Mitglied seit: 15.07.1976 Wohnort: Osnabrück Mitglieds-Nr.: 2  |
moin!
Arbeite grade an einem Design und stehe vor einem Problem, welches mit Kopfschmerzen droht... :-) Also so soll es aussehen: 
Wobei der obere Button 'normal' ist und der untere MouseOver mit einem Menü, welches aufpoppt. Mir machen diese gerundeten Ecken des 'Pop' Menüs Sorgen und da ich mich bisher nicht mit solchen Kram beschäftigt habe und google, bzw. hotscripts.com noch keine befriedigende Lösung ausspuckte (muss ja net gleich Kohle kosten) wende ich mich nun an unsere 'DHTML' Junkies.... Der Weg führt wohl net an Javascript vorbei, oder? :haeh: (BTW: Ich code sonst ausschließlich PHP - das ist wenigstens ne echte Sprache!! *g*) have fun! Lars |
 |
 
|
| Gast_heinzelhund_* |
25.02.2004 - 13:43
Beitrag
#2
|
|
Gäste |
Hallo,
die Ecken wirst du nur mit Hilfe von kleinen Gifs hinkriegen. Also: -Tabelle bauen und die Gifs in die Ecken setzen. Dazwischen hast du alle Freiheiten -dann deine Submenüs plazieren und über CSS auf "visibility: hidden;" setzen -mit JS-Events in deinen Knopf angeben. (wahlweise onmouseover oder onclick) und mittels einer kleinen JS-Funktion erscheinen lassen: QUELLTEXT function hin/weg ()
{ document.getElementById('id').style.visibility = "visible/hidden"; }; Wenn du mit 'onmouseover' arbeitest, kannst du im Knopf bequem einen alternativen HTML-Link angeben. Falls du 'onclick' verwendest, kannst du alternative HTML-Links setzen, wenn du die Funktionen hin() und weg() noch 'false' (return false;) zurückgeben lässt, damit diese im Falle von aktiven JS die HTML-Links deaktivieren. Ciao Heinzelhund Ergänzung: Funktioniert nur ab IE 5+, NS6+, Moz (wg. getElement ById), um eine Fehlermeldung zu vermeiden könnte man noch folgendes machen: QUELLTEXT function hin/weg ()
{ if (document.getElementById) { document.getElementById('id').style.visibility = "visible/hidden"; return false;}; }; Bei einem alternativen HTML-Link verwenden ältere Browser nun diesen. 
|
|
|
|
|
25.02.2004 - 13:46
Beitrag
#3
|
|
|
____________________ Gruppe: Admin Beiträge: 1.220 Mitglied seit: 20.10.2001 Mitglieds-Nr.: 3 |
Für diese gerundeten Ecken fallen mir eigentlich keine anderen Lösungen außer "Grafik" ein.
Um das "aufpoppende" Menu zu basteln, würde ich ein DIV nehmen und dort eine Tabelle drin aufbauen, deren äußere Zellen halt den Rahmen mit den runden Kanten bilden. Im Confix-System von z.B. Canhost sieht das übrigens halbwegs ähnlich aus - wenn auch nur für jeweils einen Menupunkt. Aber eventuell kann man das ja auch auf einen ganzen Container mit Menupunkten ausdehnen. Dort scheint es (ich hab' mir den Quelltext nicht angesehen) mit CSS gemacht zu sein. Andreas |
|
|
|
|
25.02.2004 - 15:02
Beitrag
#4
|
|
|
Kommt Zeit, kommt Rat, kommt Conrad!  Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
Canhost Confix
Andreas hat recht, hier ein auszug der Quellcode: QUELLTEXT <LINK href="skins/skinblue/style.css" rel=stylesheet type=text/css>
</HEAD> <BODY bgColor=#ffffff bottomMargin=0 leftMargin=0 topMargin=0 MARGINHEIGHT="0" MARGINWIDTH="0"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%" bgcolor="#FFFFFF"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="skins/skinblue/pics/bg_top_left.jpg" width="12" height="29"> </td> <td><img src="skins/skinblue/pics/tab_left.jpg" width="11" height="28"> </td> <td width="100%" background="skins/skinblue/pics/tab_middle.jpg" > <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td nowrap class="titel-2">Übersicht </td> </tr> </table> Kleine Grafiken und CSS wäre wohl die Lösung, die PopUps natürlich mit JS wie 'Heinzi' schrieb. cu Conny |
|
|
|
|
25.02.2004 - 15:20
Beitrag
#5
|
|
|
is getting harder Gruppe: User Beiträge: 18 Mitglied seit: 07.07.2003 Mitglieds-Nr.: 887 |
Hallo,
wenn's ohne JS sein soll, probier mal folgendes: http://www.redmelon.net/tstme/4corners/ Ansonsten wurde das vor kurzem auch auf news://de.comm.infosystems.www.authoring.misc diskutiert (Stichwort: Runde Ecken) Gruss Theo |
|
|
|
|
25.02.2004 - 15:40
Beitrag
#6
|
|
|
DELETE FROM users WHERE search_count < 1 Gruppe: Admin Beiträge: 314 Mitglied seit: 15.07.1976 Wohnort: Osnabrück Mitglieds-Nr.: 2 |
moin!
Erstmal danke an Heinzelhund.... Die grafische Umsetzung der Tabelle war kein Problem (schließlich kann ich ja HTML... *g*). Was nun aber auffällt ist, dass die durch visibility: hidden versteckten Elemente natürlich immer noch den Platz einnehmen, welchen sie bei der Anzeige auch haben. Ist: 
Soll: 
Habe schon mit 'display' anstatt 'visibility' rumgedoktort, aber ohne wirkliche resultate.... Und entweder wird der z-index nicht wirklich interpretiert, oder ich wende den verkehrt an: QUELLTEXT #body {
.... .... z-index: 0 } #maintable { .... .... z-index: 1 } #menuepunkt { .... .... z-index: 2 } #untermenue { .... .... z-index: 3 } Die Untermenüpunkte positioniere ich relativ zum vorher definierten Button.... Die anderen Tags (Body, Maintable) bzw. die Buttons positioniere ich garnicht - bis auf den z-index. Vermutlich liegt da irgendwo der Hund begraben (ups... Sorry! *g*)  CSS mag mich nicht, ich mag es heute auch nicht!
Mehr Kaffee!! :-) Aber trotzdem Danke! - Ich mag JavaScript eigentlich nicht, aber in diesem Fall ist es garnicht so schlecht.... 
have fun! Lars |
|
|
|
|
25.02.2004 - 15:40
Beitrag
#7
|
|
|
____________________ Gruppe: Admin Beiträge: 1.220 Mitglied seit: 20.10.2001 Mitglieds-Nr.: 3 |
ZITAT wenn's ohne JS sein soll, probier mal folgendes:
Das ist eine wirklich coole Methode, die Sache ohne Tabellen zu lösen. Aber um ein "aufpoppendes" Menu zu erzeugen, wird man wohl um Javascript nicht wirklich rumkommen ... ich habe zwar schon mal was mit CSS gesehen, meine aber, dass das nicht überall vernünftig lief. Naja, hätte es ja mit Javascript gemeinsam http://www.redmelon.net/tstme/4corners/
Andreas |
|
|
|
| Gast_heinzelhund_* |
25.02.2004 - 16:37
Beitrag
#8
|
|
Gäste |
ZITAT Habe schon mit 'display' anstatt 'visibility' rumgedoktort, aber ohne wirkliche resultate.... Und entweder wird der z-index nicht wirklich interpretiert, oder ich wende den verkehrt an Hallo, 'display' ist auch mir irgendwie ein Rätsel. Eigentlich müsste es funktionieren. Entweder sind wir zu dumm, es anzuwenden, oder die Browser interpretieren es nicht richtig. Ich tendiere einmal zu Letzterem. :wink: Du kannst aber auch normal mit 'z-index' arbeiten. Wahrscheinlich hast du lediglich nicht 'position:relative/absolute' verwendet. Dann funktionierte 'z-index' nicht. Ciao Heinzelhund |
|
|
|
|
25.02.2004 - 17:25
Beitrag
#9
|
|
|
DELETE FROM users WHERE search_count < 1 Gruppe: Admin Beiträge: 314 Mitglied seit: 15.07.1976 Wohnort: Osnabrück Mitglieds-Nr.: 2 |
moin!
Jo, das wars.... der funktionierende CSS Code sollte in etwa so aussehen, damit es im Mozilla und IE klappt: QUELLTEXT body {
background-color: #c3dcc8; position:absolute; z-index: 0; } #schalter { position: relative; left: 2px; top:0px; z-index: 2; } #Menueins { visibility: hidden; position: absolute; left: 90px; top: 5px; z-index: 3; } z-index 1 habe ich mir als 'Platzhalter' gelassen - vielleicht brauch ich den noch irgendwann... :-) Vielen Dank nochmal, auch für die 'runde div Lösung'! have fun und Feierabend! Lars |
|
|
|
| Google Bot |
Beitrag
#
|
 Google Ads |
|
|
|
|
|
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:
|
Vereinfachte Darstellung | Aktuelles Datum: 26.04.2024 - 19:12 |