Google+ Followers

Будь в курсе событий!

20.01.2014

Панель навигации меню на CSS3, с выдвежным эффектом для блогспот,блоггер.

Leave a Comment


Новая панель навигации написанная на CSS3 для блогспот,блоггер. Как видите друзья на скриншоте выше это панель навигации имеет очень интересный вид.Помимо того что она разноцветная, так еще при наведении курсора мыши выдвигаются иконки.И все это добро написано на CSS, а это большой плюс тем что загружаться данное меню будет очень быстро так как не содержит в себе не каких JavaScript библиотек.Для навигации это меню очень удобно потому что в код меню можно добавить любые ссылки, и при нажатии на кнопку у вас откроется любая страничка в интернете.
Установка
1.Перейти к панели инструментов Blogger> Шаблон
2 Резервное копирование шаблона . 3 Нажмите на Изменить HTML . 4 Далее зажимаем  CTRL+F и ищем тег ]]></b:skin> а наш код вставляем выше нашего тега ]]></b:skin> . Помимо того, если у вас после всех проделанных операций меню не отобразилось то нам надо наш код  CSS поместить в теги   <style> , а далее найти закрывающий тег </body>  и наш код  CSS поместить чуть выше его.


<style>
/* The CSS Code for the menu starts here zarnakoom.com */ #btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#btrix-nav li {float: left;}
#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#btrix-nav li a:hover {cursor: pointer;}
#btrix-nav li a:hover img {top: -85px;}
#btrix-nav li a:hover .aname {top: 85px;}
#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#btrix-nav li:nth-child(2) a {background: #9bc704;}
#btrix-nav li:nth-child(3) a {background: #0dc3ff;}
#btrix-nav li:nth-child(4) a {background: #51a2ec;}
#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}       
</style>




5. К блоггер Дизайн
6. Нажмите Добавить гаджет и выберите "HTML / JavaScript"
7. Вставить ниже код, и сохранить.


<div id="btrix-nav">
<li> <a href="#"><span class="aname">Homes</span> <img src="http://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="http://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="http://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="http://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="http://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" /> </a> </li> </div>

Где стоит такой значок # , заменяем на ссылку какого либо ресурса и не забываем сохранить,наше произведение искусства.

0 коммент. :

© 2012-2017 Cash's from program