Красивое анимированное меню для ярлыков.

Всем доброго времени суток. В продолжении темы оформления ярлыков в Блоггере, предлагаю сделать красивое выпадающее анимированное меню для категорий. Оно занимает минимум места в боковой панели. Очень функционально и просто красиво смотрится.


Его можно применить в качестве простого меню блога или, если пофантазировать, ещё для чего-нибудь.

Устанавливается оно через гаджет HTML/JavaScript. Сам дизайн меню можно кардинально поменять и подогнать на свой вкус и цвет. Посмотрите о чём идёт речь на этом тестовом блоге.

Для начала копируйте следующий код в блокнот или черновик блога.
/*блок меню до  открытия */

<style>.mPanel {width:185px; height:25px;text-align: right;font-family:Georgia;
font-size: 18px;color: #fff;font-weight:bold;
 padding:3px; background:#ccc; border-radius:5px; position:relative; box-shadow:0 0 5px rgba(0,0,0,0.5);}
.miniMenu input {display:none;}
.miniMenu label {display:block; width:48px; height:37px; position:absolute; left:-0px; top:-11px; z-index:10; cursor:pointer;}
.miniMenu div.miniIcon {display:block; width:30px; height:13px; position:absolute; left:10px; top:6px; border:5px solid #fff; border-width:5px 0; z-index:5;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.miniMenu div.miniIcon b {display:block; width:30px; height:5px; background:#CC3333 ; position:absolute; left:0; top:4px; opacity:0.7;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}

/*меню после открытия */

.miniMenu ul {list-style:none; position:absolute; top:45px; left:-0px; width:200px; opacity:0.5; visibility:hidden;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.miniMenu li {display:block; float:left; position:relative; z-index:10;}
.miniMenu #open:checked ~ .labelOpen {z-index:5;}
.miniMenu #close:checked ~ .labelClose {z-index:5;}
.miniMenu #open:checked ~ div b:first-child {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.miniMenu #open:checked ~ div.miniIcon {
border-color:transparent;
}
.miniMenu #open:checked ~ div b:last-child {
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.miniMenu #open:checked ~ ul {visibility:visible; opacity:1;}

/*меню при наведении курсора */

.miniMenu li a {display:block; font:500 16px/40px 'Open Sans', arial, sans-serif; text-align:center;font-weight:bold; height:40px; width:200px; position:relative; text-decoration:none; color:#fff;
background-image: -webkit-linear-gradient(#336699, #CCCCFF );
background-image: -ms-linear-gradient(#336699, #CCCCFF );
background-image: -o-linear-gradient(#336699, #CCCCFF );
background-image: linear-gradient(#336699, #CCCCFF );
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.1),
inset 0 -1px 0px rgba(0,0,0,0.2),
0 8px 16px 0 rgba(0,0,0,0.3),
0 4px 4px 0 rgba(0,0,0,0.3),
0 0 0 1px rgba(0,0,0,0.2);
}
.miniMenu li:hover {z-index:100;}
.miniMenu li a:hover {background:#CC9999 ; color:#0000CD; font:500 20px/40px 'Open Sans', arial, sans-serif; text-align:center;font-weight:bold; line-height:41px; width:200px; margin-left:1px;
text-shadow:0 0 1px #fff, 0 0 5px rgba(128,192,128,0.3);
box-shadow:
inset 0 0 4px 3px rgba(0,0,0,0.2),
inset 0 0 10px rgba(0,0,0,0.5);
}
.miniMenu li:first-child a {border-radius:5px 5px 0 0;}
.miniMenu li:last-child a {border-radius:0 0 5px 5px;}
.miniMenu li a:hover:before {content:""; display:block; width:200px; height:3px; position:absolute; left:10px; top:-3px;
background: linear-gradient(to right, rgba(128,192,128,0) 0%, #9999CC 50%, rgba(128,192,128,0) 100%);
}
.miniMenu li a:hover:after {content:""; display:block; width:200px; height:2px; position:absolute; left:10px; bottom:-1px;
background: linear-gradient(to right, rgba(128,192,128,0) 0%, #9999CC 50% ,rgba(128,192,128,0) 100%);
}
</style>

<div class="miniMenu" onclick="">
<div class="mPanel">Ярлыки
  <input id="open" name="miniMenu" type="radio" />
  <input checked="checked" id="close" name="miniMenu" type="radio" />
  <label class="labelOpen" for="open" title="Open Menu"></label>
  <label class="labelClose" for="close" title="Close Menu"></label>

<div class="miniIcon"><b></b><b></b></div>
<ul>
<li><a href="Ссылка">Название</a></li>
<li><a href="Ссылка">название</a></li>
<li><a href="Ссылка">название</a></li>
<li><a href="Ссылка">название</a></li>
<li><a href="Ссылка">название</a></li>
</ul></div></div>

Цветовые решения, размеры высоты и ширины меняйте на ваше усмотрение. Серым цветом я выделила блоки меню в закрытом состоянии, в открытом и эффекты при наведении курсора. Здесь только бы фантазии хватило. Этот пояснительный текст потом можно убрать.

Добавляйте или убирайте строчки <li><a href="Ссылка">название</a></li>. Всё достаточно просто.

Если появятся вопросы по оформлению этого анимированного меню, задавайте в комментариях. А у меня на этом всё. Спасибо, что читаете мои шпаргалки. Удачи всем.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


4 комментария:

  1. Ответы
    1. ..и функционально, и экономно. и индивидуально. Спасибо.

      Удалить
  2. Вика, классный код! Его можно применить и для ярлыков, и для содержания, вообще много где... Стащила себе :) Спасибо большое, что делишься с нами, за твой труд!

    ОтветитьУдалить
    Ответы
    1. Наташа, я его сначала для ярлыков и сделала. Можно вообще для отдельных ярлыков. Это потом у меня на ум меню пришло.

      Удалить

Пользовательский поиск