3 Cara Kreatif untuk Menata Tautan Aktif Navigasi Vertikal Divi Anda

Diterbitkan: 2017-09-11

Dalam tutorial Divi ini, kami akan menunjukkan kepada Anda beberapa cara menarik untuk menata tautan aktif di navigasi vertikal Anda. Tutorial ini menindaklanjuti tutorial sebelumnya di mana kami telah menunjukkan kepada Anda cara membuat tautan aktif pada gulir untuk situs web Divi satu halaman. Jadi, sebelum Anda mencoba berbagai cara penataan, Anda harus terlebih dahulu mengatur tautan aktif saat menggulir artikel sebelumnya karena kode yang akan kita gunakan akan dibangun lebih jauh dari itu.

Sesuatu yang harus Anda ingat selama tutorial ini adalah kenyataan bahwa Anda hanya dapat melihat hasilnya setelah Anda menyimpan halaman. Dengan hanya melihat pratinjau halaman Anda, perubahan tidak akan muncul.

3 Cara Kreatif untuk Menata Tautan Aktif Navigasi Vertikal Divi Anda

Berlangganan Saluran Youtube Kami

Bagaimana itu bekerja

Untuk membuat navigasi yang secara otomatis menyesuaikan tautan aktif saat Anda menggulir halaman ke bawah, kami telah menggunakan plugin Page Scroll to ID yang dengan mudah membantu Anda mencapai hasil yang Anda inginkan. Selain itu, plugin ini juga menawarkan opsi berbeda yang dapat Anda pilih secara manual di dalam pengaturan.

Plugin membantu mengidentifikasi posisi pengunjung di situs web Anda dan akan mengubah item menu sesuai dengan bagian apa di situs web Anda yang sedang mereka lihat. Ini adalah interaksi kecil yang pasti akan membantu pengunjung Anda bernavigasi di seluruh satu halaman. Mereka akan secara otomatis mengetahui bagian halaman Anda yang mereka jelajahi dan seberapa jauh mereka dari bagian lain yang mungkin mereka minati.

Catatan: ketahuilah bahwa metode ini hanya berlaku untuk situs web yang dibuat hanya dari satu halaman.

Aktifkan Navigasi Vertikal

Contoh yang akan kami tunjukkan kepada Anda cara membuatnya akan sangat berguna jika Anda menggunakan navigasi vertikal. Jadi, lanjutkan dan aktifkan navigasi vertikal di Theme Customizer (jika Anda belum melakukannya di posting sebelumnya).

Jika Anda menggunakan Dasbor WordPress, buka Appearance > Customize > Header & Navigation > Header Format > Enable Vertical Navigation.

tautan aktif

Gaya Tautan Aktif #1

Contoh pertama yang ingin kami tunjukkan adalah yang bersinar. Setiap kali pengunjung melewati salah satu bagian, item menu lain akan mulai bersinar. Ini adalah cara yang halus namun indah dan elegan untuk membantu pengunjung Anda menavigasi melalui satu halaman.

tautan aktif

Pengaturan Bilah Menu Utama

Mulailah dengan membuat beberapa perubahan pada Bilah Menu Utama Anda. Jika Anda menggunakan Dasbor WordPress, buka Appearance > Customize > Header & Navigation > Primary Menu Bar dan buat modifikasi berikut:

Sembunyikan Gambar Logo: Aktifkan
Ukuran Teks: 24
Spasi Huruf: -1
Font: Monyet Bahagia
Warna Teks: #FFFFFF
Warna Tautan Aktif: #FFFFFF
Warna Latar Belakang: rgba(255,255,255,0)
Warna Latar Belakang Dropdown: rgba(255,255,255,0)

tautan aktif

Tambahkan Kode CSS ke Opsi Tema

Hal berikutnya yang perlu Anda lakukan adalah menambahkan beberapa kode CSS. Ada beberapa cara Anda dapat menambahkan kode CSS ke situs web Anda. Kami akan menangani tiga metode dalam contoh ini, dimulai dengan Opsi Tema. Jika Anda berada di dasbor WordPress, buka Divi > Opsi Tema > Gulir ke bawah tab Umum dan tempatkan baris Kode CSS berikut di kotak CSS Khusus:

