Кръгло хоризонталното меню за блог

Здравейте приятели мои. Днес пак сме на моята любима тематика за меню на блог. Едно забавно хоризонтално меню с разноцветни кръгли бутони и hover ефект, които под курсора даже лекичко подскачат. Това весело меню може да е съвсем подходящо за дизайн на блогове с определена тематика. Освен това е много лесно за инсталиране в блог на Blogger. Възможни са корекции в кода, с които да направите ваши индивидуални настройки. Предлагам ви първо да видим как изглежда това забавно хоризонтално меню, което ще "развесели" дизайна на вашия блог. А за настройките в кода му ще говорим по-долу.


Кодът е:

<style>
#blockelement {

margin:0 auto;
/* - Ширина блок  - */
width: 100px;
/* - Височина блок  - */
height: 100px;
z-index: 100;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#blockelement a {
position: absolute;
/* - Положение от лява част - */
left: 17px;
/* - Положение от горната част - */
top: 35px;
z-index: 12;
/* - Цвят на текста - */
color:#fff;
text-decoration:none;
/* - Размер на шрифта - */
font-size:22px;
/* - Тип на шрифта - */
font-famaly:Tahoma;
}
#sharred {
/* - Ширина - */
width: 100px;
/* - Височина - */
height: 100px;
border-radius: 50%;
/* - Градиенты фона шара - */
background-image: linear-gradient(182deg, Red 0%, White 100%);
-o-background-image: linear-gradient(182deg, Red 0%, White 100%);
-ms-background-image: linear-gradient(182deg, Red 0%, White 100%);
position: absolute;
top: 0;
    z-index: 11;
cursor: pointer;
}
#sharblack {
/* - Ширина - */
width: 100px;
/* - Височина - */
height: 100px;
border-radius: 50%;
/* - Градиенти на фона - */
background-image: linear-gradient(182deg, Black 0%, White 100%);
-o-background-image: linear-gradient(182deg, Black 0%, White 100%);
-ms-background-image: linear-gradient(182deg, Black 0%, White 100%);
position: absolute;
top: 0;
z-index: 11;
cursor: pointer;
}
#sharblue {
/* - Ширина - */
width: 100px;
/* - Височина - */
height: 100px;
border-radius: 50%;
/* - Градиенти на фона - */
background-image: linear-gradient(182deg, blue 0%, White 100%);
-o-background-image: linear-gradient(182deg, blue 0%, White 100%);
-ms-background-image: linear-gradient(182deg, blue 0%, White 100%);
position: absolute;
top: 0;
    z-index: 11;
cursor: pointer;
}
#shargreen {
/* - Ширина - */
width: 100px;
/* - Височина - */
height: 100px;
border-radius: 50%;
/* - Градиенти на фона - */
background-image: linear-gradient(182deg, green 0%, White 100%);
-o-background-image: linear-gradient(182deg, green 0%, White 100%);
-ms-background-image: linear-gradient(182deg, green 0%, White 100%);
position: absolute;
top: 0;
    z-index: 11;
cursor: pointer;
}
#sharPurple {
/* - Ширина - */
width: 100px;
/* - Височина - */
height: 100px;
border-radius: 50%;
/* - Градиенти на фона - */
background-image: linear-gradient(182deg, Purple 0%, White 100%);
-o-background-image: linear-gradient(182deg, Purple 0%, White 100%);
-ms-background-image: linear-gradient(182deg, Purple 0%, White 100%);
position: absolute;
top: 0;
z-index: 11;
cursor: pointer;
}

#blockelement:hover ~ #elementfonred {
margin:0 auto;
width: 60px;
height: 15px;
/* - Общ фон на сянката - */
background: rgba(255, 0, 0, .1);
/* - Сянка свойства - */
box-shadow: 0px 0 20px 35px rgba(255,0,0,.1);
-o-box-shadow: 0px 0 20px 35px rgba(255,0,0,.1);
-ms-box-shadow: 0px 0 20px 35px rgba(255,0,0,.1);
border-radius: 30px / 40px;-o-border-radius: 30px / 40px;
-ms-border-radius: 30px / 40px;
    -webkit-transform: scaleY(.3);
-moz-transform: scaleY(.3);
-ms-transform: scaleY(.3);
-o-transform: scaleY(.3);
transform: scaleY(.3);
}
#blockelement:hover ~ #elementfonblack {
margin:0 auto;
width: 60px;
height: 15px;
/* - Общ фон на сянката - */
background: rgba(0, 0, 0, .1);
/* - Сянка свойства - */
box-shadow: 0px 0 20px 35px rgba(0,0,0,.1);
-o-box-shadow: 0px 0 20px 35px rgba(0,0,0,.1);
-ms-box-shadow: 0px 0 20px 35px rgba(0,0,0,.1);
border-radius: 30px / 40px;
-o-border-radius: 30px / 40px;
-ms-border-radius: 30px / 40px;
    -webkit-transform: scaleY(.3);
