Менюшка для рубрик.


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






Установка кода меню навигации.

Хотя сложных наворотов здесь нет,но цветовая гамма, которую можно будет изменить по своему усмотрению,гармонично впишется и оживит любую страницу.Внедрение кода для отображения меню навигации для рубрик блога стандартно и не содержит никаких дополнительных нюансов.Копируем код CSS без <style type="text/css">......</style> и устанавливаем его в шаблон нашего блога в разделе для стилей,а именно перед закрывающим тегом ]]></b:skin>,или же в открывшемся окне в настройках шаблона блога на вкладке дополнительно.В таком же виде можно установить или на страницу или в гаджет HTML и JavaScript.
<style type="text/css">
/* ===============================================
Menu mini for groups#v-gol.ru// menu fo blogspot//основной блок
================================================= */

.mPanel {width:160px; height:23px;text-align: right;font-family:Georgia;
font-size: 20px;color: #20c0c0;font-weight:bold;
 padding:5px; background:#fff; border-radius:10px; position:relative; box-shadow:0 0 5px rgba(0,0,0,0.5);}
.miniMenu input {display:none;}
.miniMenu label {display:block; width:44px; height:37px; position:absolute; left:-1px; top:-11px; z-index:10; cursor:pointer;}
.miniMenu div.miniIcon {display:block; width:30px; height:13px; position:absolute; left:16px; top:6px; border:5px solid #ccc; 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:#c5f; 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:20px; left:-50px; width:220px; 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(#20c0c0, #333);
background-image: -ms-linear-gradient(#20c0c0, #333);
background-image: -o-linear-gradient(#20c0c0, #333);
background-image: linear-gradient(#20c0c0, #333);
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:#8DEEEE; color:#0000CD; font:500 20px/40px 'Open Sans', arial, sans-serif; text-align:center;font-weight:bold; line-height:41px; width:220px; 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:8px 8px 0 0;}
.miniMenu li:last-child a {border-radius:0 0 8px 8px;}
.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%, #80c080 50%, rgba(128,192,128,0) 100%);
}
.miniMenu li a:hover:after {content:""; display:block; width:200px; height:3px; position:absolute; left:10px; bottom:-1px;
background: linear-gradient(to right, rgba(128,192,128,0) 0%, #80c080 50% ,rgba(128,192,128,0) 100%);
}
</style>



Следующую часть HTML тоже копируем, и после внесение соответствующих изменений в полях ссылка и название рубрик,и устанавливаем в гаджет HTML и JavaScript,расположенный в сайдбаре своего блога.

<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> и в выпадающем списке для меню навигации автоматически добавиться ещё один пункт.Настройки цвета для выпадающего меню для рубрик внесены в код CSS и подписаны.Если требуется изменить цвет,то необходимо скопировать весь код и настроить его сначала в визуальном редакторе под свой дизайн,а уж затем вставить себе на страницу.Так же  стоит стоит обратить внимание на установку меню,которое всегда сверху,вещь нужная и практичная.

Отправить комментарий