• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: -SAM-  
Форум » Веб-разработка » Вопросы про uCoz » Многоуровневое вертикальное меню аккордеон (Вертикальное меню аккордеон для сайта. HTML, CSS и JavaScrip)
Многоуровневое вертикальное меню аккордеон
origami1333
 		Среда, 11 Ноября 2020 | Сообщение 1
Оффлайн
Проверенные
Сообщений:18
Награды: 0
« 1 »
Доброго времени суток. Взял тут код значит вот этой менюшки
/load....-0-9400

поставил себе, чуток подправил и всё вроде бы ничего, НО если открыть 1й выпадающий блок, а потом 2й, то страница просто поднимается вверх. При открытии 1го блока или 2го по отдельности - ничего, всё ок, даже в порядке наоборот ничего.
Как это исправить?

Пример
Страна: (FI)
-SAM-
 		Среда, 11 Ноября 2020 | Сообщение 2
Оффлайн
Друзья сайта
Сообщений:882
Награды: 40
« 595 »
origami1333, у меня в браузере лично работает всё нормально. То есть я зашёл на страницу, клацал там на эти "спойлеры" - раскрывается как и положено, страница не движется. Если открыть первый блок, а потом второй - ранее открытый сворачивается, что и предусмотрено этим меню (на то оно и аккордеон)... короче, что при открытии следующего - предыдущий отрытый сворачивается (открыть несколько одновременно нельзя).


Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Страна: (UA)
origami1333
 		Среда, 11 Ноября 2020 | Сообщение 3
Оффлайн
Проверенные
Сообщений:18
Награды: 0
« 1 »
Как бы ещё описать..
Открываю "Вертикальное меню". Всё ок. Не закрываю его, открываю сразу "Стильное вертикальное меню" и страница поднимается вверх, при закрытии 1го блока. Как бы всё работает нормально, но этот подъём не даёт мне покоя, уж больно он стрёмный.
И да, куки и кеш чистились, проверял по всякому.
---Да как бы я уже ответил - у меня в моём браузере сама страница не поднимается, а идёт движ самих "спойлеров". Поднятие вверх обычно связано с тем, что идёт якорная ссылка # вместо обычного пути... но тут же оно скриптом должно делать раскрытие без подъема. В любом случае - это не вопрос по системе uCoz, о которой раздел.--- © -SAM-

Сообщение отредактировал
-SAM- - Четверг, 12 Ноября 2020, 00:49
Страна: (FI)
Сопрано
 		Среда, 11 Ноября 2020 | Сообщение 4
Оффлайн
Vip
Сообщений:462
Награды: 4
« 14 »
Сам не пойму, все корректно работает, только с крайним запросом идет ошибка, где при клике манюшка поднимается всем каркасом.
Страна: (RU)
Kosten
 		Среда, 11 Ноября 2020 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
origami1333, на сайте код немного переделаю по стилям, просто меняю, чтоб аналогично не было. Во ссылка на оригинальное меню, попробуйте его поставить, но что то подсказывает и там будет манюшка плесам, но все же попробуйте.

Ссылка: https://codepen.io/kocsten/pen/RvypKw
Страна: (RU)
origami1333
 		Среда, 11 Ноября 2020 | Сообщение 6
Оффлайн
Проверенные
Сообщений:18
Награды: 0
« 1 »
Цитата Сопрано ()
только с крайним запросом идет ошибка, где при клике манюшка поднимается всем каркасом.

вооооот
Страна: (FI)
Kosten
 		Среда, 11 Ноября 2020 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Цитата origami1333 ()
но этот подъём не даёт мне покоя, уж больно он стрёмный.

Попробуйте аналогичное меню.. только библиотек намного меньше.. где нужно под шрифты установить.. а также по цвету в стилистике на свою гамму выставить.

Ссылка: /load....0-10330
Страна: (RU)
origami1333
 		Среда, 11 Ноября 2020 | Сообщение 8
Оффлайн
Проверенные
Сообщений:18
Награды: 0
« 1 »
Kosten, 1 в 1
Страна: (FI)
origami1333
 		Среда, 11 Ноября 2020 | Сообщение 9
Оффлайн
Проверенные
Сообщений:18
Награды: 0
« 1 »
Цитата Kosten ()
Попробуйте аналогичное меню.. только библиотек намного меньше.. где нужно под шрифты установить.. а также по цвету в стилистике на свою гамму выставить.

Оно дёрганное, такое мне не подходит.
Страна: (FI)
Kosten
 		Среда, 11 Ноября 2020 | Сообщение 10
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
origami1333, а по второму варианту не подойдет.
Страна: (RU)
Kosten
 		Среда, 11 Ноября 2020 | Сообщение 11
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Замените полностью на этот код.

Код
<div class="kapresem-ngeormakon">
  <a href="#" class="stodsaval-eakesaned">Навигация<i class="icono fa fa-bars"></i></a>

  <ul class="nagekaned">
  <li><a href="#"><i class="icono izquierda fa fa-home"></i>Главная сайта</a></li>
  <li><a href="#"><i class="icono izquierda fa fa-star"></i>Вертикальное меню<i class="icono derecha fa fa-chevron-down"></i></a>
  <ul>
  <li><a href="/">Под категорий 1</a></li>
  <li><a href="/">Под категорий 2</a></li>
  <li><a href="/">Под категорий 3</a></li>
  </ul>
  </li>
  <li><a href="#"><i class="icono izquierda fa fa-share-alt"></i>Стильное вертикальное меню<i class="icono derecha fa fa-chevron-down"></i></a>
  <ul>
  <li><a href="#">Актуальный запрос 1</a></li>
  <li><a href="#">Актуальный запрос 2</a></li>
  <li><a href="#">Актуальный запрос 3</a></li>
  </ul>
  </li>
   <li><a href="#"><i class="icono izquierda fa fa-share-alt"></i>Одна из категорий<i class="icono derecha fa fa-chevron-down"></i></a>
  <ul>
  <li><a href="#">Актуальный запрос 1</a></li>
  <li><a href="#">Актуальный запрос 2</a></li>
  <li><a href="#">Актуальный запрос 3</a></li>
  </ul>
  </li>
  </ul>
  </div>
