3 креативных способа стилизации активной ссылки Divi Vertical Navigation

Опубликовано: 2017-09-11

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

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

3 креативных способа стилизации активной ссылки Divi Vertical Navigation

Подпишитесь на наш канал Youtube

Как это работает

Чтобы создать навигацию, которая автоматически настраивает активную ссылку при прокрутке страницы вниз, мы использовали плагин Page Scroll to ID, который легко поможет вам достичь желаемых результатов. Кроме того, плагин также предлагает вам различные варианты, которые вы можете выбрать вручную в настройках.

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

Примечание: знайте, что этот метод применим только к веб-сайтам, состоящим только из одной страницы.

Активировать вертикальную навигацию

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

Если вы находитесь на панели инструментов WordPress, выберите «Внешний вид»> «Настройка»> «Заголовок и навигация»> «Формат заголовка»> «Включить вертикальную навигацию».

активная ссылка

Стиль активной ссылки №1

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

активная ссылка

Настройки основной панели меню

Начните с внесения некоторых изменений в основную строку меню. Если вы находитесь на панели инструментов WordPress, выберите «Внешний вид»> «Настройка»> «Заголовок и навигация»> «Основная панель меню» и внесите следующие изменения:

Скрыть изображение логотипа: включить
Размер текста: 24
Расстояние между буквами: -1
Шрифт: Happy Monkey
Цвет текста: #FFFFFF
Цвет активной ссылки: #FFFFFF
Цвет фона: rgba (255,255,255,0)
Цвет фона выпадающего меню: rgba (255,255,255,0)

активная ссылка

Добавить код CSS в параметры темы

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

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight{ 
text-shadow:  0 0 10px #fff,  0 0 30px #fff,  0 0 50px #e3e98e,  0 0 70px #e3e98e, 0 0 90px #e3e98e;
border-top: 1px dotted #FFFFFF;
border-bottom: 1px dotted #FFFFFF;
padding-top: 15px;
}
nav#top-menu-nav {
width:80% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
text-align: center;
margin-bottom: 15px;
padding-left: 25%;
}
#et-top-navigation {
padding-top: 100% !important;
}
#top-menu {
text-align: center;
padding-left: 10%;
}}

Стиль активной ссылки №2

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

активная ссылка

Настройки основной панели меню

Мы начнем с того же, что и в первом примере этого поста; внесение изменений в основную строку меню. Для этого перейдите в Внешний вид на панели инструментов WordPress> Настройка> Заголовок и навигация> Основная панель меню и убедитесь, что у вас есть следующие настройки:

Скрыть изображение логотипа: включить
Размер текста: 24
Расстояние между буквами: 2
Шрифт: Lobster
Цвет текста: #FFFFFF
Цвет активной ссылки: #FFFFFF
Цвет фона: rgba (255,255,255,0)
Цвет фона выпадающего меню: rgba (255,255,255,0)

активная ссылка

Добавить код CSS в настройщик тем

Как было сказано в предыдущем примере, вы можете добавить код CSS на свой веб-сайт несколькими способами. Помимо добавления настраиваемого кода в параметры темы, вы также можете добавить его в настройщик тем. Если вы находитесь на панели инструментов WordPress, выберите «Внешний вид»> «Настройка»> «Дополнительный CSS» и поместите следующие строки кода в поле «Пользовательский CSS»:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
padding: 0.5em 1.9em;
}
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
height: 20px;
width: 20px;
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
#top-menu .current-menu-item a.mPS2id-highlight:before {
left: 0;
top: 0;
border-left: 4px solid #000000;
border-top: 4px solid #FFFFFF;
-webkit-transform: translate(100%, 50%);
transform: translate(100%, 50%);
}
#top-menu .current-menu-item a.mPS2id-highlight:after {
border-right: 4px solid #000000;
border-bottom: 4px solid #FFFFFF;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
} 
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
nav#top-menu-nav {
width:87% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

Стиль активной ссылки №3

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

активная ссылка

Настройки основной панели меню

В этом последнем примере начните с внесения некоторых изменений в основную строку меню. Если вы находитесь на панели инструментов WordPress, выберите «Внешний вид»> «Настройка»> «Заголовок и навигация»> «Основная панель меню» и внесите следующие изменения в вертикальную навигацию:

Скрыть изображение логотипа: включить
Размер текста: 16
Расстояние между буквами: 2
Шрифт: Josefin Slab
Стиль шрифта: заглавные буквы
Цвет текста: #FFFFFF
Цвет активной ссылки: #FFFFFF
Цвет фона: rgba (255,255,255,0)
Цвет фона выпадающего меню: rgba (255,255,255,0)

активная ссылка

В частности, добавьте CSS-код на одну страницу

Другой вариант добавления кода CSS - это добавление его, в частности, на одну страницу. Откройте свою первую страницу (и, следовательно, страницу, на которой вы разместили весь контент) с помощью Divi Builder и щелкните следующий значок:

активная ссылка

После того, как вы нажали на значок, поместите следующие строки кода CSS в поле Custom CSS:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
margin-left: 80px;
text-shadow:0 0 0 #000, -70px 0 0 rgba(255, 255, 255, .4), 70px 0 0 rgba(255, 255, 255, .4), 0 25px 0 rgba(255, 255, 255, .4) , 0 -25px 0 rgba(255, 255, 255, .4) ; }
}
nav#top-menu-nav {
width:95% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

Последние мысли

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Изображение от Botond1977 / shutterstock.com