Cara membuat navigasi di css. Bilah Navigasi Menggunakan CSS

Dalam karyanya, ia mencurahkan banyak waktunya untuk mengembangkan berbagai jenis navigasi untuk situs web, baik menggunakan . Saya memutuskan untuk menggabungkan semua perkembangan topik dan mempostingnya sebagai semacam kumpulan pelajaran dalam membuat menu navigasi. Tinjauan ini menyajikan berbagai jenis menu, dalam hal gaya eksekusi dan fungsionalitas, multi-level dengan submenu drop-down, menu dalam gaya "akordeon" yang populer, vertikal dan horizontal dengan efek dinamis, struktur sederhana dan kompleks.
Berdasarkan pelajaran ini, berdasarkan contoh yang diberikan, bereksperimen dan menggunakan sedikit imajinasi, Anda dapat dengan mudah membuat situs web Anda menonjol, spektakuler, dan berkesan.

✓ Dengan mengklik judulnya, Anda akan dibawa langsung ke halaman dengan penjelasan rinci tentang keseluruhan proses, dan dengan mengklik gambar, Anda akan dibawa ke halaman dengan contoh pengoperasian menu yang Anda pilih ツ

Menu luar biasa ini dibuat menggunakan gaya dan fitur CSS3 murni, tanpa file gambar atau javascript tambahan apa pun. Dengan browser modern yang mendukung standar CSS3 baru, semua properti ajaib CSS3 dapat digunakan dalam desain situs web. Dengan mempraktikkan teknik pembuatan menu ini, Anda dapat mencapai hasil yang luar biasa.

Dalam tutorial ini, Anda akan mempelajari cara menggunakan gaya dan properti CSS3 baru, tanpa menggunakan javascript atau gambar, Anda dapat membuat menu gaya akordeon yang hebat, fungsional, dan cepat.

Tutorial mendetail tentang membuat menu bergaya akordeon yang indah menggunakan CSS dan jQuery. Menu ini telah diuji dan berfungsi dengan baik di semua browser modern. Penggunaan fungsi gradien linier css3 dalam desainnya membuat menu ini lebih ekspresif dan dinamis.

Pelajaran ini menyajikan seluruh proses pembuatan menu vertikal yang menarik untuk sebuah situs web, dibangun sepenuhnya menggunakan CSS dan file gambar kecil, yang dapat Anda edit dengan mudah sesuai kebutuhan Anda jika diinginkan.

Sebagai kelanjutan dari pelajaran sebelumnya, penjelasan rinci tentang opsi untuk membuat menu vertikal dengan sub-item bersarang telah ditambahkan

Pelajaran kecil namun mendetail tentang cara membuat kode HTML, CSS, dan JavaScript berkualitas tinggi, dengan sedikit kode HTML, CSS, dan JavaScript, dengan antarmuka yang indah, blok navigasi dengan gaya "Accordion".

Solusi menarik lainnya dalam hal membuat menu navigasi bertingkat menggunakan jQuery. Kompatibilitas lintas-browser produk akhir, animasi JQuery, dan gradien CSS3 membuat blok navigasi menjadi lebih menarik.

Saya suka solusi membuat menu berperilaku seperti daftar drop-down. Pengrajin sering menggunakan JavaScript untuk mencapai efek ini, tetapi tutorial ini menunjukkan cara mencapai apa yang Anda inginkan hanya dengan menggunakan gaya dan fungsi CSS murni.

Terjemahan dan versi adaptasi dari pelajaran membuat menu horizontal yang indah dengan gaya "Lava-Lamp". Ada banyak versi menu yang dibuat dengan gaya ini di Internet, berdasarkan pengetahuan yang diperoleh dari pelajaran, Anda dapat dengan bebas membuat sesuatu milikmu sendiri.

Itu saja untuk saat ini. Koleksi ini hanya menyajikan sebagian kecil dari apa yang dapat dilakukan dalam menciptakan menu navigasi yang indah, individual, dan yang terpenting fungsional untuk proyek Anda. Saya berharap seseorang akan menemukan opsi yang cocok untuk diri mereka sendiri dan menggunakannya dalam upaya mereka untuk meningkatkan situs. Jika ada yang menyukai artikel ini, beri komentar, bagikan ke teman melalui Twitter, Google+, dan jejaring sosial lainnya. layanan, atau Anda cukup menandai artikel tersebut

