3 Cara Kreatif untuk Menata Navigasi Sub Menu Vertikal Anda

Dalam posting hari ini, kami akan memberi Anda tiga cara berbeda untuk menata sub menu navigasi vertikal Anda. Di salah satu posting sebelumnya, kami telah menunjukkan kepada Anda cara membuat navigasi vertikal transparan yang tumpang tindih dengan situs web Anda saat melihatnya dari desktop.

Contoh yang akan kita bagikan akan dibuat di atas navigasi vertikal transparan itu. Dengan begitu, Anda akan segera memiliki kemungkinan untuk membuat navigasi vertikal transparan dari A hingga Z. Sepanjang posting ini, Anda akan mengalami pengaturan gaya berbeda yang dapat menghidupkan sub menu vertikal Anda.

Sebelum menunjukkan contohnya, mungkin menarik untuk melihat sub menu tanpa perubahan apa pun. Seperti biasa, submenu vertikal mengambil alih pengaturan item menu utama. Tanpa melakukan modifikasi tambahan, berikut tampilan sub menunya:

Sekarang, mari kita lihat tiga contoh yang akan kami tunjukkan cara membuat ulang.

Contoh Pertama:

Contoh Kedua:

Contoh Ketiga:

Langkah Umum untuk Mencapai Sub Menu Vertikal

Berlangganan Saluran Youtube Kami

Sebelum menyelami berbagai contoh yang telah kami berikan, kami akan menangani dua langkah umum yang diperlukan sebelum memulai. Sebelum Anda mendesain item sub menu sesuai dengan kebutuhan Anda, Anda harus melakukan dua hal: menambahkan item sub menu ke menu Anda dan mencari ID CSS yang berbeda dari item sub menu kami. Setelah kami melalui langkah-langkah tersebut, kami akan membagikan kode CSS yang Anda butuhkan untuk mencapai hasil contoh.

Karena ada tiga cara untuk menambahkan kode CSS ke situs web Divi Anda, kami akan menangani setiap metode satu per satu. Namun, Anda dapat menggunakan cara pilihan Anda untuk menambahkan kode CSS untuk setiap contoh.

Tambahkan Item Sub Menu

Hal pertama yang akan kita lakukan, jika Anda belum melakukannya, adalah menambahkan item sub menu. Dalam contoh kami, kami hanya menambahkan beberapa item sub menu ke item menu 'model kami' untuk menunjukkan cara melakukannya. Namun, Anda dapat menerapkan perubahan ke item menu lainnya juga.

Jika Anda menggunakan Dasbor WordPress, buka Appearance > Menus . Jika Anda sudah membuat menu, gunakan yang itu. Jika belum, mulailah dengan membuat menu baru. Kemudian, tambahkan item menu utama ke menu Anda. Setelah Anda selesai melakukannya, Anda dapat menambahkan item sub menu. Tambahkan item sub menu dan letakkan saja tepat di bawah item menu utama. Lakukan ini untuk semua item sub menu yang ingin Anda tambahkan ke navigasi vertikal Anda.

Cari ID CSS Individual dari Item Sub Menu Anda

Dalam contoh kita, kita harus membuat beberapa modifikasi CSS untuk setiap item sub menu satu per satu. Itu sebabnya kita harus mencari ID CSS di sumbernya. Setiap item memiliki ID yang berbeda. Anda harus memodifikasi kode CSS sesuai dengan ID CSS yang khusus digunakan di situs web Anda. Ini bisa berbeda dari yang digunakan dalam contoh ini. Itu sebabnya kami akan menunjukkan kepada Anda secara singkat di mana mendapatkan ID sehingga Anda dapat membuat modifikasi untuk item Anda secara khusus.

Buka beranda Anda, letakkan mouse Anda di menu dan mulai periksa kodenya. Anda akan melihat ID CSS muncul pada item menu yang dipilih. Salin setiap ID CSS di daftar sub menu dan simpan untuk nanti.

Sekarang setelah Anda melakukan dua langkah, Anda dapat melanjutkan ke pembuatan contoh yang telah kami buat.

Buat Contoh Pertama

