CSS можно использовать для создания круглых элементов интерфейса. Для этого нужно установить для свойства CSS3 "border-radius" очень большое значение. Тогда при отрисовке рамки в четырех углах участки объединятся в одну непрерывную круглую границу. Это можно использовать для создания меню с круглыми элементами :
Свойство "border-radius" должно иметь очень большое значение, как минимум 50% ширины и высоты элемента :
width:100px;
height:100px;
border-radius: 400px; /*большое значение для создания круглой границы элемента*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
height:100px;
border-radius: 400px; /*большое значение для создания круглой границы элемента*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
Установка:
1. Код меню что ниже, ставим в нужное Вам место :
Код
<div class="circlemenu">
<ul>
<li><a href="Ваша ссылка" target="_blank"><span>Главная</span></a></li>
<li><a href="Ваша ссылка" target="_blank"><span>Форум</span></a></li>
<li><a href="Ваша ссылка" target="_blank"><span>CSS3</span></a></li>
<li><a href="hВаша ссылка" target="_blank"><span>Новости</span></a></li>
<li><a href="Ваша ссылка" target="_blank"><span>Файлы</span></a></li>
</ul>
</div>
<ul>
<li><a href="Ваша ссылка" target="_blank"><span>Главная</span></a></li>
<li><a href="Ваша ссылка" target="_blank"><span>Форум</span></a></li>
<li><a href="Ваша ссылка" target="_blank"><span>CSS3</span></a></li>
<li><a href="hВаша ссылка" target="_blank"><span>Новости</span></a></li>
<li><a href="Ваша ссылка" target="_blank"><span>Файлы</span></a></li>
</ul>
</div>
2. Код стилей CSS, ставим в таблицу стилей CSS :
Код
.circlemenu{
width: 100%;
overflow:hidden;
}
.circlemenu ul{
margin: 0;
margin-left:50px; /*Отступ меню от левой границы*/
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center; /* Выравнивание меню */
}
.circlemenu li{
display: inline;
margin: 0;
}
.circlemenu li a{
display:block;
float:left;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
margin-right:5px; /*Поле справа для каждой ссылки */
width:100px;
height:100px;
border-radius: 400px; /*Большое значение для создания круглой рамки элемента*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.circlemenu a span{
position:relative;
top:40%;
}
.circlemenu li a:visited{
color: white;
}
.circlemenu a:hover{
background: #a71b15;
}
width: 100%;
overflow:hidden;
}
.circlemenu ul{
margin: 0;
margin-left:50px; /*Отступ меню от левой границы*/
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center; /* Выравнивание меню */
}
.circlemenu li{
display: inline;
margin: 0;
}
.circlemenu li a{
display:block;
float:left;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
margin-right:5px; /*Поле справа для каждой ссылки */
width:100px;
height:100px;
border-radius: 400px; /*Большое значение для создания круглой рамки элемента*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.circlemenu a span{
position:relative;
top:40%;
}
.circlemenu li a:visited{
color: white;
}
.circlemenu a:hover{
background: #a71b15;
}
