Меню навигации для блога


кнопка меню для блога круглая

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




Для чего нужно меню навигации.

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

Варианты оформления меню для блога или сайта.


Вариантов оформления меню навигации по сайту в интернете можно найти множество.Простые,выпадающие меню с вкладками,слева,справа, липкие меню сверху и снизу и т.д и т.п. Среди сотен вариантов,встречающихся в интернете следует найти компромисс между удобством и оригинальностью,лёгкостью настройки и установки кода в шаблон.Данный вариант оформления ,представленный на странице,больше подойдёт,как вспомогательный инструмент к основному  меню,куда следует внести ссылки на наиболее релевантные и интересные статьи.Можно посмотреть пример работы или демоверсию или же рабочий вариант установленный на другом блоге 
выпадающие меню для блога

Установка меню навигации на сайт или блог.


Правильно конечно же весь код CSS и JavaScript следует добавить в шаблон блога,но так же
для этих целей подойдёт и любой гаджет поддерживающий НТМЛ.Да и ещё данный вариант выпадающего меню работает на jQuery и следует проверить есть ли у вас в шаблоне скрипт следующего вида или похожий.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
Дальше следует небольшой код  JavaScript и CSS с настройками оформления.Для замены фоновой картинки меню скопируйте правой кнопкой мышки урл картинки и вставьте в соответствующие поле.

<style type="text/css">/*start menu for blog @v-gol.ru*/
#vg-circle-mod {
 bottom: 70% !important; /*выравнивание по вертикали*/
 left: 20px; /*отступ слева*/
 position: fixed;
}
#vg-container-circle {
 position:relative;
 height:120px;
 width:120px;background:#ffа;
border-radius:90px 90px 90px 90px;
}
#vg-base-button {background:url(https://1.bp.blogspot.com/-Uta7OKjfhoc/VvlviHPkOZI/AAAAAAAAFAA/EbDqMV8DsqMF8buT0fVb3bLQYKeksdFTg/s1600/v-gol.ru_menu.png) #ccc;/*урл кнопки меню*/
 z-index:9999;
 cursor:pointer;
 border-radius:90px 90px 90px 90px;
 box-shadow:0 3px 3px rgba(0,0,0,0.5);
 height:120px;
 left:0;
 padding:0;
 position:absolute;
 width:120px
}/*кнопки оформление*/
.vg-bt  {
 position:absolute;
 height:25px;/*высота кнопки*/
 width:75px;/*ширина кнопки*/
background:#fff;
background:-webkit-linear-gradient(#fff, #fff 50%, #ccc 50%, #ccc);
background:linear-gradient(#fff, #fff 50%, #ccc 50%, #ccc);
border:1px solid #ddd;
 border-radius:10px;
 top:25px;
 left:25px;-webkit-transition:all 250ms;
 -moz-transition:all 250ms;
 -o-transition:all 250ms;
 -ms-transition:all 250ms;
 transition:all 250ms;
  font-weight: 600;
  text-decoration: none;
text-align:center;
color:#f5f;

}/*блок ссылок выравнивание*/
#vg-1.open {
 top:-60px;
 left:20px
}
#vg-2.open {
 top:-30px;
 left:110px
}
#vg-3.open {
 top:2px;
 left:130px
}
#vg-4.open {
 top:30px;
 left:130px
}
#vg-5.open {
 left:130px;
 top:60px
}
#vg-6.open {
 top:90px;
 left:110px
}
#vg-7.open {
 top:120px;
 left:15px
}
#vg-8.open {
 top:-45px;
 left:80px
}/*end menu for blog @v-gol.ru*/
</style>

<script type="text/javascript">var delay=240,delayTime;$(function(){bts=$(".vg-bt");$("#vg-base-button").toggle(function(){$("span.plus").addClass("rot");bts.each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.addClass("open")},delayTime)})},function(){$("span.plus").removeClass("rot");$($(bts).get().reverse()).each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.removeClass("open")},delayTime)})})});</script><a href="http://v-gol.ru" style="position:absolute;z-index:-11"><img src="" /></a>

Смотреть ещё

Оформление блоков для кодаСлайдер- ротатор для блога
Ротатор для баннеров
Эффекты для фото на CSS.
Как добавить форум на блог

Ну и последняя НТМЛ часть кода,куда и следует вносить все ссылки на необходимые разделы и при желании изменять их.
<div id="vg-circle-mod"><div id="vg-container-circle">
<p id="vg-1" class="vg-bt"><a href="ссылка">главная</a></p>
<p id="vg-2" class="vg-bt"><a href="ссылка">блогспот</a></p>
<p id="vg-3" class="vg-bt"><a href="ссылка">гаджеты</a></p>
<p id="vg-4" class="vg-bt"><a href="ссылка">деньги</a></p>
<p id="vg-5" class="vg-bt"><a href="ссылка">работа</a></p>
<p id="vg-6" class="vg-bt"><a href="ссылка">видео</a></p>
<p id="vg-7" class="vg-bt"><a href="ссылка">спорт</a></p>
<a id="vg-base-button"></a></div></div>


Настройки кода CSS для меню навигации.

кнопки для меню круглые фото
Настроек оформления выпадающего меню навигации много,но основные подписаны и при
желании можно изменить и подобрать более подходящие по цвету оттенки.За место расположения на странице отвечает самый первый пункт в CSS-коде и изменяя значения можно добиться наиболее оптимального расположения гаджета на странице.Так же можно добавить количество кнопок и расположить их по кругу.Так же следует обратить внимание на другие статьи схожей тематики.

Меню в стиле Google.
Вкладки-табы для блога
Креативное вертикальное меню на CSS.

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