2013-08-17

Горизонтальное меню css с иконками

Горизонтальное меню css с иконками
Хорошая навигация по сайту очень важна блоггеров. С ее помощью посетитель быстро находит нужную страницу блога. Ценят понятность сайта и поисковики. В этой статье вы узнаете как сделать горизонтальное меню для Blogger со всплывающими иконками.
Меню со всплывающими кнопками-иконками создан на CSS. Для просмотра меню, нажмите на кнопку ниже:

Похожие уроки:
- круглое меню с анимацией
- Вертикальное выпадающее меню на Jquery
- Вертикальное меню,
- а также другие уроки с меткой “меню”

Как вставить горизонтальное меню css с иконками на Blogger

  1. Перйдите во вкладку “Шаблон”, поставьте курсор в редактор (в любое место),
  2. Нажмите Ctrl + F для поиска по коду и найдите отрезок кода ]]></b:skin>
  3. Вставьте перед этим кодом следующий код:
    ..
    /* The CSS Code for the menu starts here bloggertrix.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;}
  4. Теперь перейдите во вкладку “Дизайн”,
  5. Добавьте новый элемент HTML / JavaScript и добавьте код:
    <div id="btrix-nav">
    <li> <a href="#"><span class="aname">Главная</span> <img src="http://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" /> </a> </li>
    <li> <a href="#"> <span class="aname">Скачать</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">Контакты</span> <img src="http://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" /> </a> </li> </div>
  6. Внесите в код, который добавили в гаджет HTML / JavaScript необходимые изменения:
    • Значок # измените на ссылку на нужную страницу блога (например, страницу метки, страницу “контакты”, главную страницу блога и др)
    • ссылку на картинку, выделенную оранжевым, замените на прямую ссылку на иконку-картинку для соответствующего пункта.ъ
    • Пункт, выделенный синим, это название страницы меню css.
  7. Переместите элемент HTML ? JavaScript в нужное место во вкладке “Дизайн” блога.
Для вашего меню вы можете использовать иконки, логотипы и другие картинки png с прозрачным фоном. Для того, чтобы найти нужные картинки лучше использовать поиск по иконками. Например, iconsearch.ru
Примеры:
создание логотипа - для главной страницы,
Горизонтальное меню css с иконками - портфолио,
 меню css с иконками - обратная связь
 меню css с иконками- обо мне, о блоге.

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

Евгений Тарасов комментирует...

Подскажите пожалуйста как расширить блок, чтобы вместился длинее текст?

Евгений Тарасов комментирует...

Разобрался :)

Иванова Наталья комментирует...

Не успела ответить)
Отвечу для других читателей, может у кого возникнут подобные вопросы. Нужно изменить ширину (width: 120px) в первом коде.

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

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