@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%;
}}

Gaya Tautan Aktif #2

Gaya tautan aktif kedua adalah yang memiliki tampilan yang sangat bersih dan elegan. Seperti biasa, tautan aktif akan berubah sesuai dengan cara Anda menggulir ke bawah situs web satu halaman. Saat mengklik salah satu item menu, gaya yang sama akan diterapkan.

tautan aktif

Pengaturan Bilah Menu Utama

Kita akan mulai dengan melakukan hal yang sama seperti yang kita lakukan pada contoh pertama dari posting ini; membuat modifikasi pada Bilah Menu Utama. Untuk melakukannya, buka Penampilan di dalam Dasbor WordPress > Sesuaikan > Header & Navigasi > Bilah Menu Utama dan pastikan Anda memiliki pengaturan berikut:

Sembunyikan Gambar Logo: Aktifkan
Ukuran Teks: 24
Spasi Huruf: 2
Jenis huruf: Lobster
Warna Teks: #FFFFFF
Warna Tautan Aktif: #FFFFFF
Warna Latar Belakang: rgba(255,255,255,0)
Warna Latar Menu Dropdown: rgba(255,255,255,0)

tautan aktif

Tambahkan Kode CSS ke Penyesuai Tema

Seperti yang dijelaskan pada contoh sebelumnya, Anda dapat menambahkan kode CSS ke situs web Anda melalui berbagai cara. Selain menambahkan kode khusus ke Opsi Tema, Anda juga dapat menambahkannya ke Penyesuai Tema. Jika Anda menggunakan Dasbor WordPress, buka Appearance > Customize > Additional CSS dan tempatkan baris kode berikut di dalam bidang 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 {
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;
}}

Gaya Tautan Aktif #3

Gaya tautan aktif ketiga yang kami pilih untuk dibagikan kepada Anda adalah gaya yang terutama berfokus pada kata kunci yang digunakan sebagai item menu. Dengan menggunakan pengaturan yang tepat untuk bayangan teks, teks yang sama akan mengelilingi item menu yang menekankan posisi pengunjung di situs web Anda.

tautan aktif

Pengaturan Bilah Menu Utama

Untuk contoh terakhir ini, mulailah dengan membuat beberapa perubahan pada Bilah Menu Utama. Jika Anda berada di dasbor WordPress, buka Appearance > Customize > Header & Navigation > Primary Menu Bar dan buat perubahan berikut berlaku untuk navigasi vertikal:

Sembunyikan Gambar Logo: Aktifkan
Ukuran Teks: 16
Spasi Huruf: 2
Font: Josefin Slab
Gaya Font: Kapital
Warna Teks: #FFFFFF
Warna Tautan Aktif: #FFFFFF
Warna Latar Belakang: rgba(255,255,255,0)
Warna Latar Menu Dropdown: rgba(255,255,255,0)

tautan aktif

Tambahkan Kode CSS ke Satu Halaman Secara Khusus

Pilihan lain Anda harus menambahkan kode CSS adalah dengan menambahkannya ke satu halaman tertentu. Buka halaman depan Anda (dan dengan demikian, halaman tempat Anda meletakkan semua konten) dengan Divi Builder dan klik ikon berikut:

tautan aktif

Setelah Anda mengklik ikon, tempatkan baris kode CSS berikut di dalam bidang CSS Kustom:

@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;
}}

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda beberapa cara yang bagus dan mudah untuk menata tautan aktif di menu Anda. Posting ini merupakan tindak lanjut dari posting sebelumnya di mana kami telah menunjukkan kepada Anda cara membuat tautan aktif pada gulir untuk situs web Divi satu halaman. Ingatlah bahwa Anda harus menyimpan perubahan terlebih dahulu sebelum Anda dapat melihat hasilnya, hanya mempratinjau halaman Anda tidak akan berhasil. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh Botond1977 / shutterstock.com