Разное

Как сделать выпадающий текст в html: Выпадающий текст HTML & CSS

09.07.2023

html — Как при наведении курсора на текст сделать выпадающий список с номерами телефонов , заключенных в div?

Есть сайт, пытаюсь добавить такое вот всплывающее окно(см. ниже пример) по наведению курсора на определенный текст

<p title="Этот текст будет показан при наведении">Просто текст</p>

текст показывает при наведении курсором, а как туда «засунуть» следующий div?

<div>
                <div>
                                        <a href="tel:+79829349099"><span>+7 (982)</span> 934-90-99</a>
                    <div>Работаем без выходных, с 8:00 до 21:00</div>
                </div>

просто в title никак не получается вписать этот участок кода

Если вы делаете эффект наведения мыши, то это делается не через параграфы и блоки, а через выпадающие списки. Вот пример такой реализации. Там несколько кривой HTML и CSS, за что я извиняюсь, так как я делал это только в начале изучения верстки, однако саму концепцию, я уверен, вы поймете:

<div>
        <ul>
            <li><u><a href="#">Просто текст</a></u></li>
            <li><u><a href="#">Просто текст</a></u></li>
            <li><u><a href="#">Просто текст</a></u>
                <ul><div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                </div></ul></li>
            <li><u><a href="#">Просто текст</a></u></li>
            <li><u><a href="#">Просто текст</a></u></li>
        </ul>
    </div>

. main {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.main > li {
    display: inline-block;
    position: relative;
}
.main > li:hover > ul {
    visibility: visible;
    opacity: 0.9;
    transition: all 0.2s ease-in-out; 
}
.main > li > ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    opacity: 0.1;
    visibility: hidden;
    background: #FFFFFF;
    position: absolute;
    top: 50px;
    left: 0;
} 
li.content{
    margin-right: -13px;
}
li.content::after {
    content: " / ";
    color: white;
    font-size: 20px;
    padding-top: 10px;
    margin-left: 13px;
}
li.content:last-child::after{
    content: none;
}
div {
    background: #d6161d;
    height: 50px;
    color: white;
    font-family: Trebuchet MS;
}
ul.main {
    margin-left: 100px;
}
div > ul > li {
    margin-left: 30px;
    padding-top: 10px;
}
a {
    color: #FFFFFF;
}
#shadow {
    box-shadow: 0 0 10px #aeaeae;
    height: 184px;
}
li > ul > li {
    width: 250px;
    height: 30px;
    padding-top: 10px;
} 
div.
 
 
 pouring {
    background: #FFFFFF;
    width: 225px;
    height: 36px;
    color: #e5e5e5; 
    border-bottom: 0.5px solid #e5e5e5;
}
#first-div{
    height: 39px;
}
a.pass{
    color: #a7a7a7; 
    justify-content: center;
    position: relative;
    top: 7px;
    display: block;
    width: 200px;
    height: 27px;
    font-size: 14px;
    text-decoration: none;
}
div#first-div a.pass {
    top: 11px;
}
a.pass:hover{
    text-decoration: underline;
}
.mark div a{
    margin-left: 15px;
}
.mark div:hover,
.mark div:hover a,
.mark a:hover {
    display: block;
    background-color: #e5e5e5;
    color: #d73135;
    align-items: center;
}
ul {
    height: 100%;
    margin: 0;
}
li {
    list-style-type: none;
    display: inline-block;
    height: 100%
}

Если же вам надо не наведение мышью, а появление модалки при нажатии, то тут придется писать отдельную верстку и менять ее стили через обработчики на JS

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Раскрывающиеся блоки для подсказок или дополнительной информации

Здравствуйте уважаемые начинающие веб мастера.

Очень часто возникает необходимость разместить на странице подсказку или дополнительную информацию к какому либо слову, словосочетанию или абзацу.

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

Объектом для клика может быть выделенная часть текста или кнопка «Справка» размещёная в удобном месте.

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

При повторном клике на выделенный текст или кнопку, вкладка с подсказкой закроется.

Примеры:

1. Выделенная часть текста.

Бла-бла-бла-бла-бла Справка бла-бла-бла-бла-бла

Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла

 
Код:

Html

<div>Бла-бла-бла-бла-бла-бла <input type="checkbox"/>

<label for="hd-1" >Справка</label> бла-бла-бла-бла-бла-бла
<span>
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
</span>
<div>

Css

