Може да се използва като обикновено меню в блога, или ако решите, и за нещо друго. Инсталира се чрез притурка за 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:blue; 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>;
Всичко е съвсем просто.
Ако имате въпроси относно дизайна на това анимирано меню, попитайте в коментарите.
Благодаря за посещението. Успех.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Няма коментари:
Публикуване на коментар