rollovermenü

Schrat · 11. Jan. 2007

Hallo zusammen,
brauche ich dringend Hilfe. Über die Suche habe ich nach einer Stunde leider nichts gefunden, was mir weiterhilft. Sicherlich gibts hier irgendwo eine Problemlösung, aber wo?

Also, folgende Situation:
Ich habe ein Hauptmenü aus 4 Quadraten (65x65px grafiken) die zu einem großen quadrat angeordnet sind. jetzt möchte ich einen rollovereffekt haben. dieser soll aus dem kleinen Quadrat ein großes (135x135) machen, in welchem dann meine navi drin ist. mit einem zweiten bild sollte es nicht sein, da es dynamisch werden soll.
im einzelnen habe ich folgende probleme:

- wie mache ich überhaupt einen rollover effekt

- wie schaffe ich, dass der rollovereffekt das große quadrat nicht nur nach unten rechts öffnet, sondern auch nach oben rechts, oben links, unten links?

- wie binde ich die linkliste/navi ein? (denke, das ist ja dann kein problem mehr)

Würde mich über Hilfe freuen,

gruß schrat

pit-r · 11. Jan. 2007

Und nochmal Moin!

Deinen Thread im JS-Forum schließe ich. Vielleicht errätst Du irgendwann, warum...

Ahoi - Pit

Edit:

Schrat schrieb:
wollte ihn gerade eben löschen, das geht nun nicht mehr

Das wäre Dir auch vor der Schließung nicht gelungen...

Schrat · 11. Jan. 2007

wollte ihn gerade eben löschen, das geht nun nicht mehr

bubu-der-uhu · 12. Jan. 2007

- rollover mit CSS und :hover (suchst du Forum, Google etc...)

- indem du deine :hover box einfach weiter nach oben links schiebst -> dadurch siehts aus als bleibe es in der Mitte

- sieh dir CSS Beispiele an

Das sich mit Css in einem Element(Menü) weitere Elemente (Menüpunkte) öffnen ist meines Wissens nicht sehr einfach.
Aber eventuell kannst du dir hierraus etwas nützliches Stricken:
Stu Nicholls | CSSplay | CSS only menus

... kuck dir dort Die Menüs: "Menus - Multi-Level CSS Only" an.
Mit etwas Leidenschaft könnte dir dein Menü sogar gelingen und du brauchst nicht mal JS.

dere, bubu

Und nochmal Moin!

Deinen Thread im JS-Forum schließe ich. Vielleicht errätst Du irgendwann, warum...

Ahoi - Pit

Edit:
Zitat:
Zitat von Schrat
wollte ihn gerade eben löschen, das geht nun nicht mehr
Das wäre Dir auch vor der Schließung nicht gelungen...

... du bist sooo nett

-nur helfen Ihm solche Antworten leider garnichts.

Schrat · 12. Jan. 2007

also, schon mal ein dickes dankeschön. hab geschafft, das es im mozilla funktioniert. aber der IE muckt mal wieder. ich hau hier mal den quell text rein, auch wenn er sehr lang ist. vielleicht kann einer von euch was finden? ich denke es liegt an der verlinkung, weiß es aber nicht.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>

 <style>


#MenueProgramm { position:absolute; top:240px; left:186px; z-index:4; }


  .MenueProgramm {
z-index:7;
font-size:90%;

margin:0px 0 0 0px;

}

.MenueProgramm ul {
padding:0;
margin:0;
list-style-type:none;
display:block;
width:65px;
height:65px;
position:absolute;
border-width:0px 0px 0 0px;
background:#dde;


}

.MenueProgramm li {
background:transparent;
height:12px;
}
* html .MenueProgramm li {margin-left:0px; }
.menu table {position:absolute; border-collapse:collapse; top:100; left:0; z-index:100; font-size:1em; width:0; height:0;}