. reference {
display: none;
}
.reference ~ .story {
display: none;
}
.reference + label {
font-size: 16px;
padding: 0;
color: green;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {

display: block;
background: Snow;
padding: 10px;
}

2. Кнопка, которую можно разместить в любой части контента.

Бла-бла-бла-бла-бла Справка бла-бла-бла-бла-бла

Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла

 
Код:

Html тот-же что и в первом примере.

Css

.reference {
display: none;
}
.reference ~ .story{
display: none;
}
.reference + label {
position: absolute;
top: 0;
left: 200px;
border: 1px solid #333;
border-radius: 4px;
background: #F0FFF0;

padding: 3px;
color: green;
font-size: 16px;
cursor: pointer;
display: inline-block;
}
. reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}
.spravca {
position: relative;
}

Можно дополнительно оформить раскрывающиеся блоки в css под стиль вашего сайта.

В HTML5 похожая опция заложена по умолчанию.

Реализуется она тегами

1. <details></details> — контейнер, который можно развернуть и свернуть.

2. <summary></summary> — заголовок, по которому можно щёлкнуть, чтоб развернуть контейнер. Повторный щелчёк сворачивает контейнер.

Смотрится и работает эта опция так:

Заголовок

текст текст текст текст

 

Код:


<details>
<summary>Заголовок</summary>
текст текст текст текст
</details>

Теги details и summary по умолчанию блочные элементы, поэтому, если нужно вставить контейнер в строку, ему нужно будет задать свойство display: inline-block;

Можно так же задать и другое стилевое оформление.

Желаю творческих успехов.

В раздел >>>

Выпадающий список | Webflow University

Домашний урок

Все уроки

Используйте встроенный компонент раскрывающегося списка Webflow для добавления, оформления и настройки раскрывающихся меню и ссылок.

элемента

 

У этого видео старый интерфейс. Скоро будет обновленная версия!

Выпадающее меню — это встроенный элемент навигации, который можно добавить практически в любую область сайта. Чаще всего вы увидите раскрывающийся список на панели навигации веб-сайта.

Добавление выпадающего меню

Чтобы добавить раскрывающееся меню на свой сайт:

  1. Открыть Добавить панель > Компоненты
  2. Перетащите элемент Раскрывающийся список на холст Webflow
9000 6 Структура раскрывающегося меню

В раскрывающемся меню есть два дочерних элемента: переключатель раскрывающегося списка и раскрывающийся список. Переключатель раскрывающегося списка состоит из текстового блока и значка стрелки.

Настройки раскрывающегося списка

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

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

Примечание: Если вы используете Открыть меню при наведении и ваш выпадающий список закрывается до того, как вы сможете навести на него курсор, есть 2 варианта, чтобы исправить это. Вы можете удалить верхние поля в раскрывающемся списке или нижние поля в раскрывающемся списке или , вы можете добавить задержку закрытия.

Ссылки внутри раскрывающегося списка

В раскрывающемся списке есть три раскрывающихся ссылки. Вы можете просмотреть и отредактировать их, выбрав раскрывающееся меню, перейдя на панель настроек и нажав Меню > Открыть . Вы можете дважды щелкнуть внутри выпадающих ссылок, чтобы отредактировать текст — это также отрегулирует ширину ссылки.

Вы можете перемещать ссылки, щелкая и перетаскивая их на холсте. Кроме того, вы можете щелкнуть панель «Навигатор» и перетащить оттуда раскрывающиеся ссылки.

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

Пользовательский переключатель раскрывающегося списка

Чтобы сделать раскрывающийся список переключением ссылки:

  1. Перетащите текстовый блок из панели Добавьте панель в раскрывающийся переключатель
  2. Удалить «Раскрывающийся список» по умолчанию Текстовый блок
  3. Добавьте отступ (например, 20 пикселей) к каждой из 4 сторон нового текстового блока , чтобы увеличить интерактивную область
  4. Установите левый отступ выпадающего переключателя на 0

При использовании этого пользовательского переключателя раскрывающегося списка текстовая часть действует как ссылка, а часть со стрелкой открывает раскрывающийся список.

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

Стилизация раскрывающегося списка и ссылок

Стилизация раскрывающегося списка работает так же, как и стилизация других элементов — сначала дайте каждому элементу имя класса, а затем начните стилизацию.

Выпадающий список может находиться в двух состояниях — Скрыть и Показать . Состояние Скрыть — это состояние по умолчанию, когда раскрывающийся список закрыт, а состояние Показать — это когда раскрывающийся список отображается. Если у вас включен Показать на панели настроек и изменить стиль переключателя раскрывающегося списка или добавить к нему класс, специальный класс «Открыть» автоматически добавляется в поле «Селектор», что позволяет настроить это состояние.

Вы также можете отредактировать состояние Hover для состояний Hide и Show , щелкнув раскрывающееся поле Selector и выбрав состояние, которое вы хотите стилизовать.