-moz-transform: scaleY(.3);
-ms-transform: scaleY(.3);
-o-transform: scaleY(.3);
transform: scaleY(.3);
}
#blockelement:hover ~ #elementfonblue {
margin:0 auto;
width: 60px;
height: 15px;
/* - Общ фон на сянката - */
background: rgba(0, 0, 255, .1);
/* - Сянка свойства - */
box-shadow: 0px 0 20px 35px rgba(0,0,255,.1);
-o-box-shadow: 0px 0 20px 35px rgba(0,0,255,.1);
-ms-box-shadow: 0px 0 20px 35px rgba(0,0,255,.1);
border-radius: 30px / 40px;
-o-border-radius: 30px / 40px;
-ms-border-radius: 30px / 40px;
    -webkit-transform: scaleY(.3);
-moz-transform: scaleY(.3);
-ms-transform: scaleY(.3);
-o-transform: scaleY(.3);
transform: scaleY(.3);
}
#blockelement:hover ~ #elementfongreen {
margin:0 auto;
width: 60px;
height: 15px;
/* - Общ фон на сянката - */
background: rgba(0, 255, 0, .1);
/* - Сянка свойства - */
box-shadow: 0px 0 20px 35px rgba(0,255,0,.1);
-o-box-shadow: 0px 0 20px 35px rgba(0,255,0,.1);
-ms-box-shadow: 0px 0 20px 35px rgba(0,255,0,.1);
border-radius: 30px / 40px;
-o-border-radius: 30px / 40px;
-ms-border-radius: 30px / 40px;
    -webkit-transform: scaleY(.3);
-moz-transform: scaleY(.3);
-ms-transform: scaleY(.3);
-o-transform: scaleY(.3);
transform: scaleY(.3);
}
#blockelement:hover ~ #elementfonPurple {
margin:0 auto;
width: 60px;
height: 15px;
/* - Общ фон на сянката - */
background: rgba(155,48,25, .1);
/* - Сянка свойства - */
box-shadow: 0px 0 20px 35px rgba(155,48,25,.1);
-o-box-shadow: 0px 0 20px 35px rgba(155,48,25,.1);
-ms-box-shadow: 0px 0 20px 35px rgba(155,48,25,.1);
border-radius: 30px / 40px;
-o-border-radius: 30px / 40px;
-ms-border-radius: 30px / 40px;
    -webkit-transform: scaleY(.3);
-moz-transform: scaleY(.3);
-ms-transform: scaleY(.3);
-o-transform: scaleY(.3);
transform: scaleY(.3);
}
.razmer {
padding:auto 5px auto 5px;
height:140px;
}
</style>
<table border="0">
<tr>
<td class="razmer">
<div id="blockelement">
<div id="sharred"></div>
<a href="адрес ">пункт 1</a>
            </div>
<div id="elementfonred"></div>
</td>
<td class="razmer">
<div id="blockelement">
<div id="sharblack"></div>
<a href="адрес ">пункт 2</a>
            </div>
<div id="elementfonblack"></div>
</td>
<td class="razmer">
<div id="blockelement">
<div id="sharblue"></div>
<a href="адрес ">пункт 3</a>
            </div>
<div id="elementfonblue"></div>
</td>
<td class="razmer">
<div id="blockelement">
<div id="shargreen"></div>
<a href=" адрес ">пункт 4</a>
            </div>
<div id="elementfongreen"></div>
</td>
<td class="razmer">
<div id="blockelement">
<div id="sharPurple"></div>
<a href="адрес ">пункт 5</a>
            </div>
<div id="elementfonPurple"></div>
</td>
</tr>
</table>

Копирайте предложения код и посетете тази страница. Вложете в предложената форма кода и натиснете бутона в нейния долен край. Предлагам ви да използвате този редактор, за да видите резултата веднага. В него можете да направите и настройките си, като проследявате как изглежда менюто след всяка промяна в кода му.
Цветът на сянката под всяко кръгче в менюто е зададен в RGB формат. За ваше улеснение можете да използвате разширената таблица на цветовете, която е на тази страница.
Ако е необходимо да се променят радиусите на кръгчетата в кода ще ги намерите оцветени в синьо. В същото време, едновременно с това, трябва да промените отстъпите на връзки вътре в тях. Те са маркирани в зелено.
Адресите на страниците са оцветени в лилаво, а в червено са заглавията на страниците.
Това са всички основни настройки в кода на това кръгло хоризонтално меню. Ако решите да го вмъкнете във вашия дизайн и имате някакви въпроси в тази връзка, моля попитайте в коментарите.

Благодаря на всички и доскоро.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: