Morgen zusammen,
ich habe eine navi erstellt. Und wenn ich die hover dann rotatet sich auch ein pfeil und wenn ich auf die untermenus draufhover ein punkt.
Nun meine Frage, wenn ich jetzt einfach wieder von diesen untermenus und obermenus weggehe, dann wird sofort aus dem bewegenden span element wieder das alte.
Wie kann ich es machen, dass diese span-elemente auch beim verlassen langsam zurück rotieren/moven?
Hier meine Dateien:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Test Webseite von Stef</title>
<link href="index.css" rel="stylesheet" type="text/css">
<link rel="icon" href="icons/favicon.ico" type="img/x-icon"> <!-- Favicon eingebunden -->
</head>
<body>
<!--Navigation -->
<div id="navigation">
<nav>
<ul>
<li class="top">
<a href="#" class="drop">Home
<span class="zusatz">></span>
</a>
<div class="down">
<ul>
<li class="untermenu"><a href="#">Über uns <span class="zusatz2">°</span></a></li>
<li class="untermenu"> <a href="#">Leistungen <span class="zusatz2">°</span></a></li>
<li class="untermenu"><a href="#">Websprachen <span class="zusatz2">°</span></a>
</ul>
</div>
</li>
<li class="top">
<a href="#" class="drop">Slideshow
<span class="zusatz"> ></span>
</a>
<div class="down">
<ul>
<li class="untermenu"><a href="#">Sommer <span class="zusatz2">°</span></a></li>
<li class="untermenu"><a href="#">Winter <span class="zusatz2">°</span></a></li>
<li class="untermenu"><a href="#">Herbst <span class="zusatz2">°</span></a></li>
</ul>
</div>
</li>
<li class="top">
<a href="#" class="drop">Bildergalerie
<span class="zusatz"> ></span>
</a>
<div class="down">
<ul>
<li class="untermenu"><a href="#">Lieblingsbilder <span class="zusatz2">°</span></a></li>
<li class="untermenu"><a href="#">Tierbilder <span class="zusatz2">°</span></a></li>
<li class="untermenu"><a href="#">Schulbilder <span class="zusatz2">°</span></a></li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
<div id="seitenbereich">
<div id="search">
<form>
<input type="search" id="search_things" placeholder="searching..." />
<input type="submit" id="suchfunktion" value="Suchen!" title="Suchen!"/>
</form>
</div>
<p>Das ist der Seiteninhalt</p>
</div>
<div id="fußbereich">
<footer>
<p> Dies ist der Fußbereich</p>
</footer>
</div>
</body>
</html>
Alles anzeigen
CSS
*
{
margin: 0px;
padding: 0px;
font-family: Arial, sans-serif;
}
/*Navigation*/
div#navigation
{
position:relative;
width: 100%;
height: 43px;
background-color: black ;
}
#navigation ul
{
padding: 0px;
margin: 0px;
list-style-type: none;
}
#navigation li.top
{
float: left;
}
.top a
{
float: left;
width: 150px;
height: 20px;
text-align: center;
padding: 10px 5px;
color: aqua;
text-decoration: none;
display: block;
border-right: 3px solid cyan;
border-bottom: 3px solid cyan;
}
.untermenu a
{
color: cyan;
text-decoration: none;
width: 150px;
padding: 10px 5px;
margin: 0px;
float:left;
background-color: rgba(0, 0, 0, 0.7);
clear:both;
border-right: 1px solid cyan;
border-left: 1px solid cyan;
border-bottom: 1px solid cyan;
}
.top ul
{
position: absolute;
top:43px;
display: none;
}
li.top a:hover
{
color: yellow;
background-color: rgba(5, 255, 218, 0.8);
}
.top:hover ul
{
display:block;
}
li.untermenu a:hover
{
background-color: rgba(0, 0, 70, 1);
color: chartreuse;
font-weight: 700;
}
.top:hover .drop
{
background-color: blue;
color: yellow;
height: 20px;
}
/*rotierender Pfeil*/
span.zusatz
{
position: relative;
display: block;
top: -15px;
left: 50px;
color: white;
padding-left: 5px;
}
.top:hover .zusatz
{
transition: all 0.5s ease-in;
transform: rotate(90deg);
color: red;
}
/*bewegende Kreise*/
span.zusatz2
{
position: relative;
top:-15px;
left: 70px;
display: block;
color: white;
}
.untermenu:hover .zusatz2
{
transition: all 1s ease-in;
transform: translate(-8px);
color: red;
}
/*Seitenbereich*/
div#seitenbereich
{
background-color: gray;
width: 100%;
height: 900px;
}
#seitenbereich p /*Nur zum besseren sehen*/
{
padding-top: 40px;
font-weight: 900;
}
div#fußbereich
{
background-color: brown;
width: 100%;
height: 300px;
}
#fußbereich p /*Nur zum besseren sehen*/
{
padding-top: 50px;
padding-left: 50px;
font-weight: 900;
}
/*Search-bar*/
#search form
{
padding-left: 10px;
padding-top: 30px;
text-align: right
}
input#search_things
{
background-image: url(icons/Search.png);
background-repeat: no-repeat;
height: 20px;
border: none;
text-indent: 20px; /*Tut den searchtext nach rechts verschieben*/
}
input#suchfunktion
{
height: 40px;
width: 60px;
padding: 5px 5px 5px 5px;
background-color:black;
color: aqua;
border: none;
border-radius: 20px;
}
input#suchfunktion:hover
{
cursor: pointer;
}
Alles anzeigen
Hoffe ihr könnt mir helfen. Und ein Danke im Voraus.
Stef