Чтобы отредактировать или оформить раскрывающуюся ссылку, выберите ее в навигаторе. Либо установите раскрывающийся список на Show , затем выберите его на холсте.

Вы также можете добавить эффект наведения к раскрывающимся ссылкам:

  1. Выберите раскрывающуюся ссылку
  2. Открыть Панель стилей > Поле выбора и откройте раскрывающийся список
  3. Выберите Наведите 9002 3 из меню «Состояния»

После выбора появится класс «Hover». Любые изменения, сделанные с выбранным состоянием Hover , будут видны только при наведении курсора на раскрывающуюся ссылку.

Полезно знать: По умолчанию текст раскрывающегося списка не переносится и может переполнять элемент раскрывающегося списка и страницу на небольших устройствах. Чтобы этого не произошло, выберите выпадающий текст, откройте Панель стилей > Типографика > Дополнительные параметры текста и установите разрыв на предварительный перенос .

Содержание

Длина текста раскрывающегося списка — Material Design для Bootstrap

  1. Домашняя страница МДБ
  2. Главная страница поддержки
  3. МДБ jQuery

Тема: Длина текста раскрывающегося списка

Крис Суини профессионал спросил 4 года назад

Я уверен, что видел это в более ранней версии, но сейчас не могу найти ответ.

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

Большое спасибо

Крис

PS. Я использую версию 4.7, но ее нет в списке версий в этой форме.

Крис Суини профессионал ответил 3 года назад

0 0 Лучший ответ

Я создал страницу, на которой показаны 2 проблемы:

1) длинные выпадающие списки не отображаются полностью (нельзя прокрутить список до конца)

2) длинные заголовки в выпадающем списке не отображаются полностью — в идеале они должны переноситься на следующую строку. Это происходит на десктопе, но явно хуже на телефоне

демонстрационная страница

Ура Крис

Укажите мин. 20 символов.

Я создал страницу, которая показывает 2 проблемы:

1) длинные выпадающие списки не отображаются полностью (вы не можете прокрутить список до конца)

2) длинные заголовки в выпадающем списке не не отображать полностью — в идеале они должны переноситься на следующую строку. Это происходит на десктопе, но явно хуже на телефоне

демонстрационная страница

Ура! Крис

Крис Суини профессионал ответил 3 года назад

0 0 Лучший ответ

Привет Петр

Извините — я не знаю, что делаю — я начал отвечать, передумал и теперь удалил ответ, который включал мой предыдущий код и ваш ответ:

«Мой колледж спросил, можете ли вы сделать фрагмент с примером поведения, которое вы хотите изменить в нашем компоненте. Я позабочусь о вашем случае, просто мне нужна дополнительная информация. Скопируйте код из тела в поле HTML, стили в CSS и все скрипты, которые вы используете перед закрытием тегов тела в поле JS».

Ура

Крис

Укажите мин. 20 символов.

Привет, Петр

Извините — я не знаю, что делаю — я начал отвечать, передумал и теперь удалил ответ, который включал мой предыдущий код и ваш ответ:

«Мой колледж спросил, можете ли вы сделайте фрагмент с примером поведения, которое вы хотите изменить в нашем компоненте. Я позабочусь о вашем случае, просто нужно больше информации. Скопируйте код из тела в поле HTML, стили в CSS и все скрипты, которые вы используете, прежде чем закрывать теги тела в поле JS».

Ура

Крис

Якуб Стребейко персонал ответил 4 года назад

0 0 Лучший ответ

Привет, @Chris,

Не могли бы вы поделиться кодом? Я понимаю, что вы имеете в виду — обычные свойства overflow-wrap и word-wrap не реализуются должным образом в дочернем текстовом узле элемента привязки. Я чувствую, что проблема теперь может быть связана с вложенным характером раскрывающегося списка, но в моем случае раскрывающееся меню растягивается по горизонтали, а не усекается.

Вы создаете раскрывающееся меню динамически? Я знаю, это может звучать глупо, но если нет, исправление может состоять в том, чтобы добавить
вместо вашего выбора.

С уважением, Куба

Укажите мин. 20 символов.

Привет, @Chris,

Не могли бы вы поделиться кодом? Я понимаю, что вы имеете в виду — обычный overflow-wrap и свойства word-wrap не реализуются должным образом в дочернем текстовом узле элемента привязки. Я чувствую, что проблема теперь может быть связана с вложенным характером раскрывающегося списка, но в моем случае раскрывающееся меню растягивается по горизонтали, а не усекается.

Вы создаете раскрывающееся меню динамически? Я знаю, это может звучать глупо, но если нет, исправление может состоять в том, чтобы добавить
вместо вашего выбора.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *