• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

aufahrbares menü?

BDG

BDG

Mitglied
hallo Leute.
Wie kann ich es machen das ein Button (oder uach verlinktes Bild) wenn ich mit der Maus drüber fahre sich etws nach unten bewegt ... also so asuklappt .... ich denke das geht mit css aber javacript wär auch nich schlimm :D
weiß jemand wie das geht ?
 
Werbung:
Werbung:
aloheo's links sahen irgendwie schon mehr danach aus aber ich konte die demo nich sehen :( @Arcsinh and EndofGreen : ne sowas mein ich nich sry :D also was ihr mir gezeigt habt is ja soein dropdownmenü ... aber das soll einfach ein button (bzw. verlinktes Bild oder so) was wenn man mit der maus drüberfährt sich etwas bewegt ...
Also ich hab mal ein Bild hochgeladen (ja ich weiß sieht wunderschön aus) wo man sehen kann was ich meine :D
lalala.jpg
^^hihi
 
Werbung:
hmmm bewegen wäre cooler ... aber nicht mit CSS3 weil das unterstützen ja so wenig browser :( dann lieber mit javascript oder anderem :D
 
Werbung:
hast du das jetzt irgendwie verwechseld oder bin ich doof ? ich seh da nur solche divs die man scroolen kann ...

EDIT: ich hab jetzt 2 Stunden gegooglet und siehe da : http://www.ohne-css.gehts-gar.net/0024.php

^^genau das was ich haben will ^^ muss gleich mal testen :D

EDIT: oh ich glaub ich bin echt zu dumm dafür !
http://www.ohne-css.gehts-gar.net/demo/0024b.html
da ist das ja das die unten sind die bilder und etwas nach oben gehen wenn man die maus drüberbewegt. Ich will es das die von oben am Browserrand oben rausgucken und dann etwas runtergehen wenn man mit der Maus drüberfährt ... das ha ich jetzt wieder soooo lange versucht aber das krig ich einfach nich hin !! kann mir jemnad sagen wie ich das umbaue ?
 
Zuletzt bearbeitet:
Code: 
.home
{
background: url(../img/0024/button1h.gif);
background-position: 0;
background-repeat: no-repeat;
}

.about
{
background: url(../img/0024/button2h.gif);
background-position: 0;
background-repeat: no-repeat;
}

.contact
{
background: url(../img/0024/button3h.gif);
background-position: 0;
background-repeat: no-repeat;
}

a.home:hover, a.about:hover, a.contact:hover
{
background-position: 0 17px;
}

Hab´s jetzt nicht getestet, müsste aber so passen.
 
ne das funktioniert nicht :( da sieht man nur 3 punkte ... und keine Bilder :( also hier nochmal die GANZEN codes :

Code: 
body {
background-color:#FFFF66;
}




.home
{
background: url(Home.png);
background-position: 0;
background-repeat: no-repeat;
}

.about
{
background: url(Home.png);
background-position: 0;
background-repeat: no-repeat;
}

.contact
{
background: url(Home.png);
background-position: 0;
background-repeat: no-repeat;
}

a.home:hover, a.about:hover, a.contact:hover
{
background-position: 0 17px;
}

Und der html-code:

HTML: 
<html>
<head>
<title>TransMens. Das kleine mini mine test-social-network</title>
<link rel="stylesheet" type="text/css" href="TransMens.css" />
</head>
<body>




<div id="wrapper">

<h2>Top-Register-Navi mit Hover-Effekt</h2>

<div id="navi">

<ul>
<li><a class="home" href="#"></a></li>
<li><a class="about" href="#"></a></li>
<li><a class="contact" href="#"></a></li>
</ul>

<br style="clear: both;">

</div><!--Ende navi-->


<div id="content">

Content-Inhalt

<br style="clear: both;">
</div><!--Ende content-->
</div><!--Ende wrapper-->

</body>
</html>
 
Werbung:
Code: 
.home
{
background: url(Home.png);
background-position: 0;
background-repeat: no-repeat;
height: höhe des Bildes;
width: breite des bildes;
}
HTML: 
<a class="home" href="#">&nbsp;</a>
</span>
 
hmm ne das geht nicht ... man sieht da immernoch soein punkt wo eigentlich das bild sein sollte ... nur dahinter is jetzt nich ein kleiner strich und wenn man mit der maus drüberfährt isser nich mehr da ...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben