Создание быстрой навигации по статичной верстке

pages.md

Создание быстрой навигации по статичной верстке

Часто мы разрабатываем сайты, в которых страниц больше чем пальцев на руках(а иногда и на ногах). Для того, чтобы прыгать по страницам нужно либо менять адрес в браузере, либо ставить ссылки в разметке(что часто неудобно, запутанно, и бесполезно, т.к. программист поменяет). И поэтому мы написали виджет для быстрой навигации по проекту, который представляет собой одну js-функцию:

function pageWidget(pages) {
	var widgetWrap = $('<div class="widget_wrap"><ul class="widget_list"></ul></div>');
	widgetWrap.prependTo("body");
	for (var i = 0; i < pages.length; i++) {
		$('<li class="widget_item"><a class="widget_link" href="' + pages[i] + '.html' + '">' + pages[i] + '</a></li>').appendTo('.widget_list');
	}
	var widgetStilization = $('<style>body {position:relative} .widget_wrap{position:absolute;top:0;left:0;z-index:9999;padding:10px 20px;background:#222;border-bottom-right-radius:10px;-webkit-transition:all .3s ease;transition:all .3s ease;-webkit-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.widget_wrap:after{content:" ";position:absolute;top:0;left:100%;width:24px;height:24px;background:#222 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAABGdBTUEAALGPC/xhBQAAAAxQTFRF////////AAAA////BQBkwgAAAAN0Uk5TxMMAjAd+zwAAACNJREFUCNdjqP///y/DfyBg+LVq1Xoo8W8/CkFYAmwA0Kg/AFcANT5fe7l4AAAAAElFTkSuQmCC) no-repeat 50% 50%;cursor:pointer}.widget_wrap:hover{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.widget_item{padding:0 0 10px}.widget_link{color:#fff;text-decoration:none;font-size:15px;}.widget_link:hover{text-decoration:underline} </style>');
	widgetStilization.prependTo(".widget_wrap");
}

В качестве аргументов передаем массив со страницами:

$(document).ready(function ($) {
	pageWidget(['index','blog','news','about_us','contact']);
});

Расширение ‘.html’ указывать не нужно. После вызова этой функции в верхнем левом углу страницы появляется маленький квадрат, наведя на который выдвинется виджет со страницами:

---

http://glivera-team.github.io/javascript/2016/04/06/js-functions.html