3 Cara Kreatif Gaya Pautan Aktif Navigasi Menegak Divi Anda

September 16, 2017

Dalam tutorial Divi ini, kami akan menunjukkan kepada anda beberapa cara yang menarik untuk menyusun pautan aktif dalam navigasi vertikal anda. Tutorial ini mengikuti tutorial sebelumnya di mana kami telah menunjukkan kepada anda cara membuat pautan aktif pada tatal untuk laman web Divi satu halaman. Jadi, sebelum anda mencuba pelbagai cara penggayaan, anda harus terlebih dahulu menyiapkan pautan aktif pada tatal melalui artikel sebelumnya kerana kod yang akan kita gunakan akan membina selanjutnya.

Sesuatu yang perlu diingat semasa tutorial ini adalah hakikat bahawa anda hanya boleh melihat keputusan sebaik sahaja anda menyimpan halaman itu. Dengan hanya melihat halaman anda, perubahan tidak akan muncul.

Bagaimana Ia Berfungsi

Untuk membuat navigasi yang secara automatik menyesuaikan pautan aktif semasa anda menatal ke bawah halaman, kami telah menggunakan Scroll Page ke plugin ID yang mudah membantu anda mencapai hasil yang anda inginkan. Selain itu, plugin juga menawarkan pilihan yang berbeza yang boleh anda pilih secara manual dari dalam tetapan.

Plugin ini membantu mengenal pasti kedudukan pengunjung yang terdapat di laman web anda dan akan mengubah item menu mengikut bahagian apa yang di laman web yang sedang mereka cari. Ini adalah interaksi kecil yang pasti akan membantu pengunjung anda menavigasi sepanjang satu pager. Mereka akan secara automatik mengetahui bahagian mana halaman anda yang mereka cari dan sejauh mana mereka dari bahagian lain yang mereka mungkin berminat.

Nota: tahu bahawa kaedah ini hanya terpakai kepada laman web yang dibuat dari hanya satu halaman.

Aktifkan Navigasi Menegak

Contoh-contoh yang akan kami paparkan kepada anda bagaimana untuk membuat akan sangat berharga jika anda menggunakan navigasi menegak. Jadi, teruskan dan dayakan navigasi menegak dalam Customizer Tema (jika anda belum melakukannya dalam jawatan terdahulu).

Jika anda berada di Papan Pemuka WordPress anda, pergi ke Penampilan> Sesuaikan> Tandukan & Navigasi> Format Tandukan> Dayakan Navigasi Menegak.

 pautan aktif "width =" 880 "height =" 201 "/> </p>
