Выпадающие меню · Bootstrap на русском
Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Раскрывающиеся списки переключаемой, контекстная накладки для отображения списков ссылок и более. Они сделаны интерактивными с включенным Bootstrap выпадающего JavaScript плагин. Они переключаются нажатием, не парит; это преднамеренное дизайнерское решение.
Содержание
- Содержание
- Примеры
- Одиночная кнопка выпадающего меню
- Split кнопка с выпадающим меню
- Изменение размера
- Вариант списка сверху
- Использование
- С помощью данных атрибутов
- Через JavaScript
- Варианты
- Методы
- События
Примеры
Переключение обернуть выпадающем (ваша кнопка или ссылка) и в выпадающем меню в
, или другой элемент, который заявляет, position: relative;
. Раскрывающиеся списки могут быть вызваны из <a>
или <button>
элементы, чтобы лучше соответствовать вашим потенциальным потребностям.
Одиночная кнопка выпадающего меню
Ни один .btn
можно превратить в выпадающем тумблер с некоторыми изменениями разметки. Вот как вы можете положить их на работу с <button>
элементы:
<div> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div aria-labelledby="dropdownMenuButton"> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> </div> </div>И с
<a>
элементами:<div> <a href="http://example. com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div aria-labelledby="dropdownMenuLink"> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> </div> </div>
Самое приятное, что вы можете сделать это с любым вариантом кнопки:
<!-- Пример одной кнопки опасности - > <div> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <div></div> <a href="#">Separated link</a> </div> </div>
Split кнопка с выпадающим меню
Аналогичным образом создайте сплит кнопки раскрывающиеся списки с практически такой же разметки, как одной кнопки раскрывающиеся списки, но с добавлением . dropdown-toggle-split
для правильного шрифта выпадающего каре.
Мы используем эту экстра-класса, чтобы уменьшить горизонтальную padding
по обе стороны от каретки на 25% и удалите margin-left
, который добавляется для обычной кнопки выпадающих меню. Эти изменения держать курсор по центру кнопку разделить и обеспечить более точного размера нажмите рядом с основной кнопкой.
<!-- Пример сплит опасности - > <div> <button type="button">Action</button> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span>Toggle Dropdown</span> </button> <div> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <div></div> <a href="#">Separated link</a> </div> </div>
Изменение размера
Кнопка меню работы с кнопками всех размеров, в том числе по умолчанию и секущихся выпадающих кнопок.
<!-- Большие группы (кнопка по умолчанию и сплит) --> <div> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Large button </button> <div> ... </div> </div> <div> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Large button </button> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span>Toggle Dropdown</span> </button> <div> ... </div> </div> <!-- Небольшие группы (кнопка по умолчанию и сплит) --> <div> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Small button </button> <div> ... </div> </div> <div> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Small button </button> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span>Toggle Dropdown</span> </button> <div> ... </div> </div>
Вариант списка сверху
Вызвать выпадающее меню над элементами, добавив .dropup
для родительского элемента.
<!-- Кнопка по умолчанию dropup --> <div> <button type="button">Dropup</button> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span>Toggle Dropdown</span> </button> <div> <!-- Ссылки выпадающего меню --> </div> </div> <!-- Кнопка сплит dropup --> <div> <button type="button"> Split dropup </button> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span>Toggle Dropdown</span> </button> <div> <!-- Ссылки выпадающего меню --> </div> </div>
Исторически выпадающем меню had чтобы быть одной, но это уже не в случае с v4.
<button>
элементы в раскрывающихся списках, а не просто <a>
ы.<div> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div aria-labelledby="dropdownMenu2"> <button type="button">Action</button> <button type="button">Another action</button> <button type="button">Something else here</button> </div> </div>
По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right
к .dropdown-menu
для выравнивание выпадающего меню справа.
Внимание!
меню расположены только с CSS и может потребоваться некоторые дополнительные стили для точного выравнивания.<div> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> This dropdown's menu is right-aligned </button> <div> <button type="button">Action</button> <button type="button">Another action</button> <button type="button">Something else here</button> </div> </div>
Добавьте заголовок чтобы маркировать участки в любом выпадающего меню.
<div> <h6>Dropdown header</h6> <a href="#">Action</a> <a href="#">Another action</a> </div>
Отдельные группы связанных элементов меню с делителем.
<div> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <div></div> <a href="#">Separated link</a> </div>
Добавить .disabled
для пунктов в раскрывающемся меню стиль их как отключенные.
<div> <a href="#">Regular link</a> <a href="#">Disabled link</a> <a href="#">Another link</a> </div>
Использование
Через атрибуты данных или JavaScript, выпадающее плагин переключает скрытое содержание (выпадающие меню), переключая .open
класс родительского элемента списка.
На мобильных устройствах, открывая выпадающий добавляет .dropdown-backdrop
Примечание: data-toggle="dropdown"
атрибут является основанием для закрытия выпадающего меню на уровне приложения, так что это хорошая идея, чтобы всегда использовать его.
С помощью данных атрибутов
Добавить data-toggle="dropdown"
на ссылку или кнопку для переключения в меню.
<div> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown trigger </button> <div aria-labelledby="dLabel"> ... </div> </div>
Через JavaScript
Вызвать меню через JavaScript:
$('.dropdown-toggle').dropdown()
Варианты
None.
Методы
Способ | Описание |
---|---|
$().dropdown('toggle') | Переключает меню данной панели навигации и вкладок навигации. |
События
Все выпадающие события обстреляли .dropdown-menu
’родительский элемент S и relatedTarget
свойство, значением которого является переключение элемента привязки.
Событие | Описание |
---|---|
show.bs.dropdown | Это событие немедленно срабатывает при вызове метода экземпляра-шоу называется. |
shown.bs.dropdown | Это событие запускается, когда выпадающее меню становится видимым для пользователя (будет ждать CSS переходы для завершения). |
hide.bs.dropdown | Это событие немедленно уволили, когда скрывать метод экземпляра называется. |
hidden.bs.dropdown | Это событие запускается, когда в списке есть, который скрыт от пользователя (будет ждать CSS переходы для завершения). |
$('#myDropdown').on('show.bs.dropdown', function () { // сделать что-то... })
Создать выпадающее меню в Joomla при помощи модулей и Bootstrap
Иван Мельников
Время на чтение: 5 минут
984
У каждого свои предпочтения: одним нравится горизонтальное меню, другие грезят о вертикальном, а для некоторых главное, чтобы оно было выпадающего типа. Все эти запросы можно осуществить при помощи движка Joomla. Если постараетесь, дочитаете статью до конца, то потом сможете самостоятельно сгенерировать выпадающее меню различного формата. Кроме того, вы узнаете, какой модуль подходит для формирования меню с эффектом выпадения.
Содержание
- Как сделать выпадающее навигационное меню стандартными возможностями Joomla
- Как создать выпадающее меню в Bootstrap
- Модуль Ari Ext Menu
- Модуль Jquery Jumpmenu JT
Как сделать выпадающее навигационное меню стандартными возможностями Joomla
Мало кто из вас захочет загружать и устанавливать какие-то дополнительные инструменты для формирования собственного меню, потому разберем, что можно сделать без загрузки расширений. Во многом ваши возможности зависят от установленного шаблона на сайте Joomla.
Как правило, в третьей версии Joomla большинство тем оформления имеют в своем арсенале выпадающее меню, потому вы практически гарантировано сможете его сделать без дополнительных инструментов.
Чтобы изменить формат меню и сделать его выпадающим, вам необходимо зайти в «Менеджер расширений». Затем перейдите в модули и найдите в списке стандартное расширение для элемента меню Joomla. Вам необходимо открыть «Основные параметры» модуля, чтобы изменить его тип. Потом перейдите в «Дополнительные параметры», пока не доберетесь до суффиксов CSS-классов в настройках. Именно от выбранного суффикса зависит то, как будет отображаться модуль в Joomla. Вам необходимо выбрать пункт vmenu (возможно, в названии будут присутствовать и другие буквы). Также не забудьте выбрать «Отображение на всех страницах», дабы избежать путаницы.
Далее вам предстоит сделать для настроенного выпадающего меню пункты. Это легко осуществить через «Менеджер меню». Найдите имя необходимого меню и раздел настроек «Пункты меню». И не забудьте после всего проделанного очистить кэш сайт, иначе посетители долгое время не заметят нововведений!
Есть еще один способ, как без использования Bootstrap и посторонних модулей сделать выпадающее навигационное меню в Joomla 3. Для этого вам необходимо будет лишь создать пункты меню специального типа. Перейдите в настройки определенной менюшки и в окно создания пунктов. Далее напишите имя пункта, а в типе укажите «Статьи» и выберите ссылку на необходимую страницу. Не забудьте указать родительское меню и сохранить изменения.
Как создать выпадающее меню в Bootstrap
Учтите, что это не самый легкий путь. Куда проще просто скачать специальный модуль и подкорректировать его CSS файл для обеспечения индивидуального дизайна. Но если легких путей вы не ищите, и хотите попрактиковаться в Bootstrap, тогда коротко разберем этот метод.
Чтобы создать меню в Bootstrap, необходимо использовать элемент navbar — это сокращенно навигационный бар. Вы сможете создать меню любого типа при помощи данного элемента, но нужно будет поработать с прописью его функций. Navbar в Bootstrap можно будет сделать адаптивным, с привязкой к прокрутке (как поисковая строка в Яндексе) и фиксированным. Вам нужно будет заключить navbar в специальный тег <nav>. Чтобы в Bootstrap сделать именно меню навигации, вам нужно будет оформить его в виде списка с тегами <ul><li>. Для формирования выпадающего эффекта укажите для родительского элемента li класс dropdown, а для дочерних — dropdown-menu.
Модуль Ari Ext Menu
Это мощный, высоко настраиваемый модуль для Joomla. Рекомендуется скачивать данное расширение с проверенных источников, так как иногда злоумышленники внедряют в структуру модуля вредоносное ПО для заражения сайтов вирусами. Модуль поддерживает любую ориентацию для меню (горизонтальную и вертикальную). Вам придется разобраться в настройках модуля самостоятельно, так как админка расширения доступна только на трех языках: английский, испанский и словацкий.
Большое преимущество использования именно модуля Ari Ext Menu для формирования выпадающего меню — это совместимость с любым браузером мира, а также автоматическая адаптация менюшки под устройства с маленькими расширениями. Установка расширения ничем не отличается от стандартной. Еще одна особенность модуля — это наличие анимационного эффекта. Он настраивается через пункт настроек Transittion type в админке — есть два вида анимации. Также в админке вы сможете настроить оформление расширения. А если доступных возможностей для вас окажется мало, то можете отредактировать файл menu.min.css, который определяет стиль элемента.
Обычно, описанного выше расширения достаточно, чтобы реализовать любую задумку в меню навигации. Но модуль Jquery Jumpmenu JT также заслуживает место быть в данном обзоре, так как имеет одну отличительную особенность — он занимает минимум места на сайте, потому не сильно нагружает браузеры юзеров и повышает скорость загрузки менюшки. Кроме того, созданная вами навигация так же будет адаптивной, как и с Ari Ext Menu. Установка модуля производится через стандартные возможности Joomla. Скачайте архив расширения и установите его в админке при помощи специального менеджера. Не забудьте определить позицию для модуля.
Было ли это выпадающее меню и веб-сайт?
Ohne Dropdownmenü würde deine Website verwirrend und chaotisch wirken und potenzielle Kunden abschrecken. Erfahre, wie du ein Dropdownmenü für deine Website erstellen kannst.
Es gibt viele Elemente, die eine gute Website ausmachen. Sie muss уместно Informationen enthalten, умирают leicht zugänglich sind. Sie muss optisch ansprechend sein. Die Navigation muss einfach sein и sie muss funktionieren.
Das Erstellen einer Website für dein Unternehmen ist wichtig, aber diese Website muss auch über die richtige Navigation verfügen. Wenn Benutzer Probleme haben, das zu finden, was sie auf deiner Websitesuchen, werden sie wegklicken und woanderssuchen. Eine funktionale Website macht es wahrscheinlicher, Besucher zu gewinnen, und sorgt eher dafür, dass sie länger auf deiner Website bleiben. Damit deine Веб-сайт функциональный ist, muss sie ein Dropdownmenü haben.
Du fragst dich jetzt, было ли это в Dropdownmenü ist?
Ein Dropdownmenü ist ein Menu auf einer Website, das eine Liste von Optionen beetet, die ein Benutzer auswählen kann. Ohne Dropdownmenü würde deine Веб-сайт unübersichtlich und erdrückend wirken, был дю для für dein Unternehmen natürlich nicht willst.
В этом артикуле было создано раскрывающееся меню с раскрывающимся меню, которое было недоступно для HTML- и CSS-раскрывающегося меню, а также было создано раскрывающееся меню с HTML-раскрывающимся списком и большим числом элементов. Lies weiter, um mehr über die Bedeutung der richtigen Веб-сайт-навигация по erfahren, damit du deinen Benutzern ein Positives Erlebnis auf deiner Website bieten kannst, das dafür sorgt, dass sie wiederkommen.
Было ли это в раскрывающемся меню?
Ein Dropdownmenü ist eine Liste von Optionen auf einer Website, die nur angezeigt wird, wenn ein Benutzer mit dem Menu interagiert, z. B. indem er darauf klickt oder mit dem Mauszeiger darüber fährt. Wenn das Dropdownmenü angezeigt wird, können die Benutzer auf eine der aufgeführten Optionen clicken. Das Dropdownmenü verschwindet dann, wenn der Benutzer nicht mehr mit dem Menu interagiert.
Ein effektives Website-Design sollte klar, einheitlich und einfach sein. Es sollte nicht zu viele Bilder und nicht zu viel Text enthalten. Es kann jedoch schwierig sein, eine Website übersichtlich zu gestalten, insbesondere, wenn du viele Inhalte einfügen möchtest. В этой осенью вы найдете раскрывающееся меню, в котором можно найти Lösung. Mit einem Dropdownmenü lässt sich deine Website einfach und effektiv organisieren, sodass Benutzer Problemlos das finden, wonach siesuchen.
Тест на проверку выпадающего списка?
Ein Dropdownmenü ist ausschlaggebend für eine funktionale Unternehmenwebsite. Der Zweck eines Dropdownmenüs ist es, Platz auf dem Bildschirm zu Sparen und den Benutzern trotzdem den Zugriff auf sämtliche Inhalte deiner Website zu ermöglichen.
Ein Dropdownmenü auf der Website deines Unternehmens hat viele Vorteile, wie z. B.:
- Gute Navigation: Anstatt wichtige Links überall auf deiner Website zu platzieren, sind sie in einem Dropdownmenü übersichtlich an einem Ort angeordnet. Damit wird die Benutzerfreundlichkeit verbessert, da deine Benutzer nicht mehr nach dem gewünschten Linksuchen müssen. Alle Links befinden sich ganz einfach in deinem Dropdownmenü.
- Verbessertes Дизайн веб-сайтов: Ein gutes Дизайн веб-сайтов очень универсален и функционален. Eine unübersichtliche, überladene Website wird deinen Benutzern Probleme bereiten und zur Folge haben, dass sie lieber wegklicken und zur Konkurrenz gehen. Ein Dropdownmenü ist extrem platzsparend. Den Platz kannst du dann entweder freilassen oder für Bilder verwenden.
- Sorgt für mehr Platz in der Seitenleiste: Selbst wenn du alle Kategorien deiner Website in der Seitenleiste anordnest, kann das unübersichtlich und erdrückend wirken. Das Schöne an einem Dropdownmenü ist, dass es nur erscheint, wenn der Benutzer darauf klickt oder mit der Maus darüber fährt. Es nimmt также nicht den gesamten Platz in deiner Seitenleiste ein.
- Sieht Professionalell aus: Deine Website wird für alle möglichen Leute interessant sein, einschließlich potenzieller Kunden und Geschäftspartner. Daher muss sie professionalell aussehen. Eine unübersichtliche Website sieht definitiv nicht professionalell aus. Eine Professional Website sorgt dafür, dass die Benutzer auf der Website bleiben und letztendlich das kaufen, был дю verkaufst.
HTML- и CSS-раскрывающиеся меню
Beim Erstellen Eines Dropdownmenüs für die Веб-сайт определяет Unternehmens hast du zwei Codierungsmöglichkeiten: HTML и CSS. HTML используется для «языка разметки гипертекста» и CSS для «языка каскадных таблиц стилей».
Sowohl HTML als auch CSS haben ihre Vor- und Nachteile, und es ist wichtig, die Unterschiede zu kennen, damit du entscheiden kannst, welche Methode für dein Dropdownmenü besser geeignet ist.
Zu den Vorteilen von HTML zählt, dass es einfach zu schreiben ist und jeder Browser die HTML-Sprache unterstützt. HTML-код меньше, чем außerdem sehr schnell herunterladen, da der Text komprimierbar ist. Zu den Nachteilen von HTML-Code zählt jedoch, dass damit nur statische und einfache Seiten erstellt werden können und es keine umfangreichen Sicherheitsfunktionen gibt. Insbesondere im Vergleich zu CSS sind die Gestaltungsmöglichkeiten bei HTML-Code sehr begrenzt.
Sehen wir uns nun die Vor- und Nachteile von CSS an. Zu den Vorteilen von CSS zählt, dass du mehrere Dokumente auf einmal aktualisieren kannst und keine weiteren Informationen zum Abrufen von Informationen benötigst. CSS ist auch weniger zeitaufwändig und leichter zu verwalten. Einige Nachteile от CSS sind, dass es anfällig ist und nicht von jedem Browser unterstützt wird. In der Regel dauert es auch länger, bis man sich mit CSS auskennt, da es so komplex ist.
Beide Sprachen sind notwendig, um eine funktionale und attraktive Website zu erstellen, aber es gibt einige Fälle, in denen die eine besser geeignet ist als die andere. Wenn du beispielsweise lediglich den Style Deiner Website verbessern oder die Darstellung deiner Website bearbeiten möchtest, dann verwende CSS. Wenn du jedoch den Inhalt deiner Структурированный веб-сайт, основанный на HTML. Um eine привлекательный веб-сайт zu erstellen, die Марка определяет Unternehmens widespiegelt, empfiehlt es sich allerdings meistens, HTML und CSS gemeinsam zu verwenden.
Nachdem wir nun erklärt haben, was ein Dropdownmenü ist und warum es für eine gute Веб-сайт, который является, шерстяным, без ансегена, с человеком, который имеет HTML-Dropdownliste erstellt. Die Verwendung von HTML für ein Dropdownmenü ist eigentlich recht einfach. Es gibt zwei Optionen für Dropdownmenüs: eines, das auf den Mauszeiger reagiert, und eines mit Mehrfachauswahl.
Ein Dropdownmenü, das auf den Mauszeiger reagiert, ist die einfachste Art von Dropdownmenü. Es erscheint nur, wenn der Benutzer den Mauszeiger darüber bewegt. Bei einem Dropdownmenü mit Mehrfachauswahl kann ein Benutzer mehrere Optionen aus einem Menu auswählen. Der Prozess zum Erstellen dieser Menus unterscheidet sich geringfügig, aber hier sind die Schritte zum Erstellen einer HTML-Dropdown-list:
- Раскрывающийся список «Выпадающий список» Der erste Schritt in diesem Prozess besteht darin, ein div zu erstellen und das Klassenattribut auf «dropdown» festzulegen. Anschließend musst du in CSS die Anzeige des div auf «inline-block» und die Position on «relative» festlegen. Auf diese Weise wird sichergestellt, dass der Inhalt des Dropdownmenüs unterhalb der Dropdownschaltfläche angezeigt wird.
- Erstellen der Hover-Funktion. Anschließend musst du ein Element erstellen, das die Dropdownliste anzeigt, wenn jemand mit dem Mauszeiger darüber fährt. Wenn du dafür eine Schaltfläche erstellen möchtest, musst du sie innerhalb des div positionieren.
- Erstellen und Gestalten des Dropdowninhalts. Nun musst du entscheiden, welche Inhalte dein Dropdownmenü enthalten soll. Beachte, dass dieser Inhalt nur erscheint, wenn jemand mit dem Mauszeiger darüber fährt. Der Inhalt wird in ein div mit dem Klassennamen «Dropdown-Inhalt» eingeschlossen.
- Sicherstellen, dass das Dropdownmenü auf den Mauszeiger reagiert. Um sicherzustellen, dass das Dropdownmenü wirklich erscheint, wenn jemand mit der Maus darüber fährt, musst du die Anzeigeeigenschaft des div mit der Pseudo-Klasse «hover» festlegen.
- Gestaltung des Inhalts im Dropdownmenü. In diesem Schritt verwendest du CSS, um den Inhalt im Dropdownmenü so zu gestalten, dass er ansprechend aussieht. Du kannst auch die Farbe der Dropdown-Links beim Bewegen der Maus ändern.
Bei einem Dropdownmenü, das auf den Mauszeiger reagiert, können Benutzer nur eine Option auswählen. Bei einem Dropdownmenü mit Mehrfachauswahl können Benutzerhingen verschiedene Optionen auswählen. Hier sind die Schritte zum Erstellen eines Dropdownmenüs mit Mehrfachauswahl:
- Erstellen eines label-Elements. Zuerst musst du ein
<метка для=”завтрак-рецепты”>
Wähle ein Frühstücksrezept aus: - Erstellen eines select-Elements. Der nächste Schritt beim Erstellen eines Dropdownmenüs mit Mehrfachauswahl besteht darin, ein select-Element hinzuzufügen. Das select-Element wird verwendet, um aus einer Reihe von Optionen in einer Liste auswählen zu können. Bei einem Dropdownmenü mit Mehrfachauswahl musst du allerdings das «multiple» — Attribut zum
<выберите имя = «завтрак-рецепты» несколько размеров = «5»>
. - Erstellen von Optionen und Einfügen in das select-Element. Im letzten Schritt erstellst du dann die Optionen für dein Dropdownmenü. Du kannst so viele Optionen hinzufügen, wie du willst, du musst sie nur innerhalb des select-Elements positionieren. Hierfür musst du zu jedem öffnenden
-Tag ein Wertattribut hinzufügen. Bei Frühstücksrezepten würde das also so aussehen
Pfannkuchen
Eine gute Navigation für deine Website ist aus einer Vielzahl von Gründen wichtig. Eine Gute Navigation ist sowohl für diesuchmaschinenoptimierung als auch für den Kundennutzen von Vorteil, damit deine Kunden eine положительный Erfahrung auf deiner Website machen können. Eine функциональный и привлекательный веб-сайт ist entscheidend für den Erfolg deines Unternehmens, und der beginnt mit einem Dropdownmenü.
Wenn du Hilfe bei der Erstellung einer effektiven Website für dein Unternehmen benötigst, kannst du Mailchimp verwenden. Mailchimp является универсальной маркетинговой платформой электронной почты «все в одном», предназначенной для управления электронной коммерцией в соответствии с правилами электронной коммерции.
Mit Mailchimp erhältst du Zugriff auf eine Vielzahl von hilfreichen Ressourcen, wie z. Б. Эйнен Конструктор веб-сайтов и инструменты электронного маркетинга. Egal, ob du Hilfe bei der Verwendung von Inhaltsblöcken oder beim HTML-Einfügen benötigst, Mailchimp kann dir alle Fragen zur Website-Navigation beantworten.
Как создать адаптивное всплывающее меню?
Создайте адаптивное всплывающее меню, которое запускается с помощью кнопки меню в заголовке вашего сайта.
Вы узнаете, как создать всплывающее меню, которое:
- Привлекательно, функционально и красиво
- Адаптировано для мобильных устройств
Дизайн всплывающего окна и его содержимого
- 9002 Всплывающие окна> Добавить новый и дайте вашему новому всплывающему окну имя. (Альтернативный метод — нажать CMD+E или CTRL+E , чтобы открыть Finder , найдите всплывающее окно, выберите Добавить новое всплывающее окно и дайте ему имя.)
- Выберите готовый шаблон всплывающего окна или закройте наложение библиотеки и создайте свое всплывающее окно с нуля. Для этого примера мы создадим свой собственный, но вы также можете найти этот шаблон в своей библиотеке шаблонов всплывающих окон Elementor Pro . Просто найдите «меню» в библиотеке всплывающих окон, чтобы найти его.
Всплывающее окно > Вкладка «Макет»
- Ширина : установлен на 85VW
- Overlay : Hide
- Входной анимация : FADE
- ДЛИНАЯ ДЛЯ Анимации : 2 секунд
Кнопка закрытия
- Вертикальное положение : 4
- Цвет : Установите цвет на #878787
- Размер : 35
Всплывающее окно > Вкладка «Дополнительно»
Предотвратить закрытие при наложении : Да
Теперь добавьте раздел с двумя столбцами.
Дизайн первого столбца
Раздел > Макет
- Ширина содержимого : Полная ширина
- Промежуток между столбцами : Нет промежутка
Внутренний виджет в первый столбец.
Под Секция > Макет > Зазор между столбцами , набор Нет зазора .
Под Section > Advanced установите Padding 70 пикселей по всему периметру.
Раздел > Дополнительно
Заполнение : 70 сверху, снизу, слева и справа.
Перетащите виджет «Заголовок» в первый столбец.
Под Стиль > Типографика , установите размер 60, а под Вес установите 100.0028 Мобильные настройки .
Создание остальных пунктов меню
- Щелкните правой кнопкой мыши ручку виджета «Заголовок» и выберите «Дублировать».
- Повторите дублирование столько пунктов меню, сколько вам нужно.
- Отредактируйте текст заголовка для каждого виджета «Заголовок», чтобы правильно обозначить каждый пункт меню
Добавить кнопку в меню
Перетащите виджет «Кнопка» под пункты меню и настройте его по своему вкусу.
На вкладке Advanced > Margin , Установите значение 70 для параметра Верх, а затем щелкните значок адаптивного окна просмотра , щелкните значок Mobile и установите для поля Mobile значение 40 для верхнего края.
Перетащите еще один виджет Inner Section в первый столбец под кнопкой.
- Под Раздел > Макет > Ширина , установите Полная ширина .
- Под Раздел > Макет > Зазор между столбцами, набор Без зазора .
- В разделе «Раздел» > «Дополнительно» > «Отступы» установите 30 для верхнего края, 70 для правого, 50 для нижнего и 70 для левого.
- Теперь щелкните правой кнопкой мыши маркер столбца и выберите Удалить , чтобы удалить один из столбцов, оставив вам только один.
Добавить кнопки «Поделиться» в меню
Перетащите виджет «Кнопки общего доступа» (Pro) в столбец.
Кнопки «Поделиться» > «Контент»
- При необходимости отредактируйте элементы социальных сетей.
- Кожа : Minimal
- Alignment : Left
- Button Size : 1
- Color : Custom Color and choose Black (#000000)
Design The Second Column
Щелкните правой кнопкой мыши ручку столбца, чтобы изменить настройки столбца.
Столбец > Стиль
Фон
- Цвет фона : Установите значение #000000 (черный)
- Второй цвет : Установите #000000 (черный)
Примечание : Хотя новый цвет фона был установлен, вы еще не увидите его, потому что в столбце еще нет содержимого.
Создать форму призыва к действию подписки на рассылку
Перетащите виджет «Внутренний раздел» в этот столбец.
Щелкните правой кнопкой мыши маркер столбца и выберите Удалить , чтобы удалить один из столбцов, оставив вам только один.
Внутренняя секция > Дополнительно
- Поле : Установите значение 130 только для нижнего края
- Отступы : Установите значение 70 для верхнего края, 60 для правого, 70 для нижнего края и 60 для левого края
8 Отрегулируйте текст заголовка (например, Подпишитесь на нашу рассылку), а также размер текста, цвет и т. д. по мере необходимости.
Перетащите Форма Виджет (Pro) под заголовок
Форма > Содержание пример.
Submit Button
- Size : Medium
- Column Width : 20%
- Alignment : Справа
- ICON : Длинная стрелка справа
Форма> Стиль
Форма
- Колонна GAP : 0
- Ряд : 0
- Цвет текста : белый
- Фоны Цвет : Прозрачный
- Цвет границы : белый
- Ширина границы : 1 на дно
- . Кнопка
- Цвет фона : Прозрачный
- Цвет текста : Белый
- Граница : Сплошная
- Ширина рамки только снизу : 1 для нижней части0030
- Цвет границы : Белый
Создать отображение продуктов
Перетащите еще один виджет «Внутренняя секция» в этот столбец под формой.
Внутренняя секция> Advanced
- Padding : Установка на 30 для правой только
Отзывчивый
- Скрыть на мобильном телефоне : скрыть
5 в сечении. Gap
Щелкните правой кнопкой мыши маркер столбца и выберите Удалить , чтобы удалить один из столбцов, оставив вам только один.
Редактировать столбец
Столбец > Дополнительно
- Поле : Установите -60 (минус 60) только для левого края столбец
Заголовок > Стиль
- Цвет текста : Черный (#000000)
- Вес : 700
Заголовок > Дополнительно
- Маржа : Установка на 20 для слева только
Column> Стиль
Фон
Color : белый (#FFFFFF)
Border
- 878
- 77 88.
.
Box Shadow (Normal)
- Цвет : RGBA (0,0,0,0,21)
- Shadow> Horizontal : 0
- Shadow> Vertical : 10
- 88. : 30
- Box Shadow> Распространение : -10 (отрицательный 10)
- Положение : наброски
Shadow (Hover)
- Color : RGBA (0,0,0,027 .
- Shadow> Horizontal : 0
- Box Shadow> Vertical : 15
- Box Shadow> Blur : 40
- Shadow> Spread : -10 (негатив 10)
- Shadow> Spress : -10 (негатив 10)
- 8. : Схема
Перетаскивание на виджет изображения под заголовком
Изображение
Не выбирайте изображение. щелкните правой кнопкой мыши ручку виджета «Заголовок», продублируйте его и настройте стиль дублированного виджета.
Заголовок > Стиль
- Размер : 15
- Вес : 300
Теперь измените формулировку для каждого.
Щелкните правой кнопкой мыши дескриптор столбца и продублируйте его дважды, чтобы всего было 3 столбца.
- Отредактируйте столбец для среднего и последнего столбцов, изменив поля в столбце > Дополнительно на -40 для левого поля в среднем столбце и -20 для левого поля в последнем столбце.
- Для каждого столбца отредактируйте виджет Изображение, выбрав изображение. Здесь хорошо работают даже изображения .gif.
- При необходимости отрегулируйте текст и поля.
Регулировать для мобильного
РЕДАКТИРОВАНИЕ КАЖДЫЕ ВНУТРЕННЫЕ СЕЛИКА В ЛЕВЕ СОБЫЛЕЙ. в левом нижнем углу панели, чтобы вернуться к настройкам всплывающих окон.
Настройки всплывающего окна > Макет
- Ширина : 100vw
Форма
Установите ширину поля электронной почты и кнопки отправки на 80% и 20% соответственно.
- 77 88.