[Статья] Меню с круглыми элементами на css.

[darkfb]

Итак, не буду особо долго расписывать, как красиво выглядит такое меню, просто перейдём к делу:
Html код:

<div class="circlemenu">
	<ul>
		<li><a href="zhyk.ru" target="_blank"><span>Example</span></a></li>
		<li><a href="zhyk.ru" target="_blank"><span>Example</span></a></li>
		<li><a href="zhyk.ru" target="_blank"><span>Example</span></a></li>
		<li><a href="zhyk.ru" target="_blank"><span>Example</span></a></li>
		<li><a href="zhyk.ru" target="_blank"><span>Example</span></a></li>
	</ul>
</div>

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;
}

Получиться как-то так:
[Ссылки могут видеть только зарегистрированные пользователи. ]

Дальше подстраиваем всё под себя.