Раскрывающийся список dropdown

[radrigo 182]

Всем привет.

Покажите пример HTML кода для раскрывающегося списка в полной новости [edit]кнопка[/edit]

Хочу использовать подобное меню на сайте без посторонних скриптов.

Заранее признателен всем за подсказку.

[aleksandrhristich 108]

8 часов назад, radrigo сказал:

Покажите пример HTML кода для раскрывающегося списка в полной новости [edit]кнопка[/edit]

Так посмотрите исходный код в браузере.

[flake 25]

19 часов назад, aleksandrhristich сказал:

Так посмотрите исходный код в браузере.

Для этого нужно знать хтмл/цсс.

 

13.04.2021 в 20:25, radrigo сказал:

Всем привет.

Покажите пример HTML кода для раскрывающегося списка в полной новости [edit]кнопка[/edit]

Таких примеров в инете полно, достаточно погуглить "css dropdown menu example"
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover

Изменено 14 апреля 2021 пользователем flake

[radrigo 182]

20 часов назад, flake сказал:

Для этого нужно знать хтмл/цсс.

 

Таких примеров в инете полно, достаточно погуглить "css dropdown menu example"
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover

Знаю, что посторонних много. Пока реализовал при помощи bootstrap. Однако для этого нужно подключать сторонние скрипты. Просто хотел понять, как это сделать, используя скрипты движка.

Решил включить на сайте древовидные комментарии, для этого пришлось полностью переделывать комментарии. Захотелось попутно сделать небольшое навигационное меню в каждом комментарии, чтобы убрать лишние кнопки.

 

[fanera 26]

35 минут назад, radrigo сказал:

Знаю, что посторонних много. Пока реализовал при помощи bootstrap. Однако для этого нужно подключать сторонние скрипты. Просто хотел понять, как это сделать, используя скрипты движка.

 

JS в Бутстрапе для переключения классов? 😲

Там банальный jQuery код, скорее всего, который DLE и так использует. Всё делается на банальном CSS c display:block/none и JS (jQuery) для отслеживания события клика, всё.

[radrigo 182]

Сколько знатоков, но так никто и не привёл пример HTML кода для раскрывающегося списка, который используется в полной новости при помощи [edit]кнопка[/edit]

[proba 57]

7 часов назад, radrigo сказал:

привёл пример HTML

Если совсем примитивно, то на выходе выходит так:

<a onclick="return dropdownmenu(this, event, MenuNewsBuild('1', 'full'), '170px')" href="#"><i title="Редактировать">Редактировать</i></a>

и

<div id="dropmenudiv" style="position: absolute; z-index: 100; width: 170px; left: 210.8px; top: 266.2px; opacity: 0.9; display: none;"><a onclick="ajax_prep_for_edit('1', 'full'); return false;" href="#">Быстрое редактирование</a><a href="/admin.php?mod=editnews&amp;action=editnews&amp;id=1" target="_blank">Полное редактирование</a><a onclick="sendNotice ('1'); return false;" href="#">Уведомление автору</a><a onclick="dle_news_delete ('1'); return false;" href="#">Удалить статью</a></div>

А, если под себя реализовать надо, то смотреть стоит /engine/classes/js/dle_js.js, в сторону MenuNewsBuild() и dropdownmenu() и далее по списку.

[aleksandrhristich 108]

14.04.2021 в 01:25, radrigo сказал:

Всем привет.

Покажите пример HTML кода для раскрывающегося списка в полной новости [edit]кнопка[/edit]

Хочу использовать подобное меню на сайте без посторонних скриптов.

Заранее признателен всем за подсказку.

В эру глобального интернета и не можете найти решение?

Наипростейшее решение на CSS:

<nav role="navigation">

  <ul>

    <li><a href="#">One</a></li>

    <li><a href="#">Two</a>

      <ul class="dropdown">

        <li><a href="#">Sub-1</a></li>

        <li><a href="#">Sub-2</a></li>

        <li><a href="#">Sub-3</a></li>

      </ul>

    </li>

    <li><a href="#">Three</a></li>

  </ul>

</nav>

 

Оформление

li {

display: block;

transition-duration: 0.5s;

}

 

li:hover {

  cursor: pointer;

}

 

ul li ul {

  visibility: hidden;

  opacity: 0;

  position: absolute;

  transition: all 0.5s ease;

  margin-top: 1rem;

  left: 0;

  display: none;

}

 

ul li:hover > ul,

ul li ul:hover {

  visibility: visible;

  opacity: 1;

  display: block;

}

 

ul li ul li {

  clear: both;

  width: 100%;

}