Главная » Статьи » Меню

Меню Игральные карты для ucoz

Посмотрите ДЕМО
В то место где будет меню
Код
<style>
#info {position:relative; z-index:10;}
.cards {
padding:0;
margin:220px auto;
list-style:none;  
position:relative;  
height:270px;  
width:200px;
}
.cards > li {
width:200px;  
height:270px;  
position:absolute;  
top:0; left:0;
transform-origin: 100px 300px;
-ms-transform-origin: 100px 300px;
-o-transform-origin: 100px 300px;
-moz-transform-origin: 100px 300px;
-webkit-transform-origin: 100px 300px;
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}
.cards > li > a {
display:block;
width:200px;  
height:270px;  
border:1px solid #ccc;  
position:absolute;  
background:#fff;
top:0;  
left:0;  
color:#000;
text-decoration:none;
font:bold 12px/18px arial, sans-serif;
border-radius:10px;
-moz-border-radius:10px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.cards > li > a:after,
.cards > li > a:before {
display:block;  
width:75%;  
height:75%;  
content: "";  
position:absolute;  
z-index:-1;
}
.cards > li > a:after {right: 5px; bottom:5px;
transform-origin: bottom right;
-o-transform-origin: bottom right;
-moz-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform: rotate(5deg) skew(12deg);
-o-transform: rotate(5deg) skew(12deg);
-moz-transform: rotate(5deg) skew(12deg);
-webkit-transform: rotate(5deg) skew(12deg);
-ms-transform: rotate(5deg) skew(12deg);
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.3);  
-moz-box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.3);  
-webkit-box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.3);
}  
.cards > li > a:before {left:5px; bottom:5px;
transform-origin: bottom left;
-o-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform: rotate(-5deg) skew(-12deg);  
-o-transform: rotate(-5deg) skew(-12deg);  
-moz-transform: rotate(-5deg) skew(-12deg);  
-webkit-transform: rotate(-5deg) skew(-12deg);
-ms-transform: rotate(-5deg) skew(-12deg);
box-shadow: -4px 8px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: -4px 8px 12px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: -4px 8px 12px rgba(0, 0, 0, 0.3);
}
ul.cards > li a b {
display:block;  
width:100px;
height:20px;  
margin-left:-40px;
text-align:right;  
margin-top:50px;  
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
ul.cards:hover > li:nth-of-type(1) {
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
}
ul.cards:hover > li:nth-of-type(2) {
transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
-webkit-transform: rotate(-18deg);
}
ul.cards:hover > li:nth-of-type(3) {
transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-webkit-transform: rotate(-6deg);
}
ul.cards:hover > li:nth-of-type(4) {
transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
}
ul.cards:hover > li:nth-of-type(5) {
transform: rotate(180deg);
-ms-transform: rotate(18deg);
-o-transform: rotate(18deg);
-moz-transform: rotate(18deg);
-webkit-transform: rotate(18deg);
}
ul.cards:hover > li:nth-of-type(6) {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
ul.cards > li:nth-of-type(-n+5):hover {
height:480px;
top:-200px;
transform-origin: 100px 470px;
-ms-transform-origin: 100px 470px;
-o-transform-origin: 100px 470px;
-moz-transform-origin: 100px 470px;
-webkit-transform-origin: 100px 470px;
}
ul.cards li ul {
padding:0;  
margin:0;
list-style:none;
position:absolute;  
top:25px;  
left:30px;
}
ul.cards li ul li a {
font:bold 12px/18px arial, sans-serif;
color:#000040;/* Текст ссылок до наведения */
text-decoration:none;
}
ul.cards li ul li a:hover {
color:#2060ff;/* Текст ссылок при наведении */
}
ul.cards li span:nth-of-type(1) {
font-size:30px;
position:absolute;  
top:10px;  
right:10px;  
color:#c00;
}
ul.cards li em:nth-of-type(1) {
font-size:30px;  
position:absolute;  
top:10px;  
right:10px;
color:#000;
}
ul.cards li span:nth-of-type(2) {
font-size:30px;  
position:absolute;
top:220px;
left:10px;  
color:#c00;
}
ul.cards li em:nth-of-type(2) {
font-size:30px;
position:absolute;  
top:220px;  
left:10px;  
color:#000;
}
ul.cards li i {
font:normal 200px/270px arial, sans-serif;
color:#c00;/* Цвет короны */  
position:absolute;  
left:0;
top:0;  
width:200px;  
text-align:center;
}
</style>
<ul class="cards">
<li><a href="#url"><b>MENU</b></a>
<span>♥</span>
<ul>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
</ul>
<span>♥</span>
</li>
<li><a href="#url"><b>MENU</b></a>
<em>♣</em>
<ul>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
</ul>
<em>♣</em>
</li>
<li><a href="#url"><b>MENU</b></a>
<span>♦</span>
<ul>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
</ul>
<span>♦</span>
</li>
<li><a href="#url"><b>MENU</b></a>
<em>♠</em>
<ul>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
</ul>
<em>♠</em>
</li>
<li><a href="#url"><b>MENU</b></a>
<span>♥</span>
<ul>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
<li><a href="#">Название ссылки</a></li>
</ul>
<span>♥</span>
</li>
<li><a href="#url"><b>Hawk.do.am</b><i>♕</i></a></li>
</ul>
Категория: Меню | Добавил: slavick (05.08.2013)
Просмотров: 84 | Теги: карты, игральные, ucoz, для, меню | Рейтинг: 1.0/3
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]