Durchsichtiges Menü

Ich hab auf einigen Seiten gesehn das man durchsichtige Menüs entwerfen kann. Leider weiß ich nicht wie?
Geht das mit JS oder CSS oder womit ist das möglich?
Weil ich finde das sieht verdammt gut aus wenn das Menü durchsichtig ist.
Hoffe mir kann wer helfen.
MFG

Borschtsch

Hallo,

eine div-Box, Tabelle oder sonst was ist standardmäßig "durchsichtig", falls du das meinst. Vielleicht zeigst du uns ja eine Beispielseite.

Gruß Borschtsch

Also ich finde das Nvidia das gut designed hat.
http://www.nvidia.de

flenders

Habe dir mal kurz den entsprechenden Code von der Nvidia-Homepage rausgesucht, der wohl für die Transparenz verantwortlich ist:

function fadeOutImage(imageID, iOpacity) {
var image = document.getElementById(imageID);
iOpacity -= 5;
changeImageOpacity(iOpacity, image);
if(iOpacity > 70) {
  setTimeout("fadeOutImage('" + imageID + "', " + iOpacity + ")", 25);
}
else 
{
  bImageHidden = true;
}
}
function fadeInImage(imageID, iOpacity) {
var image = document.getElementById(imageID);
iOpacity += 5;
changeImageOpacity(iOpacity, image);
if(iOpacity < 100) {
  setTimeout("fadeInImage('" + imageID + "', " + iOpacity + ")", 25);
}
else 
{
  //bImageHidden = true;
}
}
function changeImageOpacity(opacity, image) { 
image.style.opacity = (opacity / 100); 
image.style.MozOpacity = (opacity / 100); 
image.style.KhtmlOpacity = (opacity / 100); 
image.style.filter = "alpha(opacity=" + opacity + ")"; 
}

Ich glaube das ist der Code für den Banner wo die Bilder immer gewechselt werden. Hab auch etwas gefunden was gut aussieht.

.menuContainer
{
position: absolute;
background-image: url(/docs/TEMPLATE/474/MenuBarBackground.gif);
background-repeat: repeat-x;
font-family: arial;
font-size:8pt;
height: 22px;
width: 100%;
white-space: nowrap;
top: 80px;
z-index: +1;
padding: 0;
margin: 0;
text-align: center;
}
.menuSubContainer
{
width: 100%;
font-family: arial; 
position:relative;
font-size:8pt;
height: 22px;
margin:0; 
padding:0;
white-space: nowrap;
display:block;
float:left;
text-align: center;
}
.ulMenuLevel1{
list-style-type:none;
margin:0;
padding:0;

font-family: arial;
font-size:8pt;
}
.liMenuLevel1{
list-style-type:none;
float:left;

font-family: arial;
font-size:8pt;
}
.linkMenuLevel1{
display:block;

font-family: arial;
font-size:8pt;
}
.ulMenuLevel2{
list-style-type:none;
position:absolute;
margin: 0;
padding:0;
display:none;

background-color:#333333; 
filter: alpha(opacity=90); 
-moz-opacity: 0.9;
KhtmlOpacity: .9;
opacity: .9;
font-family: arial;
font-size:8pt;
}
.liMenuLevel2
{
line-height: 22px;
font-family: arial;
font-size:8pt;
}

.liMenuLevel2 a{
text-decoration: none;
display:block;
color: #ffffff;
width:250px;

padding-left: 25px;
font-family: arial;
font-size:8pt;
}
.liMenuLevel2 a:visited{
text-decoration: none;
display:block;
color: #ffffff;
width:250px;

padding-left: 25px;
font-family: arial;
font-size:8pt;
}

.liMenuLevel2 a:hover{
text-decoration: none;
display:block;
width:250px;

background:transparent; 
background:#424242;
color: #76B900;
font-family: arial;
font-size:8pt;
}

li:hover ul , li.over ul{ /* lists nested under hovered list items */
display: block;

font-family: arial;
font-size:8pt;
}
#mainMenuUL li>ul { 
top: auto;
left: auto;

font-family: arial;
font-size:8pt;
}

Hab das jetzt auch mal probiert mit dem background gleichzeit transparent aber auch mit ner Hintergrundfarbe. Also transparent bekomme ich ihn. Aber denn is der total durchsichtig und ich weiß nich wie ich da etwas Farbe reinbekomme.

Benutze übrigens n JS Menü und der Code wo ich das durchsichtig machen will is folgender:

document.write('td.menucell21274119 { padding-left:4; padding-right:4; background:transparent; border:1 groove #000000; }');
document.write('#submenutable21274119 { background:transparent; border-width: 0; border-color: #000000; border-style:groove}');

Wie ihr seht funktioniert das mit dem transparent. Aber mir fehlt die Farbe son bisschen im Hintergrund.
MFG

http://www.cssplay.co.uk/menus/flyout_horizontal.html

minhen

http://www.mandarindesign.com/opacity.html

Ok ich hab jetzt ne Lösung gefunden.
Habs mit der CSS Eigenschaft "opacity" und nem Alpha Filter gemacht.
War ziemlich einfach, da nur 2 Eigenschaften eingefügt wurden musste.
Trotzdem danke für eure Hilfe. Habs glaub ich auf einen von den beiden Seiten gesehn mit dem Filter und der opacity.
MFG