| Autor | Zpráva | ||
|---|---|---|---|
| Honza Kouřil Profil |
Zdravím,
z jecas.cz jsem si stáhnul návod na plynule se posouvající :hover efekt, ale nemůžu přijít na to, jak z níže uvedeného udělám vysouvací menu: <html>
<head>
<style>
.menu {
position: relative;
overflow: hidden;
background: rgb(10,20,40);
}
.menu a {
float: left;
width: 100px;
text-align: center;
padding: .5em 0 .7em 0;
text-decoration: none;
color: #fff;
z-index: 1;
position: relative;
}
.menu span {
position: absolute;
height: 100%;
background: #1081DD;
border-bottom: 5px solid #8ECCF0;
width: 100px;
bottom: 0;
left: -100px;
transition: left .2s;
}
.menu a:nth-child(1):hover ~ span {left: 0}
.menu a:nth-child(2):hover ~ span {left: 100px}
.menu a:nth-child(3):hover ~ span {left: 200px}
.menu a:nth-child(4):hover ~ span {left: 300px}
.menu a:nth-child(5):hover ~ span {left: 400px}
.menu a:nth-child(6):hover ~ span {left: 500px}
</style>
</head>
<body>
<div class="menu">
<a href="">Text odkazu</a>
<a href="">Text odkazu</a>
<span></span>
</div>
</body>
</html>Předem díky za radu. |
||
|
Časová prodleva: 8 let
|
|||
0