Menu navigasi adalah elemen desain yang cukup sederhana. Kita membuat daftar tak berurutan, mengatur gaya offset kirinya dan membentuk tampilannya. Namun desain adaptif, yang semakin populer, mengedepankan persyaratan baru pada menu.

Dalam tutorial ini kita akan membuat menu responsif sederhana namun efektif yang sangat mudah disesuaikan untuk digunakan dalam proyek apa pun.

Menambahkan daftar

Mari tambahkan daftar sederhana tidak berurutan dengan delapan tautan. Demonstrasi pembelajaran sangat sensitif terhadap jumlah item menu, yaitu semua pengaturan dibuat untuk delapan item.

RUSELLER
Tentang kami
Klien
Bekerja
Audio
Unduh
Blog
Kontak

Menambahkan tanda tangan

Untuk membuat menu lebih menarik dan bermanfaat, mari tambahkan sebaris teks di bawah keterangan menu utama. Ada banyak cara untuk menyelesaikan masalah sederhana ini. Dalam tutorial kami, kami cukup menyisipkan jeda baris dan menambahkan elemen kecil untuk baris kedua. Dengan cara ini kita dapat menata teks tanpa menggunakan div, kelas, dan ID tambahan.

RUSELLER
rumah
Tentang kami
tim kita
Klien
Teman kita
Bekerja
Pekerjaan kita
Audio
Dengarkan kami
Unduh
Berguna
Blog
Baca tentang kami
Kontak
Menulis kepada kami

Seperti inilah tampilan menu kami setelah operasi dilakukan:

Mari mulai mendefinisikan gaya

Kita akan memulai kode CSS dengan menggunakan pemilih universal untuk mengatur ulang margin dan padding, dan menetapkan properti box-sizing: border-box ke semua elemen halaman. Langkah ini akan membantu kita dengan mudah mengatur ukuran elemen dalam persentase, bahkan saat menggunakan bingkai.

* ( padding: 0; margin: 0; -ukuran kotak webkit: kotak perbatasan; -ukuran kotak moz: kotak perbatasan; ukuran kotak: kotak perbatasan; )

Sebelum kita mulai mendefinisikan gaya elemen, mari kita atur sekumpulan properti untuk elemen induk. Pertama, atur lebarnya menjadi 90%. Sekarang wadah kita akan meregang untuk menutupi semua ruang yang tersedia, namun akan ada ruang tersisa untuk membentuk zona bebas dalam desain. Kami juga akan mengatur wadah di tengah menggunakan penentuan ukuran lapangan secara otomatis.

Kami juga akan menata gaya daftar tak berurutan untuk menghindari penggunaan label.

Gaya menu

Sekarang mari kita mulai mendefinisikan gaya untuk item menu.

