Горизонтальное, адаптивное, 2-х уровневое (оно же выпадающее) работающее по клику )

Anamnado

21 мая 2020, 09:29

437

подскажите скриптик может, кто знает где такой лежит…

горизонтальное, адаптивное, многоуровневое (оно же выпадающее) работающее по клику )

а то мой из за за особенностей верстки нового шаблона не подходит а изобретать велосилед пока еще рано..

акцентирую еще раз внимание — по клику — — по наведению мышки весь топ забит — до 15 страницы просмотрел.. ((хорошие рабочие но мне не подходят)

// ну конечео 50% там одно и тоже.. (копипаст скрипта и рерайт описания но вопрос не про это)

дизайн и всякие там эффекты значения не имеют

jpg

191956.jpg

Sitealert

21 мая 2020, 09:49

Anamnado:
подскажите скриптик

Тебе для onclick скриптик сложно написать?

Anamnado

21 мая 2020, 10:16

Sitealert, нет- оклик написать ваще не сложно

сложно придумать структуру этого меню….

ну вот для наглядности куда для чего: (

https://onotut.ru/

в простом меню сложности не — именно с выпадающем (многоуровневым )есть). так же вертикальным решением проблем нет — с горизонтальным есть…

на реализации онклик есть проблемка

когда подменю открыось а перехода на другую страницу не было — его надо как то закрыть.. (само не закроется)

( вот и ищу как у других делается это…

тут варианты отдыха — нужно разбить на: кемпинг, круизы, походы, оздоровительный….

jpg

191957.jpg

ArbNet

21 мая 2020, 10:22

Anamnado:
сложно придумать структуру этого меню)


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Тест</title>
  <style>
    ul.menu {
      display: flex;
      list-style: none;
    }
    ul.menu li {
      margin: 0.5em;
      padding: 0.3em;
      border: 1px solid;
    }
    ul.menu input, ul.menu ul {display: none}
    ul.menu input:checked ~ ul {display: block}
    ul.menu ul {
      position: relative;
    }
    ul.menu li ul {
      left: 0.5em;
      position: absolute;
    }
  </style>
</head> 
<body>
<ul class="menu">
  <li><label for=m1>Пункт 1</label>
      <input id=m1 type="checkbox">
      <ul class="menu">
        <li>Подменю 1</li>
        <li>Подменю 2</li>
      </ul>
  </li>
  <li>Пункт 2</li>
</ul>

</body>
<script>

</script>
</html>

Вот тебе мой велосипед, дальше сам додумаешь…

Anamnado

21 мая 2020, 10:30

ды если бы…

и когда в горизонтальном меню я визуализирую

<li>Подменю 1</li>

всё что идет после него — упадет вниз по верстке… ПОД НЕГО — а у меня там пункт — блог

(похоже тут вложенность списка ul не подойдет нужно делать независимые блоки)

или всплывающие подменю — по стилю абсолют (поверх всего) что меньше всего хочется…

Но — предположим что в первой версии проблем нет — всё подточим разными правдами и неправдами …

а вторая версия (мобильная) — подменю должно появляться ПОД пунктом меню его вызвавшим…… сместив вниз остальные — то есть делать ТО что мы избегали в первой версии….

{отменять все то что мы делали —- Ды это код будет пипец какой большой .. а ради чего ……}

ОНО можно

я про то что сам я пример выше додумаю конечно НО…

тема для другого….

———- Добавлено 21.05.2020 в 13:47 ———-

хотя …,

прощу прощения появилась идейка …

мы может наверное — родительский пункт увеличить высоту… (и спри сихраннениистиля flot::left он вниз увеличится и в него водуут вложенные в него -вниз) а подобные также будут слева ……

кому ясно кому — не ясно

хм в любом случае мне уже есть что попробовать…. — щас минут через 10 отпишусь

Anamnado

21 мая 2020, 11:03

нет не прокатило

и вот тут ясно виодно о чем я говорил — пункт блог — улетел

//то что нас скрине видет П1 и П1 корявенько — это значение не имеет — мелочи — главное что —блог — улетает 🙁 — если вместо готового примера есть идеи — как предотвратить -c удовольствием воспользуюсь…

<li style=»height:150px; border: 1px solid #000;»><a href=»https://onotut.ru/#» >Варианты отдыха</a></li>
———<ul style=»float:none; border:1px solid #FF0000; «>
—————<li><a href=»https://onotut.ru/#» >Пункт1</a></li>
—————<li><a href=»https://onotut.ru/#» >Пункт 2</a></li>
———</ul>
<li><a href=»https://onotut.ru/#» >Блог</a></li>

jpg

191958.jpg

ArbNet

21 мая 2020, 11:08

Anamnado:
пункт блог — улетел

С CSS совсем не дружишься?

Чем выпадающее меню не нравится? например https://snipp.ru/html-css/main-menu

Anamnado

21 мая 2020, 11:16

еще то се потыкал

не идет

а пишу чтобы сказать что а вот в мобильной версии все ок

то есть когда меню стало вертикальным

jpg

191960.jpg

Anamnado

21 мая 2020, 11:18

ArbNet:
Чем выпадающее меню не нравится? например https://snipp.ru/html-css/main-menu

задача стоит же четко и жестко

— нужно по клику — а там подменю открывается по наведению

я вот структуру и реализацию — проштудирую…

ArbNet:
С CSS совсем не дружишься?

странный вопрос — тут люди с сайтами не дружат вопросы задают , а они у них есть!

так что — выходит что НЕТ (иначе бы темы не было — И заметьте — не под ботом спрашиваю ). ага.

= тема не про это !

Anamnado

21 мая 2020, 11:35

ArbNet:
нравится? например———————-

я не знаю в чем приколы но много встречаю демо, которые у меня не работают

и вот это было одно из них

в итоге имеем туже проблему что и у меня … (результат на скрине)

перехлеста описания в стилях с моим нет

jpg

191961.jpg

ArbNet

21 мая 2020, 12:17

Anamnado, Изучай CSS делай сам или заказывай разработкунастройку нужного тебе меню, тут других вариантов нет. Я показал принцип показа подменю по клику, чтобы довести до ума надо знать CSS и думаю ещё JS нужен чтобы скрыть открытое подменю при клике на другой пункт, иначе не красиво будет.

Похожие записи:

Добавить комментарий Отменить ответ