Страна: (RU)
origami1333
 		Среда, 11 Ноября 2020 | Сообщение 12
Оффлайн
Проверенные
Сообщений:18
Награды: 0
« 1 »
Цитата Kosten ()
Замените полностью на этот код.

теперь 3 менюшки, да. И каждая нижняя поднимает страницу вместе с закрытием предыдущей.
Страна: (FI)
Kosten
 		Среда, 11 Ноября 2020 | Сообщение 13
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Вероятно там должны были под категорий, где добавил, и вот как получилось.


See the Pen
MUNESAD by Kocsten (@kocsten)
on CodePen.
Страна: (RU)
origami1333
 		Среда, 11 Ноября 2020 | Сообщение 14
Оффлайн
Проверенные
Сообщений:18
Награды: 0
« 1 »
В общем, проверил на ещё одном тестовике с чистым кодом и как бы да, проблема там такая же.
Я чутка уже начал менять код под себя, чтоб хотя бы понимать что и где, так что кину сюда.. вдруг кто-то узнает проблему.

СSS
Код

.side-menu-nav {
display: none;
padding: 20px;
background: #0d2c44;
color:#fff;
}

.side-menu-nav .side-icon {
float: right;
}

.side-menu {
width: 38%;
min-width: 300px;
display: inline-block;
font-family: 'Roboto', sans-serif;
line-height: 18px;
}

.side-menu .side-menu-part {
width: 100%;
}

.side-menu ul {
list-style: none;
}

.side-menu .side-menu-part li a {
color:#494949;
display: block;
padding: 15px 20px;
background: #e9e9e9;
}

.side-menu .side-menu-part li a:hover {
background: #1a95d5;
color:#fbfbfb;
}

.side-menu .side-menu-part .side-icon {
font-size: 15px;
line-height: 18px;
}

.side-menu .side-menu-part .side-icon.izquierda {
float: left;
margin-right: 10px;
}

.side-menu .side-menu-part .side-icon.derecha {
float: right;
margin-left: 10px;
}

.side-menu .side-menu-part ul {
display: none;
}

.side-menu .side-menu-part ul li a {
background: #403c3c;
color: #f1f0f0;
}

.side-menu .side-menu-part .activado > a {
background: #214d73;
color:#efeaea;
}


Сам блок меню
Код

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  
  
  <div class="side-menu">
  <a href="#" class="side-menu-nav">Навигация<i class="side-icon fa fa-bars"></i></a>

  <ul class="side-menu-part">
  <li><a href="#"><i class="side-icon izquierda fa fa-home"></i>Главная сайта</a></li>
  <li><a href="#"><i class="side-icon izquierda fa fa-star"></i>Вертикальное меню<i class="side-icon derecha fa fa-chevron-down"></i></a>
  <ul>
  <li><a href="/">Под категорий 1</a></li>
  <li><a href="/">Под категорий 2</a></li>
  <li><a href="/">Под категорий 3</a></li>
  </ul>
  </li>
  <li><a href="#"><i class="side-icon izquierda fa fa-share-alt"></i>Вертикальное меню<i class="side-icon derecha fa fa-chevron-down"></i></a>
  <ul>
  <li><a href="#">Актуальный запрос 1</a></li>
  <li><a href="#">Актуальный запрос 2</a></li>
  <li><a href="#">Актуальный запрос 3</a></li>
  </ul>
  </li>
  <li><a href="#"><i class="side-icon izquierda fa fa-star"></i>Новая категория<i class="side-icon derecha fa fa-chevron-down"></i></a>
  <ul>
  <li><a href="/">Под категорий 1</a></li>
  <li><a href="/">Под категорий 2</a></li>
  <li><a href="/">Под категорий 3</a></li>
  </ul>
  </li>

  </ul>
  </div>


Скрипт
Код
<script>
$(document).ready(function(){
  $('.side-menu-part li:has(ul)').click(function(e){
  e.preventDefault();

  if ($(this).hasClass('activado')){
  $(this).removeClass('activado');
  $(this).children('ul').slideUp();
  } else {
  $('.side-menu-part li ul').slideUp();
  $('.side-menu-part li').removeClass('activado');
  $(this).addClass('activado');
  $(this).children('ul').slideDown();
  }
  });

  $('.side-menu-nav').click(function(){
  $('.side-menu .side-menu-part').slideToggle();
  });

  $(window).resize(function(){
  if ($(document).width() > 450){
  $('.side-menu .side-menu-part').css({'display' : 'block'});
  }

  if ($(document).width() < 450){
  $('.side-menu .side-menu-part').css({'display' : 'none'});
  $('.side-menu-part li ul').slideUp();
  $('.side-menu-part li').removeClass('activado');
  }
  });

  $('.side-menu-part li ul li a').click(function(){
  window.location.href = $(this).attr("href");
  });
});
</script>
Страна: (FI)
Kosten
 		Среда, 11 Ноября 2020 | Сообщение 15
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
origami1333, так в чем проблеме, с добавлением под категорий, все корректно выводит.
Страна: (RU)
Форум » Веб-разработка » Вопросы про uCoz » Многоуровневое вертикальное меню аккордеон (Вертикальное меню аккордеон для сайта. HTML, CSS и JavaScrip)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: