Многоуровневое вертикальное меню аккордеон
|
|
origami1333 | Среда, 11 Ноября 2020, 01:05 | Сообщение 1 |
| Доброго времени суток. Взял тут код значит вот этой менюшки /load....-0-9400
поставил себе, чуток подправил и всё вроде бы ничего, НО если открыть 1й выпадающий блок, а потом 2й, то страница просто поднимается вверх. При открытии 1го блока или 2го по отдельности - ничего, всё ок, даже в порядке наоборот ничего. Как это исправить?
Пример
| [ FI ] |
| |
-SAM- | Среда, 11 Ноября 2020, 05:43 | Сообщение 2 |
| origami1333, у меня в браузере лично работает всё нормально. То есть я зашёл на страницу, клацал там на эти "спойлеры" - раскрывается как и положено, страница не движется. Если открыть первый блок, а потом второй - ранее открытый сворачивается, что и предусмотрено этим меню (на то оно и аккордеон)... короче, что при открытии следующего - предыдущий отрытый сворачивается (открыть несколько одновременно нельзя).
Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно. Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
| [ UA ] |
| |
origami1333 | Среда, 11 Ноября 2020, 13:16 | Сообщение 3 |
| Как бы ещё описать.. Открываю "Вертикальное меню". Всё ок. Не закрываю его, открываю сразу "Стильное вертикальное меню" и страница поднимается вверх, при закрытии 1го блока. Как бы всё работает нормально, но этот подъём не даёт мне покоя, уж больно он стрёмный. И да, куки и кеш чистились, проверял по всякому.
---Да как бы я уже ответил - у меня в моём браузере сама страница не поднимается, а идёт движ самих "спойлеров". Поднятие вверх обычно связано с тем, что идёт якорная ссылка # вместо обычного пути... но тут же оно скриптом должно делать раскрытие без подъема. В любом случае - это не вопрос по системе uCoz, о которой раздел.--- © -SAM-
Сообщение отредактировал -SAM- - Четверг, 12 Ноября 2020, 00:49 | [ FI ] |
| |
Сопрано | Среда, 11 Ноября 2020, 14:02 | Сообщение 4 |
| Сам не пойму, все корректно работает, только с крайним запросом идет ошибка, где при клике манюшка поднимается всем каркасом.
| [ RU ] |
| |
Kosten | Среда, 11 Ноября 2020, 14:15 | Сообщение 5 |
| origami1333, на сайте код немного переделаю по стилям, просто меняю, чтоб аналогично не было. Во ссылка на оригинальное меню, попробуйте его поставить, но что то подсказывает и там будет манюшка плесам, но все же попробуйте.
Ссылка: https://codepen.io/kocsten/pen/RvypKw
| [ RU ] |
| |
origami1333 | Среда, 11 Ноября 2020, 14:17 | Сообщение 6 |
| Цитата Сопрано ( ) только с крайним запросом идет ошибка, где при клике манюшка поднимается всем каркасом. вооооот
| [ FI ] |
| |
Kosten | Среда, 11 Ноября 2020, 14:19 | Сообщение 7 |
| Цитата origami1333 ( ) но этот подъём не даёт мне покоя, уж больно он стрёмный. Попробуйте аналогичное меню.. только библиотек намного меньше.. где нужно под шрифты установить.. а также по цвету в стилистике на свою гамму выставить.
Ссылка: /load....0-10330
| [ RU ] |
| |
origami1333 | Среда, 11 Ноября 2020, 14:21 | Сообщение 8 |
| Kosten, 1 в 1
| [ FI ] |
| |
origami1333 | Среда, 11 Ноября 2020, 14:23 | Сообщение 9 |
| Цитата Kosten ( ) Попробуйте аналогичное меню.. только библиотек намного меньше.. где нужно под шрифты установить.. а также по цвету в стилистике на свою гамму выставить. Оно дёрганное, такое мне не подходит.
| [ FI ] |
| |
Kosten | Среда, 11 Ноября 2020, 14:24 | Сообщение 10 |
| origami1333, а по второму варианту не подойдет.
| [ RU ] |
| |
Kosten | Среда, 11 Ноября 2020, 14:32 | Сообщение 11 |
| Замените полностью на этот код.
Код <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, 14:38 | Сообщение 12 |
| Цитата Kosten ( ) Замените полностью на этот код. теперь 3 менюшки, да. И каждая нижняя поднимает страницу вместе с закрытием предыдущей.
| [ FI ] |
| |
Kosten | Среда, 11 Ноября 2020, 14:42 | Сообщение 13 |
| Вероятно там должны были под категорий, где добавил, и вот как получилось.
See the Pen MUNESAD by Kocsten (@kocsten) on CodePen.
| [ RU ] |
| |
origami1333 | Среда, 11 Ноября 2020, 18:14 | Сообщение 14 |
| В общем, проверил на ещё одном тестовике с чистым кодом и как бы да, проблема там такая же. Я чутка уже начал менять код под себя, чтоб хотя бы понимать что и где, так что кину сюда.. вдруг кто-то узнает проблему.
С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, 18:24 | Сообщение 15 |
| origami1333, так в чем проблеме, с добавлением под категорий, все корректно выводит.
| [ RU ] |
| |