Animation per CSS: Gleiteffekt beim Hovern in horizontaler Navbar
In der horizontalen Navbar auf Gäste-Etage gibt es einen Gleiteffekt, den ich schön finde.
Derjenige der es gebaut hat, setzt dafür jedoch zusätzliches inhaltsleeres Markup in Form eines DIV direkt unter der Liste ein. Und Inline-Styles mit vermutlich ausgerechneten Werten. Beides möchte ich nicht.
Ich bin mit Animationseffekten via CSS noch unerfahren. Kennt ihr eventuell ein schönes Beispiel mit so einem horizontalen "Gleiteffekt", welches ohne so ein extra DIV auskommt?
In der genannten Seite kommen opacity, transform und transition zum Einsatz.
Der hier verwendete Code
<style>
#article40{
font-family:sans-serif;
font-size:16px;
cursor: pointer;
background: #92be45;
width:1070px;
}
#article40 ul{
position:relative;
height:35px;
padding:0;
}
#article40 ul li{
display:inline;
text-align:center;
}
#article40 ul li:first-child a{
width:150px;
}
#article40 ul li:nth-child(2) a{
width:145px;
}
#article40 ul li:nth-child(3) a{
width:145px;
}
#article40 ul li:nth-child(4) a{
width:140px;
}
#article40 ul li:nth-child(5) a{
width:146px;
}
#article40 ul li:nth-child(6) a{
width:145px;
}
#article40 ul li:nth-child(7) a{
width:154px;
}
#article40 ul li a{
display:inline-block;
position:relative;
z-index:2;
padding:5px 0 5px 0;
margin:0;
width:100%;
height:24px;
color: #fff;
text-decoration:none;
text-shadow:0 1px 0 white;
transition:background-color .3s ease;
}
#article40 ul li a:hover,ul li a:focus{
color:#c351fa;
transition:background-color .3s ease .4s;
}
#article40 ul li:last-child::after{
content:"";
position:absolute;
z-index:0;
left:-170px;
bottom:0px;
display:inline-block;
width:160px;
height:35px;
background:#ccc;
border-left:3px solid white;
border-right:3px solid white;
padding:0;
margin-left:0px;
transition:all .5s ease;
background: #f37021;
opacity:1;
}
#article40 ul li:hover ~ li:last-child::after,
#article40 ul li:last-child:hover::after{
background:orange;
width:150px;
}
#article40 ul li:first-child:hover ~ li:last-child::after{
left:0;
width:150px;
}
#article40 ul li:nth-child(2):hover ~ li:last-child::after{
left:150px;
width:150px;
}
#article40 ul li:nth-child(3):hover ~ li:last-child::after{
left:300px;
width:150px;
}
#article40 ul li:nth-child(4):hover ~ li:last-child::after{
left:450px;
width:150px;
}
#article40 ul li:nth-child(5):hover ~ li:last-child::after{
left:600px;
width:150px;
}
#article40 ul li:nth-child(6):hover ~ li:last-child::after{
left:750px;
width:150px;
}
#article40 ul li:nth-child(7):hover ~ li:last-child::after{
left:900px;
width:163px;
}
a:hover {
color: #90bf3e;
}
</style>
<section id="article40" class="crayon article-css-40 demoTime">
<ul class="main-menu noJS">
<li class="current"><a href="de_home.html">Gäste-Etage</a></li>
<li><a href="de_prices.html">Zimmer</a></li>
<li><a href="de_seminar.html">Seminarbereich</a></li>
<li><a href="de_gallery.html">Galerie</a></li>
<li><a href="de_request.php">Anfrage</a></li>
<li><a href="de_location.html">Lage</a></li>
<li><a href="de_links.html">Service</a></li>
<li></li>
</ul>
</section>