.menu a, .menu a:visited {
display:none; 
text-decoration:none;
height:0px;
width:65px;
color:#000;
text-indent:5px;
background:#fff;
}
* html .menu a:hover {color:#fff; background:#999;}

.menu :hover > a {
color:#fff; 
background:#fff;
}

.MenueProgramm ul ul {
z-index:2000;
width:130px;
height:130px;
visibility:hidden;
position:absolute;
top:0px;
left:0px;
}
.MenueProgramm ul li:hover ul,
.MenueProgramm ul a:hover ul {
visibility:visible;
background:#rrr;
}
.MenueProgramm ul.top_programm {top:-65px; }


</style>


<!-- Menü Programm -->

<div id="MenueProgramm" class="MenueProgramm">
<ul>
<li><img src="bilder/MP_over.jpg">

<ul class="top_programm">
	<li><a href="#nogo">Item 3a</a></li>
	<li><a href="#nogo">Item 3a</a></li>
	<li><a href="#nogo">Item 3a</a></li>
	<li><a href="#nogo">Item 3a</a></li>
</ul>

</li>
</ul>

</div>



 </BODY>
</HTML>

grüße, schrat

edit: danke pit-r

bubu-der-uhu · 15. Jan. 2007

nur so auf den ersten Blick:

das <style> muss in den Head kommen (also vor </head>).

und sachen wie <HEAD>, <BODY>, <META>, <TITLE>, etc. schreib Ich immer klein - auch wenns nicht unbedingt notwendig ist

***EDIT:

Wenn du nun für:
.MenueProgramm ul.top_programm {top:-32px; left:-32px; } einsetzt, sieht es aus als würde es aus der Mitte her aufploppen...
Zumindest fast aus der Mitte da man 65px nicht durch 2 Teilen kann, hab Ich mal 32px genommen.

Schrat · 15. Jan. 2007

hmm, das mit dem head hab ich hier wohl nur versehentlich falsch gemacht. in meiner originaldatei wars richtig, aber trotzdem danke. im firefox funktionierts dann auf jeden fall. soweit war ich auch schon (und mächtig stolz drauf). aber im neuen IE geht mal gar nix... im alten weiß ich jetzt gar nicht. aber wenns im neuen nicht klappt, trau ich dem alten das auch nicht zu.

werde mal weiter versuchen und hoffentlich bald eine lösung finden. danke.

Schrat · 19. Jan. 2007

also, das mit dem rollovermenü klappt mittlerweile im ie7 und auch im opera, FF ja sowiso.

habe viel mit stu nicholsbla gearbeitet Stu Nicholls | CSSplay | A CSS flyout menu with overlap , denn der hat ja theoretisch eine lösung. nur durch meine ständiges bearbeiten und nur mit der kontrolle im ie7 habe ich wohl ein paar sachen gelöscht. nur komme ich nicht drauf, was.

der folgende quelltext ist aus meiner seite:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>später</title>

<meta name="Author" content="kommt noch">
<meta name="Keywords" content="anderes mal">
<meta name="Description" content="jaja">
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=">
<meta http-equiv="imagetoolbar" content="no">


<style>

#menu1 { position:absolute; top:241px; left:113px; z-index:3; }

.menu1 {font-family: tahoma; width:66px; height:66px; position:relative; margin:0; font-size:12px; margin:0px 0;}
.menu1 ul li a,
.menu1 ul li a:visited {display:block; text-decoration:none; color:#000; width:66px; height:14px; text-align:center; border:0px solid #fff; border-width:0px 0px 0 0; background:#99cccc; line-height:14px; font-size:12px;}
/* besuchte links anzeigen */

.menu1 ul {padding:0; margin:0;list-style-type: none;}
.menu1 ul li {float:left; margin-right:0px; position:relative; width:132px; height:13px;}
.menu1 ul li ul {display: none;}
.menu1 ul li a.hide { width:66px; height:66px; vertical-align: middle; line-height:66px;}
.menu1 ul li ul li a.popup { width:132px; height:132px;}


/* für nicht ie browser */
.menu1 ul li:hover a {color:#fff; background:#cc0000;}
.menu1 ul li:hover ul {display:block; position:absolute; top:-66px; left:-66px; width:132px; height:132px;}
.menu1 ul li:hover ul li:hover a.hide {width:132px;}
.menu1 ul li:hover ul li ul {display: none;}
.menu1 ul li:hover ul li a {display:block; background:#99cccc; color:#000; width:132px;}
.menu1 ul li:hover ul li a:hover {background:#99cccc; color:#000;}
/* Farbe der Links, über die man geht */

.menu1 ul li:hover ul li:hover ul {display:block; position:absolute; left:132px; top:0; color:#000;}
.menu1 ul li:hover ul li:hover ul li a {display:block; width:132px; background:#dfc184; color:#000;}
.menu1 ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

</style>
</head>

<div class="menu1" id="menu1">

<ul>
<li><a class="hide" href="http://www.cssplay.co.uk/menu/index.html">Programm</a>

<ul>
<li><a class="popup"></a></li>

<li><a href="#nogo" title="Punkt 1">Yeah Baby</a></li>
<li><a href="#nogo" title="Punkt 1">Hola Chica</a></li>

</ul>

</li>

</div>
</body></html>

eine weiteres wohl schnell lösbares problem: ich habe einen container mit mindesthöhe. nun möchte ich an ihm weitere bereiche ausrichten, so das diese im falle einer container vergrößerung mit nach unten rutschen. denke da weiß sofort jeder von euch wie das geht, aber für nen laien wie mich...

rollovermenü

Schrat

New member

pit-r

Guest

Schrat

New member

bubu-der-uhu

New member

Schrat

New member

bubu-der-uhu

New member

Schrat

New member

Schrat

New member