Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Единый форум поддержки » Архив » выпадающее меню в описании форумов вместо ссылок

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

Страница: 1

Сообщений 1 страница 18 из 18

1

  • Автор: мятный чай
  • Заслуженный
  • мятный чай
  • Зарегистрирован: Пт, 3 Авг 2018
  • Сообщений: 99
  • Уважение: +28
  • Позитив: +45
  • Последний визит:
    Вс, 19 Янв 2025 14:56:52

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

https://upforme.ru/uploads/0000/14/1c/36184/749364.png

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

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

0

2

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7553
  • Уважение: +6099
  • Позитив: +6661
  • Пол: Мужской
  • Последний визит:
    Вчера 22:52:25
мятный чай написал(а):

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

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

+1

3

  • Автор: мятный чай
  • Заслуженный
  • мятный чай
  • Зарегистрирован: Пт, 3 Авг 2018
  • Сообщений: 99
  • Уважение: +28
  • Позитив: +45
  • Последний визит:
    Вс, 19 Янв 2025 14:56:52
kolobdur74 написал(а):

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

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

0

4

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7553
  • Уважение: +6099
  • Позитив: +6661
  • Пол: Мужской
  • Последний визит:
    Вчера 22:52:25
мятный чай написал(а):

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

Не так.. Вот так сделайте:
https://i.imgur.com/wxTngcv.png
А вот css под него (в НТМЛ верх):

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

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

+1

5

  • Автор: мятный чай
  • Заслуженный
  • мятный чай
  • Зарегистрирован: Пт, 3 Авг 2018
  • Сообщений: 99
  • Уважение: +28
  • Позитив: +45
  • Последний визит:
    Вс, 19 Янв 2025 14:56:52

kolobdur74
Есть:

https://upforme.ru/uploads/0000/14/1c/36184/675790.png

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

0

6

  • Автор: мятный чай
  • Заслуженный
  • мятный чай
  • Зарегистрирован: Пт, 3 Авг 2018
  • Сообщений: 99
  • Уважение: +28
  • Позитив: +45
  • Последний визит:
    Вс, 19 Янв 2025 14:56:52
мятный чай написал(а):

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

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

0

7

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7553
  • Уважение: +6099
  • Позитив: +6661
  • Пол: Мужской
  • Последний визит:
    Вчера 22:52:25

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

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

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

0

8

  • Автор: мятный чай
  • Заслуженный
  • мятный чай
  • Зарегистрирован: Пт, 3 Авг 2018
  • Сообщений: 99
  • Уважение: +28
  • Позитив: +45
  • Последний визит:
    Вс, 19 Янв 2025 14:56:52

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

https://upforme.ru/uploads/0000/14/1c/36184/835986.png
При наведении мышью на название форума, но как только пытаешься нажать на них меню тут же закрывается

0

9

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7553
  • Уважение: +6099
  • Позитив: +6661
  • Пол: Мужской
  • Последний визит:
    Вчера 22:52:25

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

+1

10

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7553
  • Уважение: +6099
  • Позитив: +6661
  • Пол: Мужской
  • Последний визит:
    Вчера 22:52:25
мятный чай написал(а):

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

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

0

11

  • Автор: мятный чай
  • Заслуженный
  • мятный чай
  • Зарегистрирован: Пт, 3 Авг 2018
  • Сообщений: 99
  • Уважение: +28
  • Позитив: +45
  • Последний визит:
    Вс, 19 Янв 2025 14:56:52

kolobdur74
Благодарю конечно, а что-то типа такого нет?:
https://upforme.ru/uploads/0000/14/1c/36184/599445.png

0

12

  • Автор: мятный чай
  • Заслуженный
  • мятный чай
  • Зарегистрирован: Пт, 3 Авг 2018
  • Сообщений: 99
  • Уважение: +28
  • Позитив: +45
  • Последний визит:
    Вс, 19 Янв 2025 14:56:52
kolobdur74 написал(а):

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

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

0

13

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7553
  • Уважение: +6099
  • Позитив: +6661
  • Пол: Мужской
  • Последний визит:
    Вчера 22:52:25
мятный чай написал(а):

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

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

+1

14

  • Автор: мятный чай
  • Заслуженный
  • мятный чай
  • Зарегистрирован: Пт, 3 Авг 2018
  • Сообщений: 99
  • Уважение: +28
  • Позитив: +45
  • Последний визит:
    Вс, 19 Янв 2025 14:56:52
kolobdur74 написал(а):

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

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

0

15

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7553
  • Уважение: +6099
  • Позитив: +6661
  • Пол: Мужской
  • Последний визит:
    Вчера 22:52:25

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

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

16

  • Автор: мятный чай
  • Заслуженный
  • мятный чай
  • Зарегистрирован: Пт, 3 Авг 2018
  • Сообщений: 99
  • Уважение: +28
  • Позитив: +45
  • Последний визит:
    Вс, 19 Янв 2025 14:56:52
kolobdur74 написал(а):

тестируйте

Всё отлично работает, осталось везде так оформить ссылки и обновить их, но это уже не прблема.
Благодарю!

+1

17

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7553
  • Уважение: +6099
  • Позитив: +6661
  • Пол: Мужской
  • Последний визит:
    Вчера 22:52:25
мятный чай написал(а):

Всё отлично работает, осталось везде так оформить ссылки и обновить их, но это уже не прблема.

Я css поправил, замените на обновленный, а то при наведении на соседний форум будет появляться верхнее меню..

+1

18

  • Автор: мятный чай
  • Заслуженный
  • мятный чай
  • Зарегистрирован: Пт, 3 Авг 2018
  • Сообщений: 99
  • Уважение: +28
  • Позитив: +45
  • Последний визит:
    Вс, 19 Янв 2025 14:56:52

kolobdur74
Спасибо, заменила.

+1

Страница: 1

Вы здесь » Единый форум поддержки » Архив » выпадающее меню в описании форумов вместо ссылок