Раскрывающееся меню с эффектом CSS

Приветствую Вас, дорогие читатели. Думаю, что Вашему блогу, как и моему, может пригодиться оригинальное меню с эффектом CSS при наведении. Это меню раскрывается в виде большого красочного веера. На пяти цветных прямоугольниках внизу расположены ссылки. Ссылки и их названия Вы указываете сами! 

Вот так выглядит меню в "свернутом" виде:

При желании цвет каждого прямоугольника можно изменить.   Я сделала чуть ярче самый первый прямоугольник (меню в свернутом виде), изменив первоначальный цвет orange (оранжевый) на OrangeRed (красно-оранжевый) вот здесь в коде: 

Остальные цвета меню оставила, как у автора.

Кстати, вот названия основных семнадцати цветов: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Остальные можно найти в интернете.

Как добавить в блог на Blogger меню с эффектом CSS при наведении.

1. Заходим в настройки блога - пункт Дизайн. 

2. Нажимаем Добавить гаджет

3. Выбираем гаджет HTML/JavaScript

4. В поле Содержание вставляем следующий код меню: 

<style>
ul.abanico {
position: relative;
width: 500px;
height: 300px;
margin: 10px auto;
list-style: none;
font: normal 16px "arial narrow", sans-serif;
}
ul.abanico li {
position: absolute;
bottom: 0;
  
width: 140px;
height: 300px;
background: orange;
  
line-height: 300px;
text-align: center;
-moz-transform-origin: top center;
-webkit-transform-origin: top center;
transform-origin: top center;
-moz-transition: all .4s ;
-webkit-transition: all .4s ;
transition: all .4s ;
}
ul.abanico li a {
text-shadow: 0.1em 0.1em 0.05em #333;
display: inline-block;
width: 140px;
height: 48px;
text-decoration: none;
color: white;
line-height: 40px;
vertical-align: bottom;
}
ul.abanico:hover li {
opacity: 1;
}
ul.abanico:hover li:nth-of-type(6) {
opacity: 0;
}
ul.abanico:hover li:nth-of-type(1) {
background: green;
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
ul.abanico:hover li:nth-of-type(2) {
background: blue;
-moz-transform: rotate(32deg);
-webkit-transform: rotate(32deg);
transform: rotate(32deg);
}
ul.abanico:hover li:nth-of-type(3) {
background: purple;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
ul.abanico:hover li:nth-of-type(4) {
background: red;
-moz-transform: rotate(-32deg);
-webkit-transform: rotate(-32deg);
transform: rotate(-32deg);
}
ul.abanico:hover li:nth-of-type(5) {
background: orange;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg); 
transform: rotate(-60deg);
}

</style>

<ul class="abanico">
<li><a href="адрес ссылки 1">ТЕКСТ 1</a></li>
<li><a href="адрес ссылки 2">ТЕКСТ 2</a></li>
<li><a href="адрес ссылки 3">ТЕКСТ 3</a></li>
<li><a href="адрес ссылки 4">ТЕКСТ 4</a></li>
<li><a href="адрес ссылки 5">ТЕКСТ 5</a></li>
<li><a href="javascript:void();">МЕНЮ</a></li>

</ul>

   Подумайте, какие ссылки Вы бы разместили в дополнительном меню. Я взяла три ссылки на ярлыки: в боковой колонке у меня размещены гаджеты "ярлыки" с метками (тегами), которые я посчитала важными для читателей. Скопировала поочередно 3 ссылки на ярлыки "шаблон", "фон", "шапка", вставила в код, а слова "ТЕКСТ 1", 2 и 3 заменила на соответствующие тегам.
  Остальные две ссылки я решила поставить на страницы своего блога, названия которых есть в верхнем меню: "Гаджеты" и "Страницы". Также правой кнопкой мыши скопировала ссылки на названия страниц на вкладках и вставила в код дополнительного меню.

Возможно, позже изменю ссылки в коде, если понадобится.

Так что, как видите, ссылки в этом меню с эффектом CSS можно поставить на страницы, ярлыки, главную страницу, статью и др.

Ну, а на какое слово я заменила слово "МЕНЮ" - смотрите в самом гаджете в блоге в боковой колонке ))) Вы можете заменить на свое или оставить прежнее.

P.S. Буду очень признательна, если поделитесь информацией с друзьями в соцсетях :)