<h2> Gaya Pautan Aktif # 1 </h2>
<p> Contoh pertama yang kami ingin tunjukkan kepada anda adalah satu glowy. Setiap kali pengunjung melewati salah satu bahagian, item menu lain akan mula bersinar. Ia cara yang halus tetapi cantik dan elegan untuk membantu pelawat anda menavigasi melalui satu pager. </p>
<p> <img class= @media (min-lebar: 981px) { .et_vertical_nav # et-main-area, .et_vertical_nav # top-header { margin-left: 0px! penting; } .container { margin-left: 3%! penting; } .et_vertical_nav # halaman-bekas # main-header { box-shadow: none! important; } # top-menu .current-menu-item a.mPS2id-highlight { teks-bayangan: 0 0 10px #fff, 0 0 30px #fff, 0 0 50px # e3e98e, 0 0 70px # e3e98e, 0 0 90px # e3e98e; border-top: 1px bertitik #FFFFFF; sempadan bawah: 1px bertitik #FFFFFF; padding-top: 15px; } nav # top-menu-nav { lebar: 80%! penting; } .et_vertical_nav # main-header # top-menu> li> a { teks-align: center; margin-bottom: 15px; padding-left: 25%; } # et-top-navigation { padding-top: 100%! important; } # top-menu { teks-align: center; padding-left: 10%; }}

Gaya Pautan Aktif # 2

Gaya pautan aktif kedua adalah yang mempunyai rupa yang sangat bersih dan elegan. Seperti biasa, pautan aktif akan berubah mengikut cara anda menatal ke laman web satu halaman. Apabila mengklik pada salah satu item menu, gaya yang sama akan dikenakan.

 pautan aktif "width =" 800 "height =" 378 "/> </p>
<h3> Tetapan Menu Bar Primer </h3>
<p> Kami akan memulakan dengan melakukan perkara yang sama seperti yang kita lakukan dalam contoh pertama jawatan ini; membuat pengubahsuaian ke Bar Menu Utama. Untuk melakukan itu, <strong> pergi ke Rupa di Papan Pemuka WordPress anda> Customize> Header & Navigation> Bar Menu Utama dan pastikan anda mempunyai tetapan berikut: </strong> </p>
<ul>
<li> Sembunyikan Logo Imej: Enable </li>
<li> Saiz Teks: 24 </li>
<li> Surat Huruf: 2 </li>
<li> Font: Lobster </li>
<li> Warna Teks: #FFFFFF </li>
<li> Warna Pautan Aktif: #FFFFFF </li>
<li> Warna Latar Belakang: rgba (255,255,255,0) </li>
<li> Menu Dropdown Warna Latar Belakang: rgba (255,255,255,0) </li>
</ul>
<p> <img class= @media (min-lebar: 981px) { .et_vertical_nav # et-main-area, .et_vertical_nav # top-header { margin-left: 0px! penting; } .container { margin-left: 3%! penting; } .et_vertical_nav # halaman-bekas # 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 { ketinggian: 20px; lebar: 20px; kedudukan: mutlak; kandungan: ''; -webkit-peralihan: semua 0.35s mudah; peralihan: semua 0.35s mudah; kelegapan: 0; } # top-menu .current-menu-item a.mPS2id-highlight: before { kiri: 0; atas: 0; border-left: 4px solid # 000000; border-top: 4px solid #FFFFFF; -webkit-transform: menerjemahkan (100%, 50%); ubah: menterjemahkan (100%, 50%); } # top-menu .current-menu-item a.mPS2id-highlight: after { sempadan kanan: 4px pepejal # 000000; border-bottom: 4px solid #FFFFFF; -webkit-transform: menerjemahkan (-100%, -50%); ubah: menterjemah (-100%, -50%); } # top-menu .current-menu-item a.mPS2id-highlight: before, # top-menu .current-menu-item a.mPS2id-highlight: after { -webkit-transform: menerjemahkan (0%, 0%); ubah: diterjemahkan (0%, 0%); kelegapan: 1; } nav # top-menu-nav { lebar: 87%! penting; } .et_vertical_nav # main-header # top-menu> li> a { margin-bottom: 30px; } # et-top-navigation { padding-top: 100%! important; }}

Gaya Pautan Aktif # 3

Gaya pautan aktif ketiga yang kami pilih untuk dikongsi dengan anda adalah salah satu yang memfokuskan pada kata kunci yang digunakan sebagai item menu. Dengan menggunakan tetapan yang betul untuk bayangan teks, teks yang sama akan mengelilingi item menu yang menekankan kedudukan pengunjung yang ada di laman web anda.

 pautan aktif "width =" 800 "height =" 377 "/> </p>
<h3> Tetapan Menu Bar Primer </h3>
<p> Untuk contoh terakhir ini, mulakan dengan membuat beberapa perubahan pada Bar Menu Utama. Jika anda berada di papan pemuka WordPress anda, pergi ke <strong> Rupa> Sesuaikan> Tandukan & Navigasi> Bar Menu Primer dan buat perubahan berikut untuk navigasi menegak: </strong> </p>
<ul>
<li> Sembunyikan Logo Imej: Enable </li>
<li> Saiz Teks: 16 </li>
<li> Surat Huruf: 2 </li>
<li> Font: Josefin Slab </li>
<li> Gaya Font: Capitals </li>
<li> Warna Teks: #FFFFFF </li>
<li> Warna Pautan Aktif: #FFFFFF </li>
<li> Warna Latar Belakang: rgba (255,255,255,0) </li>
<li> Menu Dropdown Warna Latar Belakang: rgba (255,255,255,0) </li>
</ul>
<p> <img class= @media (min-lebar: 981px) { .et_vertical_nav # et-main-area, .et_vertical_nav # top-header { margin-left: 0px! penting; } .container { margin-left: 3%! penting; } .et_vertical_nav # halaman-bekas # main-header { box-shadow: none! important; } # top-menu .current-menu-item a.mPS2id-highlight { margin-left: 80px; teks-bayang: 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 { lebar: 95%! penting; } .et_vertical_nav # main-header # top-menu> li> a { margin-bottom: 30px; } # et-top-navigation { padding-top: 100%! important; }}

Pikiran Akhir

Dalam siaran ini, kami telah menunjukkan kepada anda beberapa cara yang bagus dan mudah untuk menautkan pautan aktif dalam menu anda. Siaran ini adalah susulan pada jawatan sebelumnya di mana kami telah menunjukkan kepada anda cara membuat pautan aktif pada tatal untuk laman web Divi satu halaman. Ingat bahawa anda perlu menyimpan perubahan terlebih dahulu sebelum anda dapat melihat hasilnya, hanya pratonton laman anda tidak akan melakukan tugas itu. Jika anda mempunyai sebarang pertanyaan atau cadangan; pastikan anda meninggalkan komen di bahagian komen di bawah!

Pastikan melanggan surat berita e-mel kami dan YouTube supaya anda tidak terlepas pengumuman besar, tip berguna atau Divi freebie! ]

Imej yang Dimuat oleh Botond1977 / shutterstock.com



Credit to Elegant Themes

Bacaan WordPress Yang Lebih Menarik!

Service Finder – Provider and Business Listing WordPress Theme
Themeforest,
Themeforest,

Service Finder – Provider and Business Listing WordPress Theme

Pembuat Rojak - January 18, 2018

Perkhidmatan Pencari WordPress Tema adalah tema perniagaan dan perkhidmatan direktori yang canggih. Pembekal Perniagaan dan Perkhidmatan dari pelbagai kategori boleh…

Advanced Activity Widget
Plugins,
3 views
Plugins,
3 views

Advanced Activity Widget

Pembuat Rojak - January 18, 2018

Widget Aktiviti Lanjutan - Plugin WordPress Widget Aktiviti Lanjutan Menambah kotak widget tab bertema resposnive ke bar sisi anda yang…

Pereka Masuk Logam: Gambaran Keseluruhan Terperinci dan Kajian
Elegant Themes,
3 views
Elegant Themes,
3 views

Pereka Masuk Logam: Gambaran Keseluruhan Terperinci dan Kajian

Pembuat Rojak - January 18, 2018

Halaman log masuk WordPress mudah digunakan, dan mereka dengan selamat. Satu-satunya kelemahan adalah bahawa mereka semua melihat betul-betul yang sama…

Leave a Comment

Your email address will not be published.