Di bagian posting ini, kami akan menunjukkan kepada Anda cara membuat ulang contoh pertama dari sub menu vertikal. Seperti yang Anda lihat, strukturnya sangat sederhana, namun menambahkan warna ekstra ke situs web Anda. Item menu utama sederhana dan menggunakan warna latar belakang transparan. Anda tentu saja dapat menyimpan kesederhanaan yang sama di sub menu Anda. Atau, Anda dapat memilih untuk menarik sedikit lebih banyak perhatian padanya.

Warna yang digunakan sesuai dengan gambar latar belakang dengan overlay gradien. Menjaga konsistensi warna seperti itu di sub menu Anda disarankan jika Anda mencoba mencapai hasil yang sederhana dan sederhana.

Tambahkan Kode CSS Melalui Opsi Tema

Ada berbagai cara untuk menambahkan kode CSS ke halaman Anda. Anda dapat, misalnya, menambahkan kode CSS ke satu halaman tertentu. Anda juga dapat menambahkannya ke seluruh situs web melalui Opsi Tema atau Penyesuai Tema. Untuk contoh ini, kita cukup menambahkan kode melalui Opsi Tema. Jika Anda menggunakan Dasbor WordPress, buka Divi > Opsi Tema > Gulir ke bawah tab umum dan tempel kode berikut ke dalam kotak CSS Kustom:

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

Ganti ID CSS berikut dalam kode dengan yang berlaku untuk sub menu Anda. Pada langkah sebelumnya dari posting ini, kami telah menunjukkan kepada Anda di mana Anda dapat menemukannya.

Buat Contoh Kedua

Contoh berikutnya kami akan menunjukkan cara membuat efek gradien tertentu. Perbedaan warna yang digunakan sesuai dengan gambar latar belakang yang digunakan. Kami telah menambahkan latar belakang gradien ke sub menu lengkap dan beberapa warna transparan individual ke masing-masing item sub menu.

Tambahkan Kode CSS Untuk Satu Halaman Secara Khusus

Meskipun Anda mungkin ingin menambahkan kode ini ke situs web lengkap Anda, kami akan menunjukkan cara membuat contoh ini berlaku untuk satu halaman tertentu. Jika Anda tidak ingin menambahkan baris kode CSS ke satu halaman tertentu, jangan ragu untuk menambahkannya melalui Opsi Tema (seperti yang ditunjukkan pada contoh pertama) atau melalui Penyesuai Tema (seperti yang ditunjukkan pada contoh berikutnya).

Mulailah dengan membuka atau membuat halaman tempat Anda ingin menambahkan desain sub menu. Sekarang, klik tombol berikut di sudut kanan pembuat Divi:

Di layar yang muncul, salin dan tempel baris kode CSS berikut di bidang CSS Khusus:

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

Ganti item sub menu berikut dalam kode CSS dengan milik Anda:

Buat Contoh Ketiga

Contoh terakhir yang akan kita bagikan bagaimana membuat memiliki efek hover. Dengan menambahkan efek hover ke sub menu Anda, Anda akan terlibat dengan audiens Anda dengan cara yang baik tanpa membuat menu utama Anda terlalu sibuk. Karena sub menu hanya muncul saat berpindah item menu utama. Oleh karena itu, pengunjung Anda tidak akan selalu dihadapkan pada efeknya.

Tambahkan Kode CSS Untuk Satu Halaman Melalui Penyesuai Tema

Untuk contoh terakhir, kami akan menunjukkan cara menambahkan Kode CSS melalui Penyesuai Tema. Jika Anda menggunakan Dasbor WordPress, buka Appearance > Customize > Additional CSS > dan salin dan tempel baris kode berikut:

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

Ambil ID CSS dari item sub menu Anda dan ganti yang ada di contoh dengan milik Anda:

Itu dia! Desain Anda sekarang akan terlihat seperti pada contoh yang ditunjukkan di atas.

Pikiran Akhir

Dalam posting ini, kami menunjukkan kepada Anda beberapa kemungkinan tentang cara berkreasi dengan navigasi vertikal Anda. Lebih spesifik; kami menunjukkan kepada Anda bagaimana membuat sub menu vertikal Anda tampak hebat. Jika Anda mengikuti posting ini, selangkah demi selangkah, Anda harus dapat membuat ulang sub menu vertikal dengan sempurna. Jika Anda memiliki pertanyaan atau saran; beri tahu kami 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!