Форум Сайтостроение Веб-строительство

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

12
Anamnado
На сайте с 08.02.2010
Offline
242
Anamnado
498

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

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

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

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

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

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

jpg 191956.jpg
S
На сайте с 30.09.2016
Offline
469
Sitealert
#1
Anamnado:
подскажите скриптик

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

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
Anamnado
На сайте с 08.02.2010
Offline
242
Anamnado
#2

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

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

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

https://onotut.ru/

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

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

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

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

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

jpg 191957.jpg
ArbNet
На сайте с 27.10.2019
Online
118
ArbNet
#3
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>

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

Обсуждение разработки на моём фреймворке https://discord.gg/23N4s9x2kp
Anamnado
На сайте с 08.02.2010
Offline
242
Anamnado
#4

ды если бы...

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

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

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

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

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

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

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

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

ОНО можно

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

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

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

хотя ...,

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

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

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

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

Anamnado
На сайте с 08.02.2010
Offline
242
Anamnado
#5

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

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

//то что нас скрине видет П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
На сайте с 27.10.2019
Online
118
ArbNet
#6
Anamnado:
пункт блог - улетел

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

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

Anamnado
На сайте с 08.02.2010
Offline
242
Anamnado
#7

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

не идет

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

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

jpg 191960.jpg
Anamnado
На сайте с 08.02.2010
Offline
242
Anamnado
#8
ArbNet:
Чем выпадающее меню не нравится? например https://snipp.ru/html-css/main-menu

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

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

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

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

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

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

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

Anamnado
На сайте с 08.02.2010
Offline
242
Anamnado
#9
ArbNet:
нравится? например----------------------

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

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

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

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

jpg 191961.jpg
ArbNet
На сайте с 27.10.2019
Online
118
ArbNet
#10

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

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий