Разное

Как сделать раскрывающееся меню в html: Как сделать раскрывающееся меню при нажатии

23.08.2023

Содержание

Пытаюсь сделать всплывающее меню в HTML CSS

Задать вопрос

Вопрос задан

Изменён 2 месяца назад

Просмотрен 53 раза

Вот это меню

при наведении курсора должно отобразиться так

И мой вопрос таков Как зафиксировать иконки на своих местах чтобы при наведении меню раскрывалось а они стояли на месте?

Мой код

    <div>
<div>
    <ol>
        <li><img src="image/pencil.png" alt=""><span>Test</span></li>
        <li><img src="image/heart.png" alt=""><span>Test</span></li>
        <li><img src="image/clock.png" alt=""></li>
        <li><img src="image/shield.
 
 png" alt=""></li>
        <li><img src="image/equalizer.png" alt=""></li>
    </ol>
</div>   
<div>
<pre>
      много текста
</pre>

Пока результат такой

Я пытался написать position: fixed; но иконки вставали друг на друга

просто пожалуйста дайте совет как зафиксировать иконки на местах чтобы при наведении мышки они стояли а текст выплывал слева на право

Надеюсь я смог объяснить что мне нужно

по просьбе в комментах добавил CSS код

.page {
    display: inline-flex;
}
ol {
    list-style: none;
    margin: 100px 0;
}
li {
    margin: 100px 0;
    display: flex;
}
span {
    margin-left: 50px;
    margin-right: -50px;
}
.text {
    margin-left: 130px;
}
.menu:hover {
    position: relative;
    left: 100px;
}
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1. 0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
 <div>
    <div>
        <ol>
            <li><img src="image/pencil.png" alt=""><span>Test</span></li>
            <li><img src="image/heart.png" alt=""><span>Test</span></li>
            <li><img src="image/clock.png" alt=""></li>
            <li><img src="image/shield.png" alt=""></li>
            <li><img src="image/equalizer.png" alt=""></li>
        </ol>
    </div>   
    <div>
    <pre>
          много текста
    </pre>
</div>
  • html
  • css
2

как зафиксировать иконки на местах чтобы при наведении мышки они стояли а текст выплывал слева на право

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

