Mouseover Pfeileffekt

[Mario097]

<header>
	<div id="Menubar">
    
    	<a href="#Home"><div id="Home"><span>HOME</span></div></a>
        <a href="#"><div id="Leistungen"><span>LEISTUNGEN</span></div></a>
        <a href="#"><div id="Referenzen"><span>REFERENZEN</span></div></a>
        <a href="#"><div id="Kontakt"><span>KONTAKT</span></div></a>
        <div id="Pfeil" oncontextmenu="return false;"><span>&gt;</span></div>
        
    </div>
</header>

CSS:

header {
	height:270px;
	width:100%;
	background-color:#282828;
	border-bottom:1px solid #000;
}

/* MENU */

#Menubar {
	width:100%;
	height:50px;
	background-color:transparent;
	position:absolute;
	top:210px;
	float:left;
}

#Home {
	position:relative;
	height:50px;
	width:55px;
	left:40px;
	color:white;
	font-size:130%;
	float:left;
}

#Leistungen {
	position:relative;
	height:50px;
	width:115px;
	margin-left:80px;
	color:white;
	font-size:130%;
	float:left;
}

#Referenzen {
	position:relative;
	height:50px;
	width:120px;
	margin-left:40px;
	color:white;
	font-size:130%;
	float:left;
	transition-property: margin-left;
    transition-duration: 4s;
}

#Kontakt {
	position:relative;
	height:50px;
	width:90px;
	margin-left:40px;
	color:white;
	font-size:130%;
	float:left;
}

#Pfeil {
	position:relative;
	height:50px;
	width:90px;
	margin-left:10px;
	color:white;
	font-size:130%;
	float:left;
	text-transform:
	
}


span {
	position:relative;
	top:12px;
}

#Home:hover {
	color:#6FE6E6;  
	-webkit-animation-name:MenuAnimation; 
	-webkit-animation-duration:200ms; 
	-webkit-animation-delay:20ms; 
	-webkit-animation-timing-function:ease-in; 
	-webkit-animation-fill-mode:forwards;
	border-bottom:1px solid white;
}

#Leistungen:hover {
	color:#6FE6E6;  
	-webkit-animation-name:MenuAnimation; 
	-webkit-animation-duration:200ms; 
	-webkit-animation-delay:20ms; 
	-webkit-animation-timing-function:ease-in; 
	-webkit-animation-fill-mode:forwards;
	border-bottom:1px solid white;
}

#Referenzen:hover {
	color:#6FE6E6;  
	-webkit-animation-name:MenuAnimation; 
	-webkit-animation-duration:200ms; 
	-webkit-animation-delay:20ms; 
	-webkit-animation-timing-function:ease-in; 
	-webkit-animation-fill-mode:forwards;
	border-bottom:1px solid white;
}
#Kontakt:hover { /* schießt pfeil nach rechts  > */
	color:#6FE6E6;  
	-webkit-animation-name:MenuAnimation; 
	-webkit-animation-duration:200ms; 
	-webkit-animation-delay:20ms; 
	-webkit-animation-timing-function:ease-in; 
	-webkit-animation-fill-mode:forwards;
	border-bottom:1px solid white;

}

@-webkit-keyframes MenuAnimation {
	0% {color:white;}
	10% {color:#6FE6E6;}
	100% {margin-right:35px; color:#6FE6E6;}
}

vlt hilft das weiter zum besser verstehen was ich meine.

Probier mal das Menu durch und dann weißt du was ich meine, es springt zu schnell zurück

 

[Mario097]

und wie mach ich das da so ein Feld kommt mit code darin? danke

 

[tombe]

1) Setze bitte deinen Code in die entsprechenden Code-Tags (siehe Signatur)

2) Was für eine Feld mit Code darin?

Gewöhne dir doch bitte an deine Fragen klarer zu stellen und gib dir wenigstens ein bisschen Mühe beim Schreiben!

 

[Mario097]

Ok

Ich möchte meine Animation (siehe Code ) bei "Mouseout" Rückwärts langsam abspielen.

Html-Code:

@-webkit-keyframes MenuAnimation {
	0% {color:white;}
	10% {color:#6FE6E6;}
	100% {margin-right:35px; color:#6FE6E6;}
}

#Home:hover {
	color:#6FE6E6;  
	-webkit-animation-name:MenuAnimation; 
	-webkit-animation-duration:200ms; 
	-webkit-animation-delay:20ms; 
	-webkit-animation-timing-function:ease-in; 
	-webkit-animation-fill-mode:forwards;
	border-bottom:1px solid white;
}

 

[tombe]

Ich habe dir oben bereits ein Beispiel gezeigt wie es geht.

Da dein obiger Code nicht das geringste davon enthält gehen ich davon aus das dich die Vorschläge eh nicht interessieren.

Deshalb ist für mich hier jetzt Schluß!

 

[Mario097]

die beispiele haben nicht mit einer Seite zu tun sondern den Code habe ich bei einer anderen website eingebaut bei dieser Animation geht es um eine andere Seite.

 

[tombe]

So hier die Antwort auf die Frage die du mir per PN gestellt hast. Mit diesem Code wandert das Bild horizontal mit dem Mauszeiger mit:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("span").hover(
    function(){
        $('#p').css("display", "block");
    },
    function(){
        $('#p').css("display", "none");
    }
);

$('#menue').mousemove(function(e) {
// - 10 entspricht der halben Höhe des Bildes damit es Mittig zum Mauszeiger positioniert ist
        $('#p').css("left", e.pageX - 10);
});

});
</script>

<span style="width: 50px; background-color: #808080;">Men&uuml; 1</span>
<span style="width: 50px; background-color: #00FFFF;">Men&uuml; 2</span>
<span style="width: 50px; background-color: #00FF00;">Men&uuml; 3</span>
<span style="width: 50px; background-color: #0000FF;">Men&uuml; 4</span>
<span style="width: 50px; background-color: #FF00FF;">Men&uuml; 5</span>
<div id="p" style="display: none; position: absolute; left: 110px;">
	<img src="http://www.tutorials.de/style/v11/images/statusicon/forum_new-36.png" width="20" />
</div>