Navigasikan ke a ( tampilan: blok; float: kiri; lebar: 12,5%; bantalan: 10 piksel; latar belakang: #444; batas kanan: 1 piksel solid #fff; warna: #fff; font: 700 13px/1.4 "PT Serif" , Helvetica, Verdana, Arial, sans-serif; dekorasi teks: tidak ada; transformasi teks: huruf besar ) /*TEKS KECIL*/ nav kecil ( warna: #aaa; font: 100 11px/1 Helvetica, Verdana, Arial, sans -serif; transformasi teks: tidak ada;

Pertama, kita mendefinisikan formulir untuk setiap item daftar. Kami membuat semua elemen blok tautan, menggesernya ke kiri, mengatur lebar dan indentasi kecil. Kami mendapatkan persegi panjang yang cukup besar. Lebar 12,5% diperoleh sebagai hasil perhitungan 100% / 8 (jumlah item menu).

Lalu kita tentukan penampakannya. Atur latar belakang dan bingkai.

Menyelesaikan semua gaya untuk teks menu. Font yang digunakan adalah PT Serif yang dapat ditemukan di website Font Web Google.

Untuk tanda tangan, atur warnanya, hapus transformasi huruf besar dan gunakan font Helvetica.

Berubah ketika mengarahkan mouse ke item menu

Saat Anda mengarahkan mouse ke item menu, item tersebut menjadi lebih hitam. Transformasi digunakan untuk menciptakan efek tambahan.

Nav li a ( latar belakang: #444; perbatasan-kanan: 1px solid #fff; warna: #fff; tampilan: blok; float: kiri; font: 700 13px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans- serif; padding: 10px; dekorasi teks: tidak ada; lebar: 12,5%; /*TRANSFORMASI*/ -transisi webkit: kemudahan 0,5 detik; : latar belakang kemudahan 0,5 detik; transisi: latar belakang kemudahan 0,5 detik) /*STATE AKTIF*/ nav li a:hover ( latar belakang: #222; )

Memperbaiki bingkai

Sekarang mari kita atasi cacat visual kecil pada bingkai menu kita. Setiap item memiliki batas putih yang berfungsi sebagai pembatas. Artinya poin terakhir tidak memerlukan bingkai. Mari kita gunakan kelas semu khusus.

/*BATASAN ITEM TERAKHIR*/ nav li:anak terakhir a ( batas: tidak ada; )

Gambar di bawah menunjukkan menu dengan latar belakang abu-abu khusus, di mana Anda dapat melihat perbedaan antar opsi.

Menjadikan menu adaptif

Proyek ini adalah contoh yang baik antara desain yang lancar dan responsif. Menu kami saat ini memiliki desain karet (lebar ditentukan dalam persentase), namun tidak adaptif. Jika Anda mulai mengurangi lebar layar, menu akan berubah menjadi desain yang buruk:

Untuk memperbaiki situasi, kami akan menggunakan pertanyaan media. Cara terbaik untuk menemukan titik penerapan kueri media adalah dengan mengujinya.

1220 piksel

Masalah pertama muncul ketika lebarnya sekitar 1200 px. Teks panjang beberapa paragraf mulai rusak karena lebarnya tidak mencukupi.

Untuk memperbaiki situasi ini, Anda hanya perlu mengubah ukuran font:

@media hanya layar dan (lebar maksimal: 1220px), hanya layar dan (lebar perangkat maksimal: 1220px)( nav li a ( font: 700 10px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif ; ) navigasi kecil ( font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif; ) )

930 piksel

Poin berikutnya yang muncul ketika ukuran layar diperkecil adalah 930px. Di sinilah menunya lebih terpecah.

Selain mengoreksi ukuran font, menu juga perlu dibangun kembali menjadi dua baris.

@media hanya layar dan (lebar maksimal: 930px), hanya layar dan (lebar perangkat maksimal: 930px)( nav li a ( lebar: 25%; batas bawah: 1px solid #fff; font: 700 11px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif; ) nav li:anak terakhir a, nav li:anak ke-n(4) a ( kanan batas: tidak ada; ) nav li:anak ke-n(5 ) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a ( border-bottom: none; ) )

580 piksel dan 320 piksel

Format dua baris berfungsi dengan baik hingga lebar layar kurang dari 600 piksel, dan kemudian juga menjadi terdistorsi.

Disini kita menata ulang desain menu menjadi dua kolom dengan empat baris. Dan untuk ukuran layar lebih kecil dari 320px, Anda juga perlu memperkecil ukuran fontnya.

@media hanya layar dan (lebar maksimal: 580px), hanya layar dan (lebar perangkat maksimal: 580px)( nav li a ( lebar: 50%; font: 700 12px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif; padding-atas: 12px; nav li:nth-child(even) a ( border-right: none; ) nav li:nth-child(5) a, nav li :nth-child(6) a ( border-bottom: 1px solid #fff; ) ) @media hanya layar dan (lebar maksimal: 320px), hanya layar dan (lebar perangkat maksimal: 320px)( nav li a ( font: 700 11px/1.4 " PT Serif", Helvetica, Verdana, Arial, sans-serif) )

Sekarang menu kita akan menyesuaikan dengan ukuran layar.

Kesimpulan

Membangun desain yang disesuaikan adalah proses yang memakan waktu. Banyak waktu dihabiskan untuk pengujian yang cermat dan pemilihan nilai.

Hari baik untuk semua orang yang sekarang membaca publikasi ini. Hari ini saya ingin memberi tahu Anda tentang salah satu alat pembuatan situs web yang tidak dapat dilakukan oleh sumber daya web mana pun. Ini adalah menu situs, atau disebut juga peta situs. Saat ini jenis dan subtipe menu jumlahnya tidak terbatas.

Pengembang toko online, blog, layanan pendidikan, dan sumber daya lainnya sedang bereksperimen dan membuat lebih banyak peta baru dan tidak biasa. Setelah membaca artikel ini, Anda akan mempelajari grup utama apa yang dibagi menjadi semua jenis panel navigasi, Anda akan dapat mencoba masing-masing panel, dan juga mempelajari cara menulis kode menu untuk situs web html. Sekarang mari kita mulai berbisnis!

Alat untuk membuat bilah navigasi

Ada beberapa cara untuk membuat menu dalam bahasa markup. Konsep dasar mereka adalah menggunakan daftar yang tidak bernomor. Jadi, dalam html 4 yang kita kenal, pengembang menulis tag di halaman

Sebagaimana dinyatakan dalam publikasi sebelumnya, elemen berpasangan

- salah satu elemen daftar. Agar lebih jelas, mari kita tulis kode menu sederhana:

Navigasi
Navigasi situs
- rumah
- Berita minggu ini
- Kemajuan teknologi
- Mengobrol
Namun, dengan munculnya platform, bahasa markup telah diisi ulang dengan tag tambahan. Inilah sebabnya mengapa menu website modern dibuat menggunakan tag khusus< menu>. Dalam penggunaannya, elemen ini tidak berbeda dengan daftar berpoin.

Alih-alih satu< ul>ditentukan< menu>. Namun perbedaan signifikan tampak jika dilihat dari sisi pekerjaan. Jadi, contoh kedua mempercepat kerja program pencarian dan robot di . Saat menganalisis struktur situs, mereka segera memahami bahwa potongan kode ini bertanggung jawab atas peta situs.

Ada menu horizontal, vertikal dan drop-down. Terkadang bilah navigasi dirancang sebagai gambar. Sejak segmen teknologi berkembang, layanan web dibuat adaptif, yaitu. Struktur halaman secara otomatis menyesuaikan dengan ukuran layar perangkat. Mari kita lihat grup menu yang terdaftar.
Mari buat model navigasi horizontal
Jenis navigasi ini adalah yang paling populer. Ketika panel dirancang secara horizontal, semua item menu terletak di header halaman atau di "footer" (terkadang elemen navigasi diduplikasi, muncul secara bersamaan di bagian atas dan bawah).

Sebagai contoh, kita akan membuat panel horizontal, item menu yang akan dirancang menggunakan CSS (cascading style sheet), atau lebih tepatnya diubah. Jadi, setiap elemen individu akan ditempatkan dalam persegi panjang miring. Penasaran?

Untuk transformasi kami menggunakan properti css yang disebut transform. Untuk menentukan transformasi, fungsi skewX bawaan digunakan, yang menentukan sudut kemiringan dalam derajat.

Sayangnya, setiap browser bekerja dengan properti ini dengan caranya sendiri, meskipun ada standar yang ditentukan. Oleh karena itu, awalan khusus diciptakan untuk menunjukkan hal ini:
- -ms- (Internet Explorer)
- -o- (Opera)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
Sekarang mari kita terapkan pengetahuan yang diperoleh untuk menulis sebuah contoh.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Panel horisontal
rumah

Tentang perusahaan

Produk

Kontak

Panel horizontal li ( tampilan: blok sebaris; margin-kanan: 6px; latar belakang: #FF8C00; transformasi: skewX(-45deg); -webkit-transformasi: skewX(-45deg); -o-transformasi: skewX(-45deg) ; -transformasi ms: skewX(-45deg); -moz-transformasi: skewX(-45deg); transformasi skewX(40deg); li: arahkan kursor ( latar belakang: #1C1C1C; )
rumah
Tentang perusahaan
Produk
Kontak

Untuk program kedua kita menggunakan kode sebelumnya sebagai dasar. Saya ingin item menu vertikal saya memiliki sudut membulat, bukan miring.

Untuk melakukan ini, saya menggunakan radius batas properti css lainnya.

Pada artikel sebelumnya saya sudah mengerjakan parameter ini, jadi menurut saya tidak akan ada kesulitan dalam memahami fungsinya.

Panel vertikal li( tampilan: blok; margin: 13px; padding: 13px; latar belakang: #FF8C00; lebar:20%; perataan teks:tengah; ukuran font:20px; radius-batas:10px; ) a ( warna: # fff; ) li: arahkan kursor ( latar belakang: #1C1C1C; )

rumah
Tentang perusahaan
Produk
Kontak

Seperti yang telah Anda ketahui, perubahan utama dalam kode ini adalah tidak adanya deklarasi display: inline-block, yang sebenarnya bertanggung jawab atas susunan horizontal item navigasi.

Kami telah melihat kelompok utama panel navigasi, tetapi ada beberapa variasi lagi, atau lebih baik lagi, add-on.

Terkadang situasi muncul ketika beberapa poin melengkapi poin utama. Dalam hal ini, Anda tidak dapat melakukannya tanpa daftar drop-down. Mereka diciptakan melalui transformasi menggunakan alat css.

Di bawah ini saya telah melampirkan kode program kecil yang mengimplementasikan pendekatan ini.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

Isi daftar tarik-turun ( padding-kiri: 30%; ukuran font: 18 piksel; ) .m-menu ( margin: 0; padding: 9 piksel; lebar: 50%; perataan teks: tengah; batas: 3 piksel solid #000; latar belakang : #FF8C00; ) .m-menu > li ( posisi: relatif; tampilan: blok sebaris; ) .m-menu a ( tampilan: blok; margin-kiri: -2 piksel; bantalan: 13 piksel; warna: #fff; batas -kiri: 3px solid #fff; ) .m-menu a:hover ( latar belakang: #1C1C1C; ) .m-menu .s-menu ( kiri: 10px; posisi: absolut; tampilan: tidak ada; lebar: 155px; margin: 0; bantalan: 0; gaya daftar: tidak ada; latar belakang: #FF8C00; ) .m-menu .s-menu a ( batas: 1px solid #000; ) .m-menu >

Isi daftar tarik-turun ( padding-kiri: 30%; ukuran font: 18 piksel; ) .m-menu ( margin: 0; padding: 9 piksel; lebar: 50%; perataan teks: tengah; batas: 3 piksel solid #000; latar belakang : #FF8C00; ) .m-menu > li ( posisi: relatif; tampilan: blok sebaris; ) .m-menu a ( tampilan: blok; margin-kiri: -2 piksel; bantalan: 13 piksel; warna: #fff; batas -kiri: 3px solid #fff; ) .m-menu a:hover ( latar belakang: #1C1C1C; ) .m-menu .s-menu ( kiri: 10px; posisi: absolut; tampilan: tidak ada; lebar: 155px; margin: 0; padding: 0; gaya daftar: tidak ada; latar belakang: #FF8C00; ) .m-menu .s-menu a ( batas: 1px solid #000; ) li:hover .s-menu :block)

Apa salah satu elemen utama dari setiap situs internet? Tentu saja menu navigasi. Setiap menu adalah bagian yang berguna dari situs web, karena melalui menu itulah pengguna dapat menavigasi ke bagian lain situs. Interaksi utama pengunjung dengan website dilakukan melalui menu navigasi. Saat ini, Anda dapat menemukan menu navigasi yang semakin menarik dan nyaman di halaman website.

Hari ini kami mempersembahkan kepada Anda 62 menu navigasi menarik berbasis teknologi CSS, javascript atau Flash.

Menu navigasi di CSS

Permainan seperti kasino atau ular tangga, dihiasi dengan menu warna-warni yang indah.

Di sini kita melihat skema warna lembut yang luar biasa dan efek menarik saat memperluas submenu.

Steven Wittens memberi kita perspektif lain tentang menu ini.

Di situs UX Booth Anda dapat melihat menu yang stylish namun sangat sederhana.

Situs web MacRabbit jelas menggunakan menu gaya MAC OS atau Apple.

Situs web Joyent menggunakan menu sederhana dan tampak bisnis yang mencantumkan pekerjaan perusahaan.

Kecanggihan dan kesederhanaan portofolio ini pasti akan menarik bagi Anda.

Menu-menu besar berbentuk gambar pasti akan menarik perhatian Anda. Seperti yang Anda lihat, bukan cara tradisional dalam mendesain menu.

Menu drop-down yang menggunakan 2 warna untuk melambangkan item menu aktif dan tidak aktif.

Rekaman label rekaman Amerika Small Stone menggunakan menu berupa radio, atau berupa Space Echo Roland SE-201.

Semacam peta yang memungkinkan Anda “mencari” seluruh situs web.

Menu melingkar bergaya Apple yang menampilkan aplikasi iPhone.

Clearleft menggunakan sesuatu seperti kalender dengan tugas terjadwal sebagai menu.

Item menu yang disorot tampaknya ditekan.

Mengklik item menu akan menampilkan submenu tambahan. Menunya terlihat cukup sederhana, meski dicat hitam.

Menu ini menggunakan efek hover yang sederhana dan bagus.

Ukuran hurufnya sangat lucu dan tidak biasa dan itulah yang menarik perhatian Anda.

Solusi terbaik untuk menggunakan navigasi blok, yang menerapkan efek hover yang hebat.

Tampilan menu warna hijau dan gaya daun yang luar biasa akan menarik perhatian Anda. Ada juga efek hebat di sini yang akan membantu Anda menentukan di subbagian mana Anda berada saat ini.

Perancang situs web Ronny Pries menggunakan konsep menu navigasi yang bagus. Pengguna dipandu oleh rencana di lantai.

Cara kreatif lainnya untuk menerapkan menu navigasi adalah dengan menggunakan gambar pohon buah-buahan, yang melaluinya Anda dapat menavigasi ke subbagian lainnya.

Lihat penggunaan sapuan kuas secara kreatif oleh Matt Dempsey.

Pilihan bagus untuk mengimplementasikan menu navigasi.

Tab vertikal yang terlihat seperti folder yang berfungsi langsung di situs web. Metode ini sangat jarang digunakan, tetapi berhasil dan tampak hebat.

Menu navigasi diimplementasikan dalam gaya musik punk rock. Lihat bagaimana Jeff Sarmiento menerapkan ide ini.

Sesuatu seperti hierarki. Cara kreatif lain untuk mengimplementasikan menu navigasi.

Ikon meningkatkan kesan interaksi dengan menu.

Menu navigasi ini mempunyai efek yang sangat menarik ketika mengarahkan kursor mouse.

Navigasi yang memungkinkan Anda melakukan beberapa penyesuaian menggunakan penggeser khusus.

Menu menarik dan atraktif ala kartu Tarot. Jika Anda mengklik kartu tersebut, kartu tersebut akan langsung masuk ke dalam api.

Menu navigasi yang lancar akan memberi Anda sensasi pergerakan ombak di danau.

Situs web Nick Jones menggunakan menu navigasi yang sederhana namun dinamis untuk menavigasi portofolio.

Pada website Marc Ecko kita disuguhkan navigasi berupa galeri gambar. Hal ini memungkinkan pengunjung untuk menelusuri halaman seni dan filsafat.

HBO adalah semacam arsip dokumen film. Menu navigasi memungkinkan Anda memilih film secara interaktif.

Menu navigasi menarik dengan efek hover sederhana. Saat Anda mengarahkan kursor ke ikon, konten menu akan ditampilkan.

Agen desain menu navigasi yang berbasis di New York dan Fort Lauderdale.

Desain navigasi bergaya dalam gaya neo-kuno dengan latar belakang lukisan dinding.

Website Nick Ad menggunakan menu navigasi yang fleksibel namun mudah digunakan. Klik pada area mana pun di halaman dan lihat efek yang menarik.

Orang yang kreatif menggunakan karyanya sendiri untuk menarik pengunjung ke portofolionya.

Situs web Bagian Tujuh menampilkan menu bergaya brosur yang menarik dengan submenu.

Menu navigasi yang membuka dan menutup ketika item tertentu dipilih.

Pada website Selain, menu navigasi diimplementasikan dalam gaya pelangi.

Konsep portofolio kardus. Efek hover yang sangat menarik.

Kubus kecil yang ditempatkan bersama berfungsi sebagai menu navigasi.

Peta saturasi warna dengan “suara” tekstur sandal nasional Hawaii, yang dibanggakan seluruh bangsa.

Meja dengan benda-benda yang melambangkan menu: telepon untuk menghubungi bagian administrasi, majalah untuk melihat portofolio, surat kabar untuk melihat berita, dan banyak lagi.
Sangat menarik ketika hal-hal nyata digunakan sebagai navigasi.

Cara kreatif yang hebat untuk mengimplementasikan menu navigasi. Setiap elemen indah dengan caranya masing-masing dan semuanya menghidupkan keseluruhan situs web. Metode seperti itu sangat jarang digunakan, tetapi ini sungguh ajaib.

Menu navigasi sederhana dan enak dipandang dalam berbagai warna.

Sepertinya menu tersebut diimplementasikan menggunakan Flask, padahal sebenarnya tidak. Menu navigasi yang rapi, keren dan bergaya dengan efek hover.

Banyaknya permintaan dari pembaca gigih saya dan pengguna yang penasaran telah membuahkan hasil. Saya akhirnya membuat pelajaran di mana kita akan belajar cara membuat menu VKontakte dinamis dengan efek menekan tombol! Dengan analogi dengan situs Internet biasa, ketika tautan yang dikunjungi ditandai dengan cara khusus (menekan tombol, menggarisbawahi, dll.) - kami akan membuat desain yang sama di VKontakte, menggunakan halaman yang dibuat dan desain grafis. Untuk memulainya, kita akan membuat template grafis di Photoshop - kita akan membuat header menu dan dua jenis tombol. Kemudian kita akan membuat beberapa halaman VKontakte, sesuai dengan item di menu kita. Dan terakhir, kami akan melakukan trik rumit yang sebenarnya akan menciptakan ilusi mengikuti tautan. Pelajarannya cukup rumit dan cocok untuk mereka yang merasa yakin dengan fungsi Vkontakte. Saya akan melakukan semua manipulasi menggunakan sebuah contoh grup VKontakte Anda, di mana efek ini diwujudkan secara langsung. Jadi, ayo mulai bekerja!

Langkah 1. Buat header menu di Photoshop
Buat dokumen di Photoshop dengan lebar 600 piksel. Ketinggiannya bisa berbeda, sesuai kebijaksanaan Anda. Anda dapat menempatkan foto tertentu, kolase, spanduk informasi, dan gambar grafik lainnya di header. Dalam hal ini saya menggunakan banner iklan ini berukuran 600x172 piksel.

Langkah 2. Buat bilah navigasi di Photoshop
Sekarang kita perlu membuat bilah navigasi. Dalam contoh ini, saya hanya menggunakan teks sebagai tombol. Namun sesuai kebijaksanaan Anda, Anda dapat membuat tombol berwarna dan menulis teks di atasnya. Kami melakukan ini - membuat persegi panjang 600x56 piksel di Photoshop dan dalam hal ini mengisinya dengan warna putih. Kemudian kami menulis item menu di baris - sekitar 5-6 item, tidak lebih. Jumlah poin yang lebih banyak akan terlihat terjepit.

Langkah 3. Buat bilah navigasi yang ditekan di Photoshop
Sekarang kita perlu membuat link aktif, seolah-olah link tersebut diklik. Saya menggunakan garis bawah biasa, tetapi Anda dapat menggunakan teks atau warna latar belakang yang berbeda untuk menandai tautan yang dikunjungi.

Langkah 4. Potong gambar yang sudah jadi
Pada tahap ini, kita perlu memotong gambar dari Langkah 2 dan Langkah 3. Kita harus memiliki dua set masing-masing lima tombol - satu tombol tanpa garis bawah, tombol lainnya dengan garis bawah. Tombol untuk setiap item (dengan dan tanpa garis bawah) harus berukuran sama. Gambar di bawah menunjukkan seluruh desain grafis kami - sepuluh tombol dan satu header menu.

Langkah 5. Buat halaman Menu VKontakte
Sekarang mari kita pergi ke VKontakte. Tugas kita adalah membuat halaman terpisah yang disebut “Menu”. Untuk melakukan ini kita akan menggunakan kode berikut
http://vk.com/pages?oid=-XXX&p=Page_Name
di mana alih-alih XXX kami akan mengganti id grup kami, dan sebagai ganti teks “Nama Halaman” kami akan menulis Menu. Sekarang kita perlu mencari tahu id grup. Bagaimana cara melakukannya? Kami pergi ke halaman utama grup dan melihat postingan kami di dinding - tepat di bawah blok "Tambahkan postingan" akan tertulis "Semua postingan" - klik tautan ini.

Langkah 6. Tentukan id grup dan edit kodenya
Kami pergi ke halaman dan melihat URL seperti ini https://vk.com/wall-78320145?own=1, dimana angka 78320145 pada contoh ini adalah group id. Kami mengganti data kami ke dalam kode sumber dan mendapatkan catatan seperti ini:
http://vk.com/pages?oid=-78320145&p=Menu(dengan nomor Anda!). Rekatkan baris ini ke bilah alamat browser dan tekan Enter. Jadi kami membuat halaman VKontakte baru dan awalnya terlihat seperti ini.

Langkah 7. Buat halaman navigasi VKontakte yang tersisa
Dengan cara yang sama, kami membuat empat halaman navigasi lagi: Harga, Cara memesan, Spesifikasi teknis, dan Pertanyaan. Artinya, kami menyalin kode yang sesuai empat kali lagi ke bilah alamat browser (dengan nomor id Anda pada contoh di bawah, nomor saya):

http://vk.com/pages?oid=-78320145&p=Harga

http://vk.com/pages?oid=-78320145&p=How_to memesan

http://vk.com/pages?oid=-78320145&p=Spesifikasi teknis

http://vk.com/pages?oid=-78320145&p=Pertanyaan
Harap diperhatikan bahwa pada judul halaman dua kata (Cara memesan), spasi antar kata diganti dengan garis bawah urutan How_to. Sekarang kami memiliki lima halaman siap pakai untuk setiap item menu. Kami tidak membuat halaman Portofolio karena terletak di halaman Menu

Langkah 8. Unggah foto ke halaman pertama menu
Pada halaman yang dibuat, masih kosong (lihat Langkah 6) Menu, klik tautan Edit atau tautan Isi dengan konten. Setelah ini kita melihat panel pengeditan. Di sini kita perlu mengklik ikon kamera dengan fungsi Unggah foto. Penting! Harap pastikan bahwa Anda berada dalam mode markup wiki. Peralihan mode diatur oleh ikon di tepi kanan halaman.

Langkah 9. Hasil setelah memuat gambar
Kita memuat gambar-gambar yang kita buat pada Langkah 1 dan Langkah 2. Setelah memuat, kita melihat kode seperti pada gambar di bawah ini, dan menunya sendiri terlihat seperti ini. Setiap kali selesai melakukan perubahan kode, jangan lupa klik Simpan Halaman, lalu klik Pratinjau untuk melihat hasilnya.

Langkah 10. Mengedit kode gambar
Sekarang tugas kita adalah mengganti semua properti noborder dengan properti nopadding. Dan letakkan dimensi sebenarnya pada gambar pertama, karena VKontakte memperkecil gambar menjadi 400 piksel saat diunggah. Setelah semua perubahan kita akan mendapatkan kode dan menu berikut.

Langkah 11. Tambahkan link ke gambar
Sekarang kita perlu memasang tautan untuk setiap gambar. Tautan harus dimasukkan setelah nopadding| sebagai pengganti spasi sebelum tanda kurung tutup. Untuk gambar pertama (header menu dari Langkah 1), Anda dapat memberikan link ke halaman utama grup, atau Anda dapat menggunakan properti nolink (dimasukkan; setelah nopadding tanpa spasi). Untuk kartu kedua, masukkan alamat halaman format halaman-78320145_49821289. Artinya, URL lengkap dari gambar tersebut https://vk.com/page-78320145_49821289, bagian pertama dengan domain dapat dihilangkan. Namun untuk link ke situs luar, URL link tersebut harus dicantumkan secara lengkap.

Langkah 12. Salin kode ke halaman navigasi lainnya
Dalam langkah yang cukup sederhana ini, kami menyalin kode terakhir dari langkah sebelumnya dan menempelkannya ke halaman sisa yang dibuat - Harga, Cara memesan, Kerangka Acuan, dan Pertanyaan. Kami berada di halaman, klik Edit atau Isi dengan konten (kami berada dalam mode markup wiki), tempel kode dan klik Simpan. Dan kemudian juga di halaman berikutnya. Artinya, sekarang kita memiliki lima halaman, yang masing-masing halamannya tampilan menunya persis sama. Namun Anda sudah dapat menavigasi menu - ketika Anda mengklik link, misalnya Harga, kita akan dipindahkan ke halaman Harga, dll.

Langkah 13. Membuat efek tombol ditekan
Sekarang kita harus mengubah satu gambar pada masing-masing lima halaman (ganti tombol tanpa garis bawah dengan tombol dengan garis bawah). Misalnya pada halaman pertama Menu kita memuat gambar baru lalu mengganti alamat gambar lama pada kode dengan yang baru (digarisbawahi merah). Lalu kita masuk ke halaman Harga, upload gambar yang diberi garis bawah Harga dan ubah kodenya ke alamat gambar baru. Lalu kita pergi ke halaman Cara memesan, Kerangka acuan dan Pertanyaan dan melakukan operasi yang sama dengan cara yang sama.

Akhir.
Hasilnya, kami mendapat efek navigasi ketika Anda mengklik link menu dan menjadi aktif. Namun karena desain grafis di semua halaman hampir sama, kecuali link aktif, maka terciptalah ilusi navigasi, meski sebenarnya merupakan peralihan ke halaman lain.

Menu yang dirancang dengan cara ini tidak disesuaikan untuk perangkat seluler. Saat ukuran layar diperkecil, gambar mulai bergeser satu ke bawah yang lain. Untuk membuat desain responsif, Anda perlu menggunakan tabel versi kaku. Tapi ini adalah cerita lain dan teknik yang lebih maju. Sementara itu, lihatlah berbagai pilihan untuk desain menu grafis.

Mungkin bermanfaat untuk membaca: