Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Помогите разобраться с меню (https://javascript.ru/forum/jquery/69591-pomogite-razobratsya-s-menyu.html)

Вадим Вадимыч 05.07.2017 09:43
Помогите разобраться с меню
 
Есть меню: 
<nav id="MainMenu">

<div class="list-group panel">

<a id="tplParentRow1" href="#35" class="list-group-item hvr-underline" data-toggle="collapse" data-parent="#MainMenu">
<span class="fa fa-chevron-down fa-lg"></span> Ремонт однокомнатной квартиры</a>

<div class="collapse" id="35">
<a href="remont-odnokomnatnoj-kvartiryi-30-metrov.html" class="first list-group-item"><span class="fa fa-minus fa-lg"></span> Ремонт квартиры 30 метров</a>
<a href="remont-odnokomnatnoj-kvartiryi-60-metrov.html" class="last list-group-item"><span class="fa fa-minus fa-lg"></span> Ремонт квартиры 60 метров</a>
</div>

<a id="tplParentRow1" href="#36" class="list-group-item hvr-underline" data-toggle="collapse" data-parent="#MainMenu"><span class="fa fa-chevron-down fa-lg"></span> Ремонт двух комнатной квартиры</a>

<div class="collapse" id="36">
<a href="remont-dvux-komnatnoj-kvartiryi-30-metrov.html" class="first list-group-item"><span class="fa fa-minus fa-lg"></span> Ремонт двух комнатной квартиры 30 метров</a>
<a href="remont-dvux-komnatnoj-kvartiryi-60-metrov.html" class="last active current list-group-item"><span class="fa fa-minus fa-lg"></span> Ремонт двух комнатной квартиры 60 метров</a>
</div>

<a id="tpl" href="remont-balkonov.html" class="list-group-item hvr-underline">Ремонт балконов</a>
<a id="tpl" href="/" class="list-group-item hvr-underline">Ремонт квартир</a>
</div>
</nav>


Есть скрипт:
<script>
$(function(){
  $('#MainMenu .current').parent('div.collapse').addClass('in');
});
</script>



Меню работает прекрасно, а скрипт который после загрузки страницы должен разворачивать меню аккордеон с текущим пунктом, не работает ПОМОГИТЕ ПОЖАЛУЙСТА, В ДЖАВА ПОЛНЫЙ НОЛЬ

Вот живой пример меню на сайте: http://lisovv.bget.ru/remont-dvux-ko...60-metrov.html

рони 05.07.2017 10:12
Вадим Вадимыч,
в этой строке у вас уже нет $, да и один класс тут не поможет, поэтому так, но это должно быть сделано сервером, а не клиентом.
jQuery(function(){
  jQuery('#MainMenu .current').parent('div.collapse').prev().trigger("click");
});

Вадим Вадимыч 05.07.2017 10:30
Рони все равно не работает, при загрузки страницы акардеон не раскрыт!
Помогите пожалуйста вторые сутки на это убиваю

Вадим Вадимыч 05.07.2017 10:34
Прошу прошения все работает Спасибо Рони

рони 05.07.2017 10:35
Цитата:
Сообщение от Вадим Вадимыч
все равно не работает
спокойствие, всё работает, почистите кеш.

Вадим Вадимыч 06.07.2017 09:49
Рони прошу помоши
 
Рони доброе утро. Меню сделал и перенес на основной сайт, все работает прекрасно, спасибо вам!

Но вот дурная голова не дает покоя рукам, вот что хочется реализовать:
Вот пример получившегося:http://maniyaremonta.ru/remont-kvartir-kotelniki.html
Когда посмотрите на меню по этой ссылки, увидите пункт "Ремонт квартир в Москве", иконочным шрифтом я подставил плюс в начале чтобы пользователю было видно что меню содержит элементы.

Вопрос: можно ли сделать чтобы нажимая на подобные ссылки в меню, при клике и раскрытии иконочный шрифт менялся например с "плюса" на "крестик", и обратно по клику сохраняя функционал?

Помогите пожалуйста, и прошу прошения за то что отвлекаю!!!

laimas 06.07.2017 10:03
Ну так меняйте у активного элемента меню у дочернего <i> класс fa-chevron-down на другой желаемый. А лучше fa-chevron-down оставить, разворачивая его.

рони 06.07.2017 10:11
Вадим Вадимыч,
jQuery(function(){
  jQuery('#MainMenu .current').parent('div.collapse').prev().trigger("click");
  jQuery('a.collapsed').on('click', function() {
  jQuery('i',this).toggleClass('fa-plus fa-minus')
});
});

добавить строку 3, если нужно уточнить селектор 'a.collapsed'

Вадим Вадимыч 06.07.2017 10:11
Сайт сделан на MODX вот я и хочу чтобы скриптом менялся иконочный шрифт, или я не прав?

laimas 06.07.2017 10:21
Цитата:
Сообщение от Вадим Вадимыч
Сайт сделан на MODX
Какая разница на чем он сделан, в стилях применяется подключаемый шрифт Font Awesome и у него есть готовый подключаемый css различных анимаций, да и свою написать не сложно. У вас неудачно выбраны иконки для родителей и дочерних элементов меню не имеющих вложений.

Вадим Вадимыч 06.07.2017 11:00
Подскажите если не трудно какие иконки выбрали бы вы??? СПАСИБО

laimas 06.07.2017 11:30
Цитата:
Сообщение от Вадим Вадимыч
Подскажите если не трудно какие иконки выбрали бы вы?
Я бы удалил вообще иконки у элементов меню не имеющих вложений. У элементов имеющих вложения это стрелка: у закрытого - повернута вправо, у открытого - вниз, показывая раскрытый список. Поворачивать ее можно анимацией.

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

Вадим Вадимыч 06.07.2017 11:33
Спасибо

Вадим Вадимыч 06.07.2017 11:36
У элементов имеющих вложения это стрелка: у закрытого - повернута вправо, у открытого - вниз, показывая раскрытый список. Поворачивать ее можно анимацией.

Не понимаю как можно повернуть анимацией, подскажите пожалуйста???

laimas 06.07.2017 11:53
Цитата:
Сообщение от Вадим Вадимыч
Не понимаю как можно повернуть анимацией
Загляните в паку CSS своего сайта, либо в ней, либо в CSS шрифтов должен быть файл animated.css, который подключается в css-файле шритфа. Это набор различных эффектов, чтобы добавить который к иконке достаточно ей добавить этот класс анимации и класс указывающий анимированную иконку.

Я давал ссылку на страницу примеров использования этого шрифта, там есть и анимированные иконки, а также код этих примеров в котором по классам можно понять, что к чему.

Шибалов 20.07.2018 15:21
Доброго дня. Подобная проблема. После клика на ссылке страница открывается с закрытым аккордеоном. А надо, чтоб оставалось открытым на кликнутой ссылке. сайт 


<script type="text/javascript" src="http://delaisait.ucoz.ru/js/jQuery/plugin/multiple-accordion.js"></script>
<script language="JavaScript">
$(document).ready(function() {
$(".dssection").accordion({
accordion:true,
speed: 50,
 closedSign: '<img src="http://gtrad.ucoz.net/arvniz.gif">',
openedSign: '<img src="http://gtrad.ucoz.net/arvverh.gif">'
});
});
</script>
<div class="dssection">
<ul>
<li><a href="#">Каталог</a>
<ul>
<li><a href="#http://gtrad.ucoz.net/index/0-19">БРС</a>
 <ul>
<li><a href="#http://gtrad.ucoz.net/index/0-19">Камлоки</a>
 <ul>
<li><a href="http://gtrad.ucoz.net/publ/14-1-0-2">Алюминий</a></li>
<li><a href="http://gtrad.ucoz.net/index/0-39">Нержа</a></li>
<li><a href="#">Полипропилен</a></li>
<li><a href="#">Кольца</a></li>
<li><a href="#">Размеры</a></li>
<li><a href="#">Адаптеры</a>
 <ul>
<li><a href="#">Под приварку</a></li>
<li><a href="#">Фланцевые</a></li>
<li><a href="#">Подуровень 3</a></li>
<li><a href="#">Подуровень 4</a></li>
</ul>
 </li>
</ul>
 </li>
<li><a href="#">Буровые</a></li>
<li><a href="#">Подуровень 3</a></li>
<li><a href="#">Подуровень 4</a></li>
</ul>
 </li>
<li><a href="#">Уровень 1-2</a></li>
<li><a href="#">Уровень 1-3</a></li>
<li><a href="#">Рукава</a>
<ul>
<li><a href="#">Рукава 1</a></li>
<li><a href="#">Рукава 2</a></li>
<li><a href="#">Подуровень 3</a></li>
<li><a href="#">Подуровень 4</a></li>
</ul>
</li>
<li><a href="#">Уровень 1-4</a></li>
</ul>
</li>
 <li><a href="#">Фильтр</a></li>
<li><a href="#">2я ячейка пунктов</a>
<ul>
<li><a href="#">Уровень 1</a></li>
<li><a href="#">Уровень 2 переход</a>
<ul>
<li><a href="#">Подуровень 1</a></li>
<li><a href="#">Подуровень 2</a></li>
<li><a href="#">Подуровень 3</a></li>
<li><a href="#">Подуровень 4</a></li>
</ul>
</li>
<li><a href="#">Уровень 1-2</a></li>
<li><a href="#">Уровень 1-3</a></li>
<li><a href="#">Уровень 1-4</a></li>
</ul>
</li>
<li><a href="#">3я ячейка пунктов</a>
<ul>
<li><a href="#">Уровень 1</a></li>
<li><a href="#">Уровень 1-2</a></li>
<li><a href="#">Уровень 2 переход</a>
<ul>
<li><a href="#">Подуровень 1</a></li>
<li><a href="#">Подуровень 2</a></li>
<li><a href="#">Подуровень 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>


и скрипт

/*
 * jQuery UI Multilevel Accordion v.1 
 * Copyright (c) 2011 Pieter Pareit
 * [url]http://www.scriptbreaker.com[/url]
 */

//plugin definition
(function($){
    $.fn.extend({

    //передать переменную options в функцию
    accordion: function(options) {
        
		var defaults = {
			accordion: 'true',
			speed: 300,
			closedSign: '[+]',
			openedSign: '[-]'
		};

		// Расширьте наши параметры по умолчанию с предоставленными вами.
		var opts = $.extend(defaults, options);
		//Назначить текущий элемент переменной, в этом случае это элемент UL
 		var $this = $(this);
 		
 		//добавьте отметку [+] в многоуровневое меню
 		$this.find("li").each(function() {
 			if($(this).find("ul").size() != 0){
 				//добавить многоуровневый знак рядом со ссылкой
 				$(this).find("a:first").append("<span>"+ opts.closedSign +"</span>");
 				
 				//избегайте прыгать в верхнюю часть страницы, когда href является #
 				if($(this).find("a:first").attr('href') == "#"){
 		  			$(this).find("a:first").click(function(){return false;});
 		  		}
 			}
 		});

 		//открытый активный уровень
 		$this.find("li.active").each(function() {
 			$(this).parents("ul").slideDown(opts.speed);
 			$(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);
 		});

  		$this.find("li a").click(function() {
  			if($(this).parent().find("ul").size() != 0){
  				if(opts.accordion){
  					//Ничего не делать, когда список открыт
  					if(!$(this).parent().find("ul").is(':visible')){
  						parents = $(this).parent().parents("ul");
  						visible = $this.find("ul:visible");
  						visible.each(function(visibleIndex){
  							var close = true;
  							parents.each(function(parentIndex){
  								if(parents[parentIndex] == visible[visibleIndex]){
  									close = false;
  									return false;
  								}
  							});
  							if(close){
  								if($(this).parent().find("ul") != visible[visibleIndex]){
  									$(visible[visibleIndex]).slideUp(opts.speed, function(){
  										$(this).parent("li").find("span:first").html(opts.closedSign);
  									});
  									
  								}
  							}
  						});
  					}
  				}
  				if($(this).parent().find("ul:first").is(":visible")){
  					$(this).parent().find("ul:first").slideUp(opts.speed, function(){
  						$(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);
  					});
  					
  					
  				}else{
  					$(this).parent().find("ul:first").slideDown(opts.speed, function(){
  						$(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
  					});
  				}
  			}
  		});
    }
});
})(jQuery);


и css

.dssection {background: #f3f3f5;padding:0;list-style:none;}
.dssection ul{padding: 0;margin: 0;font-size: 11x;line-height: 12px;list-style: none;}
.dssection li {;list-style: none;}
/*menu0*/
.dssection li a {display: block;line-height: 12px;/*text-indent:5px;*/padding-left: 5px;color:#000;height: 15px;text-decoration: none;font-size: 11px;font-weight: normal;outline:none;}
.dssection li a:hover {display: block;background: #e6e6e6;text-decoration:none;}
/*menu-1 */
.dssection ul ul {background:#fff;/*padding: 10px 0 10px 0*/;display:none;}
.dssection ul ul li {margin: 0;padding: 0;clear: both;}
.dssection ul ul li a {/* Цвет фона внутри */background: #fff;padding: 0px 0 0 0;height:15px;line-height: 12px;text-decoration: none;/* Цвет текста */color: #005e2b;text-indent:10px;font-size:11px;}
.dssection ul ul li.active a {color: #000;font-weight: bold;}
.dssection ul ul li a:hover {/*menu-1 */background: #e6e6e6;padding: 0px 0 0 0;height:15px;line-height: 12px;text-decoration: none;/* Цвет текста при наведении */color: #005e2b;text-indent:10px;/* Размер текста при наведении */font-size:11px;}
/*menu-2 */
.dssection ul ul ul li a {color:#000;padding-left:5px;}
.dssection ul ul ul li.active a {color: #000;font-weight: bold;}
.dssection ul ul ul li a:hover {/* menu 2 */background-color:#D3CEB8;/* Цвет текста пункта при наведении */color:#675C7C;padding-left: 5px;}
/*menu-3 */
.dssection ul ul ul ul li a {color:#000;padding-left:10px;}
.dssection ul ul ul li.active a {color: #000;font-weight: bold;}
.dssection ul ul ul ul li a:hover {/* menu 2 */background-color:#D3CEB8;/* Цвет текста пункта при наведении */color:#675C7C;padding-left: 10px;}
/*menu-4 */
.dssection ul ul ul ul ul li a {color:#ff0000;padding-left:15px;}
.dssection ul ul ul li.active a {color: #000;font-weight: bold;}
.dssection ul ul ul ul ul li a:hover {background-color:#D3CEB8;color:#675C7C;padding-left: 15px;}

.dssection ul span{float: right;clear:both; padding-right:5px}

рони 20.07.2018 17:36
Шибалов,
предположим выбрали Фланцевые, сервер, выбранному пункту меню, ставит класс uMenuItemA (строка 72), тогда собираем всех родителей и кликаем (строка 49).
на вашем сайте это не сработет, там не дерево в меню ... связь между блоками меню одному вам известна.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css"> .dssection {background: #f3f3f5;padding:0;list-style:none;}
 .dssection ul{padding: 0;margin: 0;font-size: 11x;line-height: 12px;list-style: none;}
 .dssection li {;list-style: none;}
 /*menu0*/
 .dssection li a {display: block;line-height: 12px;/*text-indent:5px;*/padding-left: 5px;color:#000;height: 15px;text-decoration: none;font-size: 11px;font-weight: normal;outline:none;}
 .dssection li a:hover {display: block;background: #e6e6e6;text-decoration:none;}
 /*menu-1 */
 .dssection ul ul {background:#fff;/*padding: 10px 0 10px 0*/;display:none;}
 .dssection ul ul li {margin: 0;padding: 0;clear: both;}
 .dssection ul ul li a {/* Цвет фона внутри */background: #fff;padding: 0px 0 0 0;height:15px;line-height: 12px;text-decoration: none;/* Цвет текста */color: #005e2b;text-indent:10px;font-size:11px;}
 .dssection ul ul li.active a {color: #000;font-weight: bold;}
 .dssection ul ul li a:hover {/*menu-1 */background: #e6e6e6;padding: 0px 0 0 0;height:15px;line-height: 12px;text-decoration: none;/* Цвет текста при наведении */color: #005e2b;text-indent:10px;/* Размер текста при наведении */font-size:11px;}
 /*menu-2 */
 .dssection ul ul ul li a {color:#000;padding-left:5px;}
 .dssection ul ul ul li.active a {color: #000;font-weight: bold;}
 .dssection ul ul ul li a:hover {/* menu 2 */background-color:#D3CEB8;/* Цвет текста пункта при наведении */color:#675C7C;padding-left: 5px;}
 /*menu-3 */
 .dssection ul ul ul ul li a {color:#000;padding-left:10px;}
 .dssection ul ul ul li.active a {color: #000;font-weight: bold;}
 .dssection ul ul ul ul li a:hover {/* menu 2 */background-color:#D3CEB8;/* Цвет текста пункта при наведении */color:#675C7C;padding-left: 10px;}
 /*menu-4 */
 .dssection ul ul ul ul ul li a {color:#ff0000;padding-left:15px;}
 .dssection ul ul ul li.active a {color: #000;font-weight: bold;}
 .dssection ul ul ul ul ul li a:hover {background-color:#D3CEB8;color:#675C7C;padding-left: 15px;}

 .dssection ul span{float: right;clear:both; padding-right:5px}

.dssection .uMenuItemA > a{
      border: 1px solid #FF0000;
 }

  </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="https://delaisait.ucoz.ru/js/jQuery/plugin/multiple-accordion.js"></script>
  <script>
$(function() {
    $(".dssection").accordion({
        accordion: true,
        speed: 50,
        closedSign: '<img src="https://gtrad.ucoz.net/arvniz.gif">',
        openedSign: '<img src="https://gtrad.ucoz.net/arvverh.gif">'
    });
    $(".uMenuItemA").parentsUntil(".dssection").add(".uMenuItemA").find("a:first").click();
});
  </script>
</head>

<body>

<div class="dssection">
    <ul>
        <li><a href="#">Каталог</a>
            <ul>
                <li><a href="#http://gtrad.ucoz.net/index/0-19">БРС</a>
                    <ul>
                        <li><a href="#http://gtrad.ucoz.net/index/0-19">Камлоки</a>
                            <ul>
                                <li><a href="http://gtrad.ucoz.net/publ/14-1-0-2">Алюминий</a></li>
                                <li><a href="http://gtrad.ucoz.net/index/0-39">Нержа</a></li>
                                <li><a href="#">Полипропилен</a></li>
                                <li><a href="#">Кольца</a></li>
                                <li><a href="#">Размеры</a></li>
                                <li ><a href="#">Адаптеры</a>
                                    <ul>
                                        <li><a href="#">Под приварку</a></li>
                                        <li class="uMenuItemA"><a href="#">Фланцевые</a></li>
                                        <li><a href="#">Подуровень 3</a></li>
                                        <li><a href="#">Подуровень 4</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Буровые</a></li>
                        <li><a href="#">Подуровень 3</a></li>
                        <li><a href="#">Подуровень 4</a></li>
                    </ul>
                </li>
                <li><a href="#">Уровень 1-2</a></li>
                <li><a href="#">Уровень 1-3</a></li>
                <li><a href="#">Рукава</a>
                    <ul>
                        <li><a href="#">Рукава 1</a></li>
                        <li><a href="#">Рукава 2</a></li>
                        <li><a href="#">Подуровень 3</a></li>
                        <li><a href="#">Подуровень 4</a></li>
                    </ul>
                </li>
                <li><a href="#">Уровень 1-4</a></li>
            </ul>
        </li>
        <li><a href="#">Фильтр</a></li>
        <li><a href="#">2я ячейка пунктов</a>
            <ul>
                <li><a href="#">Уровень 1</a></li>
                <li><a href="#">Уровень 2 переход</a>
                    <ul>
                        <li><a href="#">Подуровень 1</a></li>
                        <li><a href="#">Подуровень 2</a></li>
                        <li><a href="#">Подуровень 3</a></li>
                        <li><a href="#">Подуровень 4</a></li>
                    </ul>
                </li>
                <li><a href="#">Уровень 1-2</a></li>
                <li><a href="#">Уровень 1-3</a></li>
                <li><a href="#">Уровень 1-4</a></li>
            </ul>
        </li>
        <li><a href="#">3я ячейка пунктов</a>
            <ul>
                <li><a href="#">Уровень 1</a></li>
                <li><a href="#">Уровень 1-2</a></li>
                <li><a href="#">Уровень 2 переход</a>
                    <ul>
                        <li><a href="#">Подуровень 1</a></li>
                        <li><a href="#">Подуровень 2</a></li>
                        <li><a href="#">Подуровень 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>


</body>
</html>

Шибалов 09.08.2018 11:00
Посоветуете, как выкрутиться?

рони 09.08.2018 11:44
Шибалов,
на сервере нужно сделать нормальную иерархию пунктов. нужен специалист по php и html.

Шибалов 10.08.2018 15:44
вот здесь уменьшил меню. Всё вроде работает, а на сайте не хочет.

Malleys 10.08.2018 16:42
А так работает???

<div class="dssection">
<ul>
<li><a href="#">Каталог</a>
<ul>
<li><a href="/index/0-19">БРС</a>
<ul>
<li><a href="/index/0-20">Камлоки</a>
<ul>
<li><a href="/publ/14-1-0-2">Алюминий</a></li>
<li><a href="/index/0-39">Нержа</a></li>
<li><a href="#">Полипропилен</a></li>
<li><a href="#">Кольца</a></li>
<li><a href="#">Размеры</a></li>
<li><a href="#">Адаптеры</a>
<ul>
<li><a href="#">Под приварку</a></li>
<li><a href="#">Фланцевые</a></li>
<li><a href="#">Подуровень 3</a></li>
<li><a href="#">Подуровень 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Буровые</a></li>
<li><a href="#">Подуровень 3</a></li>
<li><a href="#">Подуровень 4</a></li>
</ul>
</li>
<li><a href="#">Рукава</a>
<ul>
<li><a href="#">Рукава 1</a></li>
<li><a href="#">Рукава 2</a></li>
<li><a href="#">Подуровень 3</a></li>
<li><a href="#">Подуровень 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

<style>
	.dssection a:not(:only-child)::after {
		content: url(http://gtrad.ucoz.net/arvverh.gif);
		padding: 0 .4em;
		vertical-align: .1em;
	}
	
	.dssection a:not(:only-child).expanded::after {
		content: url(http://gtrad.ucoz.net/arvniz.gif)
	}
</style>
<script>
	
	Array.from(document.querySelectorAll(".dssection a + ul")).forEach(function(element) {
		element.hidden = true;
	});

	document.addEventListener("click", function(event) {
		if(event.target.matches(".dssection a") && event.target.nextElementSibling.tagName === "UL") {
			event.preventDefault();
			event.target.nextElementSibling.hidden = !event.target.nextElementSibling.hidden;
			event.target.classList.toggle("expanded", !event.target.nextElementSibling.hidden);
		}
	});
	
</script>


UPD
Вместе со стилями из 1-го поста
https://jsfiddle.net/b9Luk1td/

И удалите на сайте в файле my.css на 408 строке display: none;

Шибалов 13.08.2018 10:12
"Удалил на сайте в файле my.css на 408 строке display: none;" - меню загружается полностью открытым. Не работает. Вернул как было.
Кода намного меньше. Жмешь на ссылку в подкатегории, страница открывается, а меню закрывается.

Вот здесь нашел меню с 4 уровнями вложенности. Вроде работает.


Часовой пояс GMT +3, время: 20:36.