Перейти к публикации

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


Рекомендованные сообщения

Всем привет.

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

0713436cbc2b.jpg

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

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

Ссылка на сообщение
Поделиться на других сайтах
8 часов назад, radrigo сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах
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

Изменено пользователем flake
Ссылка на сообщение
Поделиться на других сайтах
20 часов назад, flake сказал:

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

 

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

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

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

989af4ae8f9c.png

 

Ссылка на сообщение
Поделиться на других сайтах
35 минут назад, radrigo сказал:

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

 

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

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

Ссылка на сообщение
Поделиться на других сайтах

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

Ссылка на сообщение
Поделиться на других сайтах
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() и далее по списку.

Ссылка на сообщение
Поделиться на других сайтах
14.04.2021 в 01:25, radrigo сказал:

Всем привет.

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

0713436cbc2b.jpg

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

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

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

Наипростейшее решение на 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%;
}
   
 
 
 
Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...