<style>
ul.abanico {
position: center;
width: 140px;
height: 80px;
margin: 10px auto;
list-style: none;
font: normal 16px "arial narrow", sans-serif;
}
ul.abanico li {
position: absolute;
bottom: 0;
width:80px;
height: 150px;
background: orange;
line-height: 150px;
text-align: center;
-moz-transform-origin: top center;
-webkit-transform-origin: top center;
transform-origin: top center;
-moz-transition: all .4s ;
-webkit-transition: all .4s ;
transition: all .4s ;
}
ul.abanico li a {
text-shadow: 0.1em 0.1em 0.05em #333;
display: inline-block;
width: 140px;
height: 48px;
text-decoration: none;
color: white;
line-height: 40px;
vertical-align: bottom;
}
ul.abanico:hover li {
opacity: 1;
}
ul.abanico:hover li:nth-of-type(6) {
opacity: 0;
}
ul.abanico:hover li:nth-of-type(1) {
background: green;
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
ul.abanico:hover li:nth-of-type(2) {
background: blue;
-moz-transform: rotate(32deg);
-webkit-transform: rotate(32deg);
transform: rotate(32deg);
}
ul.abanico:hover li:nth-of-type(3) {
background: purple;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
ul.abanico:hover li:nth-of-type(4) {
background: red;
-moz-transform: rotate(-32deg);
-webkit-transform: rotate(-32deg);
transform: rotate(-32deg);
}
ul.abanico:hover li:nth-of-type(5) {
background: orange;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
</style>
<ul class="abanico">
<li><a href="адрес ссылки 1">ТЕКСТ 1</a></li>
<li><a href="адрес ссылки 2">ТЕКСТ 2</a></li>
<li><a href="адрес ссылки 3">ТЕКСТ 3</a></li>
<li><a href="адрес ссылки 4">ТЕКСТ 4</a></li>
<li><a href="адрес ссылки 5">ТЕКСТ 5</a></li>
<li><a href="javascript:void();">МЕНЮ</a></li>
</ul>
ul.abanico {
position: center;
width: 140px;
height: 80px;
margin: 10px auto;
list-style: none;
font: normal 16px "arial narrow", sans-serif;
}
ul.abanico li {
position: absolute;
bottom: 0;
width:80px;
height: 150px;
background: orange;
line-height: 150px;
text-align: center;
-moz-transform-origin: top center;
-webkit-transform-origin: top center;
transform-origin: top center;
-moz-transition: all .4s ;
-webkit-transition: all .4s ;
transition: all .4s ;
}
ul.abanico li a {
text-shadow: 0.1em 0.1em 0.05em #333;
display: inline-block;
width: 140px;
height: 48px;
text-decoration: none;
color: white;
line-height: 40px;
vertical-align: bottom;
}
ul.abanico:hover li {
opacity: 1;
}
ul.abanico:hover li:nth-of-type(6) {
opacity: 0;
}
ul.abanico:hover li:nth-of-type(1) {
background: green;
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
ul.abanico:hover li:nth-of-type(2) {
background: blue;
-moz-transform: rotate(32deg);
-webkit-transform: rotate(32deg);
transform: rotate(32deg);
}
ul.abanico:hover li:nth-of-type(3) {
background: purple;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
ul.abanico:hover li:nth-of-type(4) {
background: red;
-moz-transform: rotate(-32deg);
-webkit-transform: rotate(-32deg);
transform: rotate(-32deg);
}
ul.abanico:hover li:nth-of-type(5) {
background: orange;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
</style>
<ul class="abanico">
<li><a href="адрес ссылки 1">ТЕКСТ 1</a></li>
<li><a href="адрес ссылки 2">ТЕКСТ 2</a></li>
<li><a href="адрес ссылки 3">ТЕКСТ 3</a></li>
<li><a href="адрес ссылки 4">ТЕКСТ 4</a></li>
<li><a href="адрес ссылки 5">ТЕКСТ 5</a></li>
<li><a href="javascript:void();">МЕНЮ</a></li>
</ul>
Немає коментарів:
Дописати коментар