Раскрывающееся меню с эффектом 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 можно поставить на страницы, ярлыки, главную страницу, статью и др.
Ну, а на какое слово я заменила слово "МЕНЮ" - смотрите в самом гаджете в блоге в боковой колонке ))) Вы можете заменить на свое или оставить прежнее.

источник