Меню навигации для тех кому нравятся нестандартные решения и креативный дизайн.Выпадающие меню для сайта или блога с фиксацией в любом месте странице в зависимости от дизайна и настроения, открывающиеся при клике на кнопку.Описание и установка меню навигации,рабочий вариант демонстрации работы и настройки кода в соответствии с дизайном.Преимущества данного варианта меню простота и удобство в настройке,а также необычный внешний вид.
Для чего нужно меню навигации.
Меню для сайта или блога – является одним из самых важных и необходимых элементов дизайна.По своим характеристикам навигационная система похожа на оглавление к книге,помогающие пользователю ориентироваться на блоге и найти интересующий материал. Стандартное меню состоит обычно из коротких текстовых ссылок на определенные страницы сайта. Следует заметить,что меню должно быть видно с любой страницы ресурса для того,чтобы посетитель смог воспользоваться им в любой момент.
Варианты оформления меню для блога или сайта.
Вариантов оформления меню навигации по сайту в интернете можно найти множество.Простые,выпадающие меню с вкладками,слева,справа, липкие меню сверху и снизу и т.д и т.п. Среди сотен вариантов,встречающихся в интернете следует найти компромисс между удобством и оригинальностью,лёгкостью настройки и установки кода в шаблон.Данный вариант оформления ,представленный на странице,больше подойдёт,как вспомогательный инструмент к основному меню,куда следует внести ссылки на наиболее релевантные и интересные статьи.Можно посмотреть пример работы или демоверсию или же рабочий вариант установленный на другом блоге
Установка меню навигации на сайт или блог.
Правильно конечно же весь код 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2mWwnq18zNZ_KNxY3Z-OWMU5yNLPSvjzSYJ_rxEyujs5fm76Gd3CYlYkyDpgOmR3UMxhq6JghnEQLY4cFkdiI690gL-myabhgolaUk36ys1PPm7kTLKIWsBalB994lzgAl7FqkwmIZCvd/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 @isq777.blogspot.com*/ </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> | Смотреть ещё |
Ну и последняя НТМЛ часть кода,куда и следует вносить все ссылки на необходимые разделы и при желании изменять их.
<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-коде и изменяя значения можно добиться наиболее оптимального расположения гаджета на странице.Так же можно добавить количество кнопок и расположить их по кругу.Так же следует обратить внимание на другие статьи схожей тематики.
Отправить комментарий