3 креативных способа стилизовать вашу вертикальную навигацию по подменю
Опубликовано: 2017-08-17В сегодняшнем посте мы собираемся предоставить вам три различных способа стилизации подменю вашей вертикальной навигации. В одном из предыдущих постов мы уже показали вам, как сделать прозрачную вертикальную навигацию, которая перекрывает ваш веб-сайт при просмотре с рабочего стола.
Примеры, которыми мы собираемся поделиться, будут созданы поверх этой прозрачной вертикальной навигации. Таким образом, у вас сразу же будет возможность создать вертикальную прозрачную навигацию от А до Я. На протяжении этого поста вы познакомитесь с различными настройками стиля, которые могут оживить ваше вертикальное подменю.
Прежде чем показывать вам примеры, было бы интересно увидеть подменю без каких-либо изменений. Как обычно, вертикальное подменю берет на себя настройки пунктов главного меню. Подменю выглядит так, без каких-либо дополнительных изменений:
Теперь давайте посмотрим на три примера, которые мы покажем вам, как воссоздать.
Первый пример:
Второй пример:
Третий пример:
Общие шаги для создания вертикального подменю
Подпишитесь на наш канал Youtube
Прежде чем углубляться в различные примеры, которые мы предоставили, мы собираемся выполнить два общих шага, которые необходимо выполнить перед тем, как начать. Прежде чем создавать элементы подменю в соответствии с вашими потребностями, вы должны сделать две вещи: добавить элементы подменю в свое меню и найти различные идентификаторы CSS для наших элементов подменю. После того, как мы пройдем эти шаги, мы поделимся кодом CSS, который вам нужен для достижения результатов примера.
Поскольку есть три способа добавить код CSS на ваш сайт Divi, мы будем обрабатывать каждый метод индивидуально. Однако вы можете использовать свой предпочтительный способ добавления кода CSS для каждого из примеров.
Добавить элементы подменю
Первое, что мы сделаем, если вы еще этого не сделали, - это добавим элементы подменю. В нашем примере мы только добавили несколько пунктов подменю к пункту меню «наши модели», чтобы показать вам, как это сделать. Однако вы можете применить изменения и к другим пунктам меню.
Если вы находитесь на панели инструментов WordPress, перейдите в «Внешний вид»> «Меню» . Если вы уже создали меню, воспользуйтесь им. Если нет, начните с создания нового меню. Затем добавьте в свое меню пункты главного меню. Как только вы это сделаете, вы можете добавить элементы подменю. Добавьте элемент подменю и просто поместите его прямо под элементом основного меню. Сделайте это для всех элементов подменю, которые вы хотите добавить в свою вертикальную навигацию.
Ищите индивидуальные идентификаторы CSS для ваших пунктов подменю
В наших примерах нам придется внести некоторые изменения CSS в каждый пункт подменю индивидуально. Вот почему нам нужно искать идентификаторы CSS в источнике. У каждого предмета свой идентификатор. Вы должны изменить код CSS в соответствии с идентификаторами CSS, которые специально используются на вашем веб-сайте. Они могут отличаться от используемых в этих примерах. Вот почему мы вкратце покажем вам, где взять идентификаторы, чтобы вы могли внести изменения, в частности, в свои элементы.
Перейдите на свою домашнюю страницу, наведите указатель мыши на меню и начните изучать код. Вы увидите, что идентификатор CSS отображается в выбранном пункте меню. Скопируйте каждый из идентификаторов CSS в списке подменю и сохраните их на будущее.
Теперь, когда вы выполнили два шага, вы можете переходить к созданию примеров, которые мы сделали.
Создать первый пример
В этой части поста мы покажем вам, как именно воссоздать первый пример вертикального подменю. Как видите, структура действительно проста, но добавляет дополнительный цвет вашему сайту. Основные пункты меню просты и имеют прозрачный цвет фона. Вы, конечно, можете сохранить такую же простоту в своем подменю. Или вы можете привлечь к нему немного больше внимания.
Используемые цвета соответствуют фоновому изображению с наложением градиента. Если вы пытаетесь добиться простого и скромного результата, рекомендуется сохранять такую согласованность цветов в подменю.
Добавьте код CSS с помощью параметров темы
Есть разные способы добавить код CSS на вашу страницу. Вы можете, например, добавить код CSS, в частности, на одну страницу. Вы также можете добавить его на весь веб-сайт с помощью параметров темы или настройщика темы. В этом примере мы просто добавим код с помощью параметров темы. Если вы находитесь на панели инструментов WordPress, перейдите в Divi> Параметры темы> Прокрутите вниз общую вкладку и вставьте следующий код в поле Custom CSS:
.nav li ul {
border: none !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(60,105,205,0.1) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(60,105,205,0.3) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(60,105,205,0.5) !important;
border-radius: 5px;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0px 1px 0 !important;
text-align: center !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 5% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\e089" !important;
}
Замените следующие идентификаторы CSS в коде на те, которые применяются к вашему подменю. На предыдущем шаге этого поста мы показали вам, где их можно найти.
Создать второй пример
В следующем примере мы покажем вам, как сделать, чтобы он имел определенный эффект градиента. Различные используемые цвета соответствуют используемому фоновому изображению. Мы добавили градиентный фон во все подменю и несколько отдельных прозрачных цветов для каждого из пунктов подменю.
Добавьте CSS-код для одной страницы, в частности
Хотя вы, вероятно, захотите добавить этот код на свой веб-сайт целиком, мы покажем вам, как применить этот пример к конкретной странице. Если вы не хотите добавлять строки кода CSS, в частности, на одну страницу, не стесняйтесь добавлять их через параметры темы (как показано в первом примере) или через настройщик темы (как показано в следующем примере).
Начните с открытия или создания страницы, на которой вы хотите добавить дизайн подменю. Теперь нажмите следующую кнопку в правом углу конструктора Divi:
На появившемся экране скопируйте и вставьте следующие строки кода CSS в поле Custom CSS:
.nav li ul {
border: none !important;
background: -webkit-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -o-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -moz-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
padding: 3px !important;
width: 80% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(255,255,255,0.6) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(255,255,255,0.4) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(255,255,255,0.2) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0 1px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 80% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
} 
Замените следующие элементы подменю в коде CSS своими собственными:
Создать третий пример
Последний пример, которым мы собираемся поделиться, имеет эффект наведения курсора на него. Добавив этот эффект наведения в свое подменю, вы сможете хорошо взаимодействовать со своей аудиторией, не перегружая главное меню. Поскольку подменю появляется только при перемещении по пункту главного меню. Таким образом, ваши посетители не будут постоянно сталкиваться с этим эффектом.
Добавить CSS-код для настройки темы на одну страницу
В последнем примере мы покажем вам, как добавить код CSS с помощью настройщика тем. Если вы находитесь на панели инструментов WordPress, перейдите в Внешний вид> Настройка> Дополнительный CSS> и скопируйте и вставьте следующие строки кода:
.nav li ul {
border: none !important;
width: 95% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205211:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213:hover
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 5px 0 5px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 95% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
}Возьмите идентификаторы CSS ваших пунктов подменю и замените те, что в примере, на свои:
Вот и все! Теперь ваш дизайн должен выглядеть как в примере, показанном выше.
Последние мысли
В этом посте мы показали вам некоторые возможности творческого подхода к вертикальной навигации. Точнее; мы показали вам, как сделать так, чтобы ваше вертикальное подменю выглядело великолепно. Если вы следите за этим постом, шаг за шагом, вы сможете идеально воссоздать вертикальное подменю. Если у вас есть вопросы или предложения; дайте нам знать в разделе комментариев ниже!
Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!