Suche im Forum:
Suchen


Autor Nachricht
Beitrag12.07.2009 um 20:17 (UTC)    
Titel: CSS Menü hover effekt

Hallo zusammen ,
ich hab ein horizontales foldoutmenü erstellt.
jetzt hab ich jede box mit einer grafik als hintergrund belegt.
dann hab ich auch ein grafik (ist ein bissle anders als die oberer) als hintergrund beim hover effekt gemacht. wenn ich jetzt dann drüber fahre über das feld ist für einen kurzen augenblick also zwischen dem wechsel der grafik für normala udn hover der hintergrund schwarz.

kann man den es nciht so machen, das der hintergrund nicht schwarz wird sondern evtl schneller wechselt so das man das net sieht?

hier ist mal der code für das menü:

Zitat:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>Foldoutmenue Horizontal</title>

<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 8px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

.menu
{
position: absolute;
z-index: 3;
top: 200px;
left: 30px;
}

.menu li
{
width: 110px;
float: left;
}

.menu a
{
border: 1px solid #888;
background-image:url(http://img.webme.com/pic/p/pur-fanseite/nav.jpg);
text-decoration: none;
text-align: center;
font-weight: normal;
cursor: default;
margin: 0px 2px;
display: block;
height: 30px;
color: #000;
}

.menu a:hover
{
background-image:url(http://img.webme.com/pic/p/pur-fanseite/hovernav.jpg);
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8, #smenu9
{
font-size: 8px;
display: none;
width: 110px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a, #smenu7 a, #smenu8 a, #smenu9 a
{
font-weight: normal;
padding-top: 2px;
border-top: 0px;
cursor: pointer;
}
//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>

</head>
<body>

<div class="menu">
<ul>
<li><a href="http://pur-fanseite.de.tl/Home.htm" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Home</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
</ul>
</li>


<li><a href="http://pur-fanseite.de.tl/Band-Geschichte.htm" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Bandgeschichte</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://pur-fanseite.de.tl/1975-_-1990.htm">1975 - 1990</a></li>
<li><a href="http://pur-fanseite.de.tl/1990-_-2000.htm">1990 - 2000</a></li>
<li><a href="http://pur-fanseite.de.tl/2000-_-2008.htm">2000 - 2009</a></li>
</ul>
</li>

<li><a href="http://pur-fanseite.de.tl/Musiker.htm " onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Pur Musiker</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://pur-fanseite.de.tl/Hartmut-Engler.htm"> Hartmut Engler</a></li>
<li><a href="http://pur-fanseite.de.tl/Ingo-Reidl.htm">Ingo Reidl</a></li>
<li><a href="http://pur-fanseite.de.tl/Roland-Bless.htm">Roland Bless </a></li>
<li><a href="http://pur-fanseite.de.tl/Rudi-Buttas.htm">Rudi Buttas</a></li>
<li><a href="http://pur-fanseite.de.tl/Joe-Crawford.htm">Joe Crwaford</a></li>
<li><a href="http://pur-fanseite.de.tl/Gastmusiker.htm">Gastmusiker</a></li>
</ul>
</li>
<li><a href="http://pur-fanseite.de.tl/Discographie.htm" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Discographie</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="http://pur-fanseite.de.tl/Alben.htm">Alben </a></li>
<li><a href="http://pur-fanseite.de.tl/DVD--s--VHS.htm">VHS / DVD </a></li>
</ul>
</li>

<li><a href="http://pur-fanseite.de.tl/Pur-Live.htm" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">PUR Live</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="http://pur-fanseite.de.tl/Pur-Tour-2009.htm">PUR Tour 2009 </a></li>
<li><a href="http://pur-fanseite.de.tl/Live-auf-der-Aida.htm">Live auf der Aida </a></li>
<li><a href="http://pur-fanseite.de.tl/Benefizkonzert.htm ">Benefizkonzert </a></li>
</ul>
</li>

<li><a href="http://pur-fanseite.de.tl/Pur-B.ue.cher.htm" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">PURe Bücher</a>
<ul id="smenu6" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">
</ul>
</li>

<li><a href="http://pur-fanseite.de.tl/Bilder.htm " onmouseover="montre('smenu7');" onmouseout="cache('smenu7');">PURe Bilder </a>
<ul id="smenu7" onmouseover="montre('smenu7');" onmouseout="cache('smenu7');">
</ul>
</li>

<li><a href="http://pur-fanseite.de.tl/Kreatives.htm" onmouseover="montre('smenu8');" onmouseout="cache('smenu8');">Kreatives </a>
<ul id="smenu8" onmouseover="montre('smenu8');" onmouseout="cache('smenu8');">
<li><a href="http://pur-fanseite.de.tl/Zeichnungen.htm">Zeichnungen</a></li>
<li><a href="http://pur-fanseite.de.tl/Wallpaper.htm">Wallpaper</a></li>
</ul>
</li>

<li><a href="http://pur-fanseite.de.tl/Links.htm" onmouseover="montre('smenu9');" onmouseout="cache('smenu9');">Empfehlungen</a>
<ul id="smenu9" onmouseover="montre('smenu9');" onmouseout="cache('smenu9');">
</ul>
</li>
<li><a href="http://pur-fanseite.de.tl/Impressum.htm " onmouseover="montre('smenu9');" onmouseout="cache('smenu9');">Impressum</a>
<ul id="smenu9" onmouseover="montre('smenu9');" onmouseout="cache('smenu9');">
</ul>
</li>




aso ich weiß das bei meiner hp alles verschoben ist. ich muss das ersst noch positionieren.

und wisst ihr zufällig warum die punkte kreatives und pur live offen sind aslo amn die unterpunkte sieht? bei den anderen ist das ja nicht so. aber bei dem code kann ich keine unterschiede erkennen.

vielen dank fürs helfen

Liebe Grüße


Zuletzt bearbeitet von pur-fanseite am 12.07.2009, 21:24, insgesamt einmal bearbeitet
Beitrag12.07.2009 um 20:25 (UTC)    
Titel:

Hi, ich habe dir mal in rot makiert,
was du erweitern musst Wink

Das andere habe ich leider nicht verstanden Confused
Was willst du genau beim Hover erreichen?

mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:

Iceblue Generator | Red Generator | Butterfly Generator
Beitrag12.07.2009 um 20:35 (UTC)    
Titel:

oh mit dem roten hast du recht.
mach ich sofort hab ich vergessen.

also ich miöchte wenn man mit der maus drüber fährt ein bidlwechsel haben doch zwischen dem bildwechsel sit es immer kur schwarz udn das sieht voll doof aus
Beitrag12.07.2009 um 20:39 (UTC)    
Titel:

pur-fanseite hat Folgendes geschrieben:
also ich miöchte wenn man mit der maus drüber fährt ein bidlwechsel haben doch zwischen dem bildwechsel sit es immer kur schwarz udn das sieht voll doof aus
Hi, dasd geht aber leider nicht anders...
Das Bild muss auch laden, zwar lädt es bei mir schnell und sehe somit nichts,
aber ich kann mir vorstellen, wie es bei dir aussieht.

mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:

Iceblue Generator | Red Generator | Butterfly Generator
Beitrag12.07.2009 um 20:44 (UTC)    
Titel:

ok vielen dank. naja das kann mal wohl nciht ändern. aber wenn du auf meiner seite warst siehst du ja wie wüst es aussieht. und irgendiwe seit dme ich das menü drin hab ist alles verschoben. davor war es in ordnung. nur das schlimme ist das ein paar klassen wie header_container oder side1 nicht angezeigt werden, dabei sind sie im code. und die klassen wie z.b. side1, rechts usw hab ich aber in text über dem design eingefügt und eig nix geändert. davor hat alles funtkioniert aber als das mmenü rein kamm war das alles weg.

weißt du vlt. warum?

brauhcst du den code dafür?

Liebe Grüße Ines
Beitrag12.07.2009 um 21:34 (UTC)    
Titel:

ich hab es nun mit hilfe von coolplace hinbekommen. danke
Beitrag12.07.2009 um 21:47 (UTC)    
Titel:

pur-fanseite hat Folgendes geschrieben:
ich hab es nun mit hilfe von coolplace hinbekommen. danke
Okay Wink

Danke für die Rückmeldung!

mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:

Iceblue Generator | Red Generator | Butterfly Generator
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de