Меню сайта
Категории раздела
Скрипты для uCoz [582] |
HTML коды для uCoz [58] |
Шаблоны для uCoz [189] |
Социальные сети и закладки [4] |
Меню для uCoz сайта [30] |
Опросы на uCoz [6] |
Работа с Информерами [7] |
Для Веб мастера [90] |
CSS стили для uCoz [15] |
Как это сделать? (для новичков с картинками) [11] |
Видео Уроки по uCoz [2] |
Полезное для пользователей [45] |
Counter Strike мониторинг [5] |
Регистрация и прикрепление своего домена к uCoz [1] |
Новости сайта scripts-for-ucoz [47] |
Учебник HTML [11] |
Разное/Другое [12] |
Статьи про uCoz
Рекламко
Наш опрос
Статистика
Онлайн всего: 20
Гостей: 20
Пользователей: 0
Зарегистрировано 31229 (сегодня + 0 новых, вчера + 0 новых), В каталоге файлов 1130 материала(ов), Оставлено 5178 комментариев, На форуме создано тем и ответов.
установить такую статистику
Блок Программ
Установить себе такой Блок
Скрипты и HTML для uCOz
Блок CW результаты
Скачать Броузеры
Внимание!
Наш сайт адаптирован под браузер Mozilla Firefox
Скачать/Download
В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)
установить такой блок
Поиск
Рекламко
http://www.4good.tk/
Добавить свой сайт в ТОП!
И он будет рекламироваться тут БЕСПЛАТНО!
стань модератором сайта и рекламируй свой сайт за бесплатно тут
Расскажи Друзьям!
Комментарии
Новость: Просмотры и посетители для вашего сайта БЕСПЛАТНО
написал:
написал:
В итоге получим в статистике целую кучу ботов, и отказов. Что само собой скажется на ПС
Новость: Фотогалерея изображений для uCoz
Sultanbek Ajdos написал:
Sultanbek Ajdos написал:
Не убрать календарики правильно
Понедельник, 22 ноября 2010 г.
Карманный календарь 2010 г.
Понедельник, 22 ноября 2010 г.
Карманный календарь 2010 г.
Читать все комментарии
Топ комментаторов
VKONTAKTE
FACEBOOK
Кто и Откуда Вы?
Мини-чат
Главная страница » Помощь Вебмастеру » Категория Меню для uCoz сайта » Добавлено [17.06.2013, 18:50] |
Меню в виде игральных карт для Ucoz
Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!] | |||
Очень неординарное меню в виде игральных карт для сайтов на бесплатном хостинге 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>MENU</b><i>♕</i></a></li> </ul> При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Меню в виде игральных карт для Ucoz Расскажи друзьям интересные новости: - Установить на свой сайт блок социальных закладок | |||
Просмотров: 5335 | Загрузок: 0 | Комментарии: 1 | Рейтинг: 0.0/0 |
Всего комментариев: 1 | ||
| ||
По вопросам сотрудничества и рекламы пишите на почту rusalex11@live.com