Меню имеет размер применяемых картинок 32Х32 их можно заменить иконками по требуемой тематике.Менюшке можно задать любой цвет,основные параметры цвета меняются в 3 местах в коде,они выделены комментарием.Расположение от верхней части страницы отрегулировано с расчётом чтобы осталось место для админ панели,если Вам нужно сместить его ниже,отредактируйте значение для свойства margin.Эта регулировка находится в первом классе,в начале кода здесь ▼. ul.quadrant {
padding:0;
margin:35px auto;
list-style:none;
width:202px;
height:202px;
border-radius:202px;
overflow:hidden;
background:red;/* Разделяющий цвет */
}
Можно установить весь код по месту установки или вынести код стилей в основной файл CSS,но по возможности старайтесь не перегружать основные стили сайта uCoz.В остальном Вам потребуется только вставить ссылки.Воспользуйтесь редактором HTML который находится ниже для проверки кода на работоспособность.Если что-то не удалось понять,воспользуйтесь формой задачи вопросов по теме находящейся в нижней части материала,опишите подробнее что именно не понятно.
Пример кода меню
<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>
|
