вот весь код
<hr class="uk-divider-icon">
<div class="uk-flex uk-flex-center" uk-grid >
<div class="uk-width-3-4">
<div id="_SortAndViewPanel" class="uk-section uk-section-muted uk-padding-small uk-clearfix uk-border-rounded uk-box-shadow-xlarge uk-overlay-primary" style="border: 0.5px solid silver; border-radius: 40px 10px; border-top-style:none; border-left-style:none">
<div class="uk-flex uk-flex-middle uk-float-left">
<!-- byDir -->
<ul id="_list_byDir" class="uk-switcher" uk-tooltip="title: Сортировка по направлению; pos: top-right">
<li class="uk-animation-shake"><a href="?byDir=asc" uk-icon="icon: chevron-up; ratio: 1.5"></a></li>
<li class="uk-animation-shake"><a href="?byDir=desc" uk-icon="icon: chevron-down; ratio: 1.5"></a></li>
</ul>
<div id="_hover_byDir" class="_byPanel" uk-dropdown="mode: hover; delay-hide: 0; pos: bottom-justify">
<span>критерий</span>
<hr>
<ul class="uk-nav uk-dropdown-nav" uk-switcher="connect: #_list_byDir">
<li><a href="?byDir=asc">по возрастанию</a></li>
<li><a href="?byDir=desc"> по убыванию</a></li>
</ul>
</div>
<!-- byName -->
<ul id="_list_byName" class="uk-margin-small-left uk-switcher" uk-tooltip="title: Сортировка по критерию; pos: top" >
<li class="uk-text-uppercase uk-animation-shake"><a class="uk-link-muted">Наименование</a></li>
<li class="uk-text-uppercase uk-animation-shake"><a class="uk-link-muted">Дата</a></li>
</ul>
<div id="_hover_byName" class="_byPanel" uk-dropdown="mode: hover; delay-hide: 0; pos: bottom-justify">
<span>критерий</span>
<hr>
<ul class="uk-nav uk-dropdown-nav" uk-switcher="connect: #_list_byName">
<li><a href="?byName=name">по наименованию</a></li>
<li><a href="?byName=timestanp_x">по дате</a></li>
</ul>
</div>
</div>
<div class="uk-flex uk-flex-middle uk-float-right">
<!-- byCount -->
<ul id="_list_byCount" class="uk-switcher" uk-tooltip="title: Количество элементов на странице; pos: top">
<li class="uk-animation-shake"><a class="uk-link-muted">15</a></li>
<li class="uk-animation-shake"><a class="uk-link-muted">30</a></li>
<li class="uk-animation-shake"><a class="uk-link-muted">60</a></li>
<li class="uk-animation-shake"><a class="uk-link-muted">80</a></li>
</ul>
<div id="_hover_byCount" class="_byPanel" uk-dropdown="mode: hover; delay-hide: 0; pos: bottom-justify">
<span>количество</span>
<hr>
<ul class="uk-nav uk-dropdown-nav" uk-switcher="connect: #_list_byCount">
<li><a href="?byCount=15">15</a></li>
<li><a href="?byCount=30">30</a></li>
<li><a href="?byCount=60">60</a></li>
<li><a href="?byCount=80">80</a></li>
</ul>
</div>
<!-- byView -->
<ul id="_list_byView" class="uk-margin-small-left uk-link-reset uk-switcher" uk-tooltip="title: Вид каталога; pos: top-left">
<li class="uk-animation-shake"><a uk-icon="icon: list; ratio: 1.5"></a></li>
<li class="uk-animation-shake"><a uk-icon="icon: grid; ratio: 1.5"></a></li>
</ul>
<div id="_hover_byView" class="_byPanel" uk-dropdown="mode: hover; delay-hide: 0; pos: bottom-justify">
<span>вид каталога</span>
<hr>
<ul class="uk-nav uk-dropdown-nav" uk-switcher="connect: #_list_byView">
<li><a href="?byView=list">список</a></li>
<li><a href="?byView=board">плитка</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<hr class="uk-divider-icon">
вот js мои попытки
var util = UIkit.util;
var svPanel = util.$('#_SortAndViewPanel'); //основная панель
var svPanels = util.$$('._byPanel'); //списки выбора параметров
util.ready(function () {
util.on(svPanels, 'click', function(event){ //событие по клику на панели
var aIndex=-1; //индекс элемента активной панели
if (event.target.tagName=='A'){
util.trigger(event, sendGet(event.target.search)); //передать get значение в php самому себе
// util.addClass(svPanel, 'uk-overlay-primary'); //затемнить панель
aIndex = util.index(event.target.parentNode);
}
svPanels.forEach(function(userItem) { //загасить активную панель
if (util.isInView(userItem)) {
UIkit.dropdown("#"+userItem.id).hide();
}
});
}
);
util.on('a', 'click', function(event){ //test
console.log(event.target);
});
util.removeClass(svPanel, 'uk-overlay-primary');
});
var request = new XMLHttpRequest();
function GETreqReadyStateChange() {
if (request.readyState == 4) {
var status = request.status;
if (status == 200) {
// document.getElementById("output").innerHTML=request.responseText;
console.log(request.responseText);
}
}
}
function POSTreqReadyStateChange() {
if (request.readyState == 4 && request.status == 200)
document.getElementById("output").innerHTML=request.responseText;
}
function sendGet(body){
console.log(body);
request.open("GET", body);
request.onreadystatechange = GETreqReadyStateChange;
request.send();
// alert(request.responseText);
}