body { margin: 0; }
. page {
  position: relative;
  display: flex;
}
.menu {
  position: fixed;
  height: 100vh;
  width: max-content;
  background-color: #8a8a8a;
}
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  margin: 0;
  display: flex;
  align-items: center;
  padding: 25px;
  cursor: pointer;
}
li:hover { background-color: #696969; }
img { height: 30px; width: 30px; }
span {
  margin-left: 30px;
  opacity: 1;
  transition: margin-left .4s ease-out, font-size .4s ease-in-out, opacity .4s ease-in;
}
.menu:not(:hover) span {
  margin-left: 0;
  font-size: 0;
  opacity: 0;
  transition: margin-left .4s ease-in-out, font-size .4s ease-in-out, opacity .4s ease-out;
}
.text {
  padding-left: 100px;
  font-size: 48px;
}
<div>
  <div>
    <p>MENU</p>
    <ol>
      <li><img src="https://lh4.googleusercontent.com/a-/AOh24Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>EDIT</span></li>
      <li><img src="https://lh4. googleusercontent.com/a-/AOh24Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>FAVORITES</span></li>
      <li><img src="https://lh4.googleusercontent.com/a-/AOh24Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>HISTORY</span></li>
      <li><img src="https://lh4.googleusercontent.com/a-/AOh24Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>SECURITY</span></li>
      <li><img src="https://lh4.googleusercontent.com/a-/AOh24Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>SETTINGS</span></li>
    </ol>
  </div>
  <div>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error inventore similique sequi ab sint quisquam corporis nulla eligendi corrupti, mollitia eaque modi, unde ratione dolor voluptas, nam magnam quos. Culpa.
Ducimus qui iusto voluptatibus ipsam beatae in perferendis quam ratione? Deserunt ducimus ad incidunt aspernatur animi cupiditate debitis a eos neque temporibus nesciunt cum praesentium, aliquam nulla quae nemo voluptatibus?
Temporibus nulla, mollitia ab qui velit amet illo, voluptate sint saepe nemo tempora beatae totam ratione veritatis.
 
 
  Esse blanditiis, minima quod, eaque facere nemo alias odio ex tempora maxime odit.
Nam veniam animi temporibus consequatur nostrum voluptatem error cupiditate, fuga ipsam nulla quisquam sequi fugiat non tempora culpa aperiam facere repellat eum deserunt, rem ex dignissimos. Cupiditate inventore ipsum quisquam.
  </div>
</div>
1

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

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

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

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

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

Почта

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

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

Почта

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

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Как создать выпадающее меню в Dreamweaver

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

Dreamweaver Jump Menus

Dreamweaver 8 также предоставляет мастер для создания меню перехода для навигации по вашему веб-сайту. В отличие от основных выпадающих меню, это меню на самом деле что-то сделает, когда вы закончите. Вам не нужно будет писать какие-либо JavaScript или CGI, чтобы ваша раскрывающаяся форма работала. В этом руководстве также объясняется, как использовать мастер Dreamweaver 8 для создания меню перехода.

01

из 20

Сначала создайте форму

За исключением специальных мастеров, таких как меню переходов, Dreamweaver не помогает вам «работать» с HTML-формами. Для этого вам нужен CGI или JavaScript.

Когда вы добавляете раскрывающееся меню на свой веб-сайт, первое, что вам нужно, это форма, которая его окружает. В Dreamweaver перейдите в меню «Вставка» и нажмите «Форма», затем выберите «Форма».

02

из 20

Отображение формы в режиме конструктора

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

03

из 20

Выберите Список / Меню

Выпадающие меню в Dreamweaver называются пунктами «список» или «меню». Таким образом, чтобы добавить один к вашей форме, вам нужно перейти в меню «Форма» в меню «Вставка» и выбрать «Список / Меню». Убедитесь, что курсор находится внутри красной пунктирной линии вашего поля формы.

04

из 20

Окно специальных опций

В настройках Dreamweaver есть экран «Доступность». Формы — это место, где доступность многих веб-сайтов падает, и, заполнив эти пять опций, ваши выпадающие меню сразу станут более доступными.

05

из 20

Доступность формы

Варианты доступности:

метка

Это имя для поля. Он будет отображаться как текст рядом с элементом формы.
Напишите, что вы хотите назвать своим выпадающим меню. Это может быть вопрос или короткая фраза, на которую ответит выпадающее меню.

Стиль

HTML включает метку метки, чтобы идентифицировать метки вашей формы в веб-браузере . Вы можете обернуть раскрывающееся меню и текст метки тегом, использовать атрибут «for» тега метки, чтобы определить, на какой тег формы он ссылается, или вообще не использовать тег метки.

Должность

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

Ключ доступа

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

Индекс вкладки

Это порядок доступа к полю формы при использовании клавиатуры для перехода по веб-странице.

Когда вы обновите параметры доступности, нажмите «ОК».

06

из 20

Выберите меню

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

07

из 20

Свойства меню

Меню свойств изменится на список / свойства меню для этого выпадающего меню. Там вы можете дать своему меню идентификатор (где оно говорит «выбрать»), решить, хотите ли вы, чтобы оно было списком или меню, присвоить ему класс стилей из таблицы стилей и назначить значения для раскрывающегося списка.

В чем разница между списком и меню?

Dreamweaver вызывает раскрывающееся меню любого раскрывающегося меню, которое допускает только один выбор. «Список» допускает несколько вариантов в раскрывающемся списке и может иметь более одного элемента.

Если вы хотите, чтобы раскрывающееся меню занимало несколько строк, измените его на тип «список» и оставьте флажок «выбор» не отмеченным.

08

из 20

Добавить новые элементы списка

Чтобы добавить новые элементы в ваше меню, нажмите кнопку «Список значений …». Это откроет окно выше. Введите ярлык вашего товара в первом поле. Это то, что будет отображаться на странице. Если вы оставите значение пустым, это также то, что будет отправлено в форме.

09

из 20

Добавить еще и изменить порядок

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

10

из 20

Дайте все значения предметов

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

11

из 20

Выберите по умолчанию

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

12

из 20

Посмотреть свой список в режиме конструктора

После завершения редактирования свойств Dreamweaver отобразит раскрывающийся список с выбранным значением по умолчанию.

13

из 20

Смотрите свой список в представлении кода

Если вы переключитесь в режим просмотра кода, вы увидите, что Dreamweaver добавляет выпадающее меню с очень чистым кодом. Единственными дополнительными атрибутами являются те, которые мы добавили с опциями доступности. Код весь с отступом и очень легко читается и понимается.

14

из 20

Сохранить и просмотреть в браузере

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

15

из 20

Но это ничего не делает …

Меню, которое мы создали выше, выглядит хорошо, но ничего не делает. Чтобы заставить его что-то делать, вам нужно настроить действие формы на самой форме.

К счастью, Dreamweaver имеет встроенную форму выпадающего меню, которую вы можете сразу использовать на своем сайте, не изучая формы, CGI или скрипты. Это называется Jump Menu.

Меню перехода Dreamweaver устанавливает раскрывающееся меню с именами и URL-адресами. Затем вы можете выбрать пункт в меню, и веб-страница переместится в это место, как если бы вы щелкнули ссылку.

Перейдите в меню «Вставка» и выберите «Форма», а затем «Меню перехода»

16

из 20

Окно «Jump Menu»

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

Для первого элемента измените текст «untitled1» на то, что вы хотите, чтобы он читал, и добавьте URL, на который должна перейти эта ссылка.

17

из 20

Добавить элементы в меню прыжков

Нажмите на добавить элемент, чтобы добавить новый элемент в меню переходов. Добавьте столько предметов, сколько пожелаете.

18

из 20

Опции меню Jump

После того, как вы добавили все ссылки, которые вы хотите, вы должны выбрать свои варианты:

Открытые URL в

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

Название меню

Дайте вашему меню уникальный идентификатор для страницы. Это необходимо для правильной работы скрипта. Это также позволяет вам иметь несколько меню перехода в одной форме — просто дать им все разные имена.

Вставить кнопку Go после меню

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

Выберите первый элемент после изменения URL

Выберите это, если у вас есть приглашение, такое как «Выберите один», в качестве первого пункта меню. Это гарантирует, что этот элемент останется по умолчанию на странице.

19

из 20

Перейти Дизайн меню

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

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

20

из 20

Перейти меню в браузере

Сохранение файла и нажатие клавиши F12 отобразит страницу в выбранном вами браузере. Там вы можете выбрать опцию, нажать «Перейти» и меню прыжков работает!

Как создать выпадающее меню в Squarespace — Хлоя Форбс-Киндлен

Площадь

Написано Chloe Forbes-Kindlen

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

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

ПОДПИСЫВАЙТЕСЬ НА МОЙ ЮТУБ КАНАЛ

Создание раскрывающегося меню в Squarespace

Быстрое исправление:

01. Перейдите на страницы и добавьте новую страницу, нажав ‘+’ в верхнем правом углу навигации. Когда появится всплывающее окно с разными типами страниц, выберите «Папка ».

02. Назовите папку в соответствии с тем, как вы хотите, чтобы она отображалась на панели навигации.

03. Теперь вы можете добавлять страницы в папку или перетаскивать страницы, которые вы хотите отобразить в раскрывающемся меню.

Обратите внимание, что вы не можете добавить индекс в папку, только страницы.

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

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

Что делать, если вам требуется многоуровневое выпадающее меню в Squarespace

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

Создайте меню навигации на любой странице Squarespace.

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

Отличный пример этого можно найти на веб-сайте Elle & Company Design (кстати, еще один замечательный ресурс Squarespace!). Elle создала одну страницу, которая ссылается на различные категории инструментов через созданную вручную навигацию на боковой панели.

Пример: Elle and Company Design

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

Как создать это

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

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

Затем вы можете удалить пробел, и содержимое останется на месте.

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

Разместив все страницы, убедитесь, что ссылки для навигации на всех страницах правильные.

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

Создать меню навигации в виде квадратной страницы

Похожий пример можно увидеть на веб-сайте Speyside Kitchen, где было слишком много меню, чтобы их можно было связать на панели навигации. Вместо этого они решили создать страницу со ссылками на все их различные меню.

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

Надеюсь, это видео было вам полезно. Если да, подпишитесь, чтобы получить больше положительных эмоций, или оставьте комментарий ниже. Увидимся там! 🙂

Закрепите на потом

Другие уроки Squarespace

Хлоя Форбс-Киндлен

Привет, друг! Я здесь, чтобы помочь вам создать прибыльный веб-сайт с легкостью! Я делаю это, потому что считаю, что каждый имеет право на образование и поддержку, необходимые для выполнения его миссии.

https://chloeforbesk.com

Как создать раскрывающееся меню с помощью Adobe XD

Peter Martinez обновлено 2023-03-23 ​​14:48:53

Вам интересно, есть ли способ создать раскрывающееся меню с помощью Adobe XD? Ответ на этот вопрос — да. Раскрывающееся меню Adobe XD позволяет пользователю выбирать элементы из раскрывающегося меню в Adobe XD, и они имеют различные варианты выбора.

Эта статья расскажет вам, как шаг за шагом создать раскрывающееся меню Adobe XD. Вы можете использовать этот инструмент, чтобы сделать выпадающее меню, которое вы хотите. Но мы также представим еще одну альтернативу Adobe XD — Wondershare Mockitt, которую вы можете использовать для создания раскрывающегося меню и настройки его по своему усмотрению.

Попробуйте бесплатно

  • Часть 1. Создание выпадающего меню с помощью Adobe XD
  • Часть 2: Как создать выпадающее меню с помощью Adobe XD Альтернатива

Как создать раскрывающееся меню с помощью Adobe XD

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

Как спроектировать раскрывающееся меню Adobe XD

  • В новом веб-прототипе раскрывающегося меню Adobe XD в правом верхнем углу перетащите виджет «Текстовая таблица». Перейдите к палитре свойств и переименуйте идентификатор текстовой таблицы в «Главное меню».
  • Находясь в палитре свойств, уменьшите номер строки текстовой таблицы до единицы. Вы также должны убедиться, что количество ваших столбцов соответствует параметрам, которые будут содержаться в вашем главном меню. Например, у нас есть четыре столбца, которые соответствуют четырем параметрам главного меню.
  • В текстовой таблице введите значение в каждую из ячеек, например, тур, цены, дом и функции, и вы можете настроить стиль текстовой таблицы в соответствии со своими предпочтениями.
  • Перетащите на холст второй виджет текстовой таблицы и поместите его в нижнюю ячейку текстовой таблицы исходной текстовой таблицы. Перейдите к палитре с опцией свойств и оставьте ячейку «Menu_items_1», потому что эта ячейка текстовой таблицы будет содержать подзаголовок меню для опции главного меню.
  • В той же палитре свойств уменьшите количество столбцов этой текстовой таблицы до одного, и теперь вы можете настроить номера строк в соответствии с номерами пунктов подменю параметров главного меню. У вас может быть три строки, как в нашем примере. Вам нужно ввести значения в ячейку текстовой таблицы, а затем начать настраивать стиль шрифта в соответствии с вашими предпочтениями. Затем вы можете переместить оставшуюся ячейку на шаге 4, то есть «Menu_items_1», чтобы она находилась непосредственно под опцией главного меню.
  • Повторите этапы четыре и пять, чтобы убедиться, что в ваших текстовых таблицах есть пункты подменю «Цены» и «Функции» главного меню.
  • Добавьте еще один экран в свой прототип раскрывающегося меню Adobe XD, перейдя к опции с палитрой Экран и дважды щелкнув символ «+». После этого переименуйте экран после основного пункта в подменю Пункты главного меню. Добавьте еще один дополнительный экран, назовем его третьим экраном для каждого пункта подменю пунктов главного меню.0121

Хотели бы вы обрезать изображение Adobe XD? Нажмите и узнайте больше о шагах, которые вы должны выполнить, чтобы сделать Adobe XD Crop Image Simple.

Как создать раскрывающееся меню с помощью альтернативы Adobe XD

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

Попробуйте бесплатно

Шаги по созданию выпадающего меню

Шаг 1. Создайте проект

Когда вы нажмете кнопку «Создать», вы увидите несколько вариантов, включая «Прототип», «Дизайн», «Блок-схема». » и «Импорт эскиза». Если вы хотите выполнить векторное редактирование дизайна, вы можете создать дизайн-проект, а если вы хотите сделать прототип, вы можете создать проект-прототип. Теперь я возьму прототип проекта в качестве примера.

Шаг 2. Перетащите виджет раскрывающегося меню на холст

На панели инструментов «Библиотеки» вы найдете виджет «Droplist», вы можете дважды щелкнуть его или перетащить на свой холст. Вам не нужно рисовать выпадающее меню с самого начала, так как Mockitt уже предлагает компонент.

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

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