выпадающее меню в описании форумов вместо ссылок

Поделиться1Чт, 23 Фев 2023 16:30:37

Автор: мятный чай
Заслуженный
Зарегистрирован: Пт, 3 Авг 2018
Сообщений: 99
Уважение: +28
Позитив: +45
Последний визит:
Чт, 12 Дек 2024 17:49:30

Не раз видела на форумах выпадающее меню навигации вместо подобного списка ссылок в описании:

Но не знаю где взять такой код или скрипт (не уверена, что это конкретно). Может кто подскажет?

Ссылка на тест: http://num1.rusff.me/

0

Поделиться2Чт, 23 Фев 2023 16:51:21

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7393
Уважение: +5894
Позитив: +6521
Пол: Мужской
Последний визит:
Сегодня 15:46:08

мятный чай написал(а):

Не раз видела на форумах выпадающее меню навигации вместо подобного списка ссылок в описании:

Уберите тег <br>, оберните ссылки в блок: <div></div> и можно будет сделать через css..

+1

Поделиться3Чт, 23 Фев 2023 16:55:23

Автор: мятный чай
Заслуженный
Зарегистрирован: Пт, 3 Авг 2018
Сообщений: 99
Уважение: +28
Позитив: +45
Последний визит:
Чт, 12 Дек 2024 17:49:30

kolobdur74 написал(а):

Уберите тег <br>, оберните ссылки в блок: <div></div> и можно будет сделать через css..

br убрала, ссылки в div завернула, а что в css делать?

0

Поделиться4Чт, 23 Фев 2023 17:04:59

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7393
Уважение: +5894
Позитив: +6521
Пол: Мужской
Последний визит:
Сегодня 15:46:08

мятный чай написал(а):

br убрала, ссылки в div завернула, а что в css делать?

Не так.. Вот так сделайте:

А вот css под него (в НТМЛ верх):

Код:

<style>
.tclcon {position: relative;}
.ssylka {display: none;background-color: #ccdae2;}
.tclcon h3:hover + .ssylka {display: block;position: absolute;top:20px;}
</style>

Проверяйте..

+1

Поделиться5Чт, 23 Фев 2023 17:13:51

Автор: мятный чай
Заслуженный
Зарегистрирован: Пт, 3 Авг 2018
Сообщений: 99
Уважение: +28
Позитив: +45
Последний визит:
Чт, 12 Дек 2024 17:49:30

kolobdur74
Есть:

и в хтмл-верх тоже поставила, но не работает почему-то

0

Поделиться6Чт, 23 Фев 2023 17:16:43

Автор: мятный чай
Заслуженный
Зарегистрирован: Пт, 3 Авг 2018
Сообщений: 99
Уважение: +28
Позитив: +45
Последний визит:
Чт, 12 Дек 2024 17:49:30

мятный чай написал(а):

но не работает почему-то

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

0

Поделиться7Чт, 23 Фев 2023 17:20:22

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7393
Уважение: +5894
Позитив: +6521
Пол: Мужской
Последний визит:
Сегодня 15:46:08

мятный чай, переделал css:

Код:

<style>
.tcl {position: relative;}
.ssylka {display: none;background-color: #ccdae2;}
.tcl:hover .ssylka {display: block;position: absolute;top:40px;
</style>

Попробуйте такой вариант..

0

Поделиться8Чт, 23 Фев 2023 17:23:26

Автор: мятный чай
Заслуженный
Зарегистрирован: Пт, 3 Авг 2018
Сообщений: 99
Уважение: +28
Позитив: +45
Последний визит:
Чт, 12 Дек 2024 17:49:30

kolobdur74
поставила его, и теперь ссылки вот здесь:

При наведении мышью на название форума, но как только пытаешься нажать на них меню тут же закрывается

0

Поделиться9Чт, 23 Фев 2023 17:24:52

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7393
Уважение: +5894
Позитив: +6521
Пол: Мужской
Последний визит:
Сегодня 15:46:08

мятный чай, поправил код в своем посту выше, лишнее было.. Замените на исправленный..

+1

Поделиться10Чт, 23 Фев 2023 17:28:12

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7393
Уважение: +5894
Позитив: +6521
Пол: Мужской
Последний визит:
Сегодня 15:46:08

мятный чай написал(а):

При наведении мышью на название форума, но как только пытаешься нажать на них меню тут же закрывается

Должен происходить переход по ссылке.. У меня переходит по ссылке, но ссылка не действующая..

0

Поделиться11Чт, 23 Фев 2023 17:32:41

Автор: мятный чай
Заслуженный
Зарегистрирован: Пт, 3 Авг 2018
Сообщений: 99
Уважение: +28
Позитив: +45
Последний визит:
Чт, 12 Дек 2024 17:49:30

kolobdur74
Благодарю конечно, а что-то типа такого нет?:

0

Поделиться12Чт, 23 Фев 2023 17:33:25

Автор: мятный чай
Заслуженный
Зарегистрирован: Пт, 3 Авг 2018
Сообщений: 99
Уважение: +28
Позитив: +45
Последний визит:
Чт, 12 Дек 2024 17:49:30

kolobdur74 написал(а):

но ссылка не действующая..

это не страшно, мне их надо обновить, тогда будут действующие

0

Поделиться13Чт, 23 Фев 2023 17:38:31

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7393
Уважение: +5894
Позитив: +6521
Пол: Мужской
Последний визит:
Сегодня 15:46:08

мятный чай написал(а):

Благодарю конечно, а что-то типа такого нет?:

С наведением можно сделать.. Сейчас НТМЛ и под него css сделаю..

+1

Поделиться14Чт, 23 Фев 2023 17:45:37

Автор: мятный чай
Заслуженный
Зарегистрирован: Пт, 3 Авг 2018
Сообщений: 99
Уважение: +28
Позитив: +45
Последний визит:
Чт, 12 Дек 2024 17:49:30

kolobdur74 написал(а):

С наведением можно сделать

Хоть с наведением, хоть по клику. Благодарю заранее.

0

Поделиться15Чт, 23 Фев 2023 18:03:39

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7393
Уважение: +5894
Позитив: +6521
Пол: Мужской
Последний визит:
Сегодня 15:46:08

мятный чай, сделал, тестируйте:

CSS:

Код:

<style>
.ssylka {opacity: 0;transition: opacity 0.5s ease-in 0s;position: absolute;background-color: #ccdae2;z-index: -1;}
.navig:hover .ssylka {opacity: 1;z-index:1;}
.navig {cursor: pointer;}
.ssylka a {display: block;}
.navig h4 {text-transform: uppercase;font-size: 0.9em;font-weight: bold; }
</style>

НТМЛ:

Код:

<div class="navig">
  <h4>Навигация ⏷</h4>
  <div class="ssylka">
    <a href="http://num1.rusff.ru/viewtopic.php?id=2#p2">гостевая</a>
    <a href="http://num1.rusff.ru/viewtopic.php?id=3#p3">внешности</a>
    <a href="http://num1.rusff.ru/viewtopic.php?id=7#p11">имена и фамилии</a>
  </div>
</div>

+2