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

17.07.2015

дополнительное меню для blogger
Приветствую Вас, дорогие читатели. Думаю, что Вашему блогу, как и моему, может пригодиться оригинальное меню с эффектом 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. Буду очень признательна, если поделитесь информацией с друзьями в соцсетях :)

15 комментариев:

  1. Выглядит необычно и стильно.

    ОтветитьУдалить
  2. Попробовала поставить ваше меню, получилось, теперь не знаю, как в этом меню сделать страницы, названия которых я уже вписала.Извините, что мало разбираюсь, только 3 дня как этим занимаюсь.
    Мой блог http://myuzik-shevi.blogspot.ru/
    Буду рада, если поможете мне!

    ОтветитьУдалить
  3. Кажется, я разобралась сама, но не работает ссылка АУДИОЗАПИСИ

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Людмила. А где располагаются аудиозаписи? И остальные ссылки не работают?

      Удалить
  4. Мария, как установить гостевую книгу? Спасибо за консультации.

    ОтветитьУдалить
  5. Мария, как установить гостевую книгу? Спасибо за консультации.

    ОтветитьУдалить
  6. Добрый день, Мария! Очень красивое меню, только вот прямоугольник "Шапка сайта" у вас не работает, и у меня тоже((( Не подскажите почему?

    ОтветитьУдалить
  7. Добрый вечер, Мария! У многих в блогах установлены интересные гаджеты"Моему блогу столько-то дней" в виде букашек, цветочков и т.д. Не могли бы Вы поделиться со мной. Спасибо.

    ОтветитьУдалить
  8. Добрый вечер, Мария! У многих в блогах установлены интересные гаджеты"Моему блогу столько-то дней" в виде букашек, цветочков и т.д. Не могли бы Вы поделиться со мной. Спасибо.

    ОтветитьУдалить
  9. Мария, здравствуйте! Попробовала это меню. Есть проблема - не работает центральное поле (у Вас тоже - ШАПКА). Что-то не так?
    С уважением, Татьяна

    ОтветитьУдалить
  10. Простите, я аж прослезилась :D Эффект css...
    Такие "штучки" используются, как правило во время учебы языку css и я боюсь представить, что некоторые блоггеры установят "это" себе...

    ОтветитьУдалить
  11. Мария, подскажите, можно ли добавлять в раскрывающееся веером меню дополнительные странички? Если да, то в какую часть кода что вставлять?

    ОтветитьУдалить
  12. Мария, у меня не открывается фиолетовый прямоугольник в меню, хотя все сделала для всех остальных также. Спасибо.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Виктория. К сожалению, не знаю, в чем проблема. У автора этого гаджета на просмотре демо также не работает ссылка на фиолетовом прямоугольнике. Видимо, изначально что-то не так... http://templateseacessorios.blogspot.ru/2014/05/menu-com-efeito-hover-css.html

      Удалить
  13. Спасибо! Вроде работают все ссылки этого меню, если нажать на теги ниже уровня цветного прямоугольника. Смотрится оригинально.Интересный гаджет.

    ОтветитьУдалить

Kwork.ru - услуги фрилансеров от 500 руб.

Загляните и на другие страницы ^