Bahagian paling penting dalam perubahan kami ialah pentakrifan semula elemen sebaris untuk menyekat elemen. Sekarang pautan kami menduduki semua ruang yang tersedia untuk item senarai, iaitu, untuk mengikuti pautan kami tidak lagi perlu menuding kursor tepat pada teks.

#navbar a (warna latar belakang: #949494; warna: #fff; padding: 5px; hiasan teks: tiada; berat fon: tebal; sempadan kiri: 5px pepejal #33ADFF; paparan: blok; ) #navbar li ( sempadan-kiri: 10px pepejal #666; sempadan-bawah: 1px pepejal #666; )

Kami telah menggabungkan semua kod yang diterangkan di atas menjadi satu contoh, kini dengan mengklik pada butang cuba anda boleh pergi ke halaman contoh dan melihat hasilnya:

• rumah
• Berita
• Kenalan
• Tentang kita

Apabila anda menuding tetikus pada item menu, penampilannya mungkin berubah, menarik perhatian pengguna. Anda boleh mencipta kesan sedemikian menggunakan pseudo-class:hover.

Mari kembali ke contoh menu menegak yang dibincangkan sebelum ini dan tambah peraturan berikut pada helaian gaya:

#navbar a:hover (warna latar belakang: #666; sempadan-kiri: 5px pepejal #3333FF; ) Cuba »

Menu mendatar

Dalam contoh sebelumnya, kami melihat bar navigasi menegak, yang paling kerap ditemui pada tapak web di sebelah kiri atau kanan kawasan kandungan utama. Walau bagaimanapun, menu dengan pautan navigasi juga selalunya terletak secara mendatar di bahagian atas halaman web.

Menu mendatar boleh dibuat dengan menggayakan senarai biasa. Paparkan harta untuk elemen

Untuk meletakkan item menu secara mendatar, mula-mula buat senarai bertitik tumpu dengan pautan:

• rumah
• Berita
• Kenalan
• Tentang kita

Mari tulis beberapa peraturan untuk senarai kami yang menetapkan semula gaya lalai yang digunakan untuk senarai dan mentakrifkan semula item senarai dari blok ke sebaris:

#navbar ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Cuba »

Sekarang apa yang perlu kita lakukan ialah menentukan gaya untuk menu mendatar kami:

#navbar ( margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; ) #navbar a (warna: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; ) #navbar a:hover ( border-radius: 20px 5px ; warna latar belakang: #0066FF; ) Cuba »

Menu lungsur

Menu yang akan kami cipta akan mempunyai pautan navigasi utama yang terletak dalam bar navigasi mendatar dan sub-item yang hanya akan muncul apabila kursor tetikus melayang di atas item menu yang berkaitan dengan sub-item ini.

Mula-mula kita perlu mencipta struktur HTML menu kita. Kami akan meletakkan pautan navigasi utama dalam senarai bertitik tumpu:

• rumah
• Berita
• Kenalan
• Tentang kita

Kami akan meletakkan sub-item dalam senarai berasingan, bersarang dalam elemen

• rumah
• Berita
• Kenalan
  • Alamat
  • telefon
  • E-mel
• Tentang kita

Sekarang mari kita mula menulis kod CSS. Pertama, anda perlu menyembunyikan senarai dengan sub-item menggunakan paparan: tiada; pengisytiharan supaya ia tidak dipaparkan pada halaman web sepanjang masa. Untuk memaparkan sub-item, kita memerlukannya apabila menuding pada elemen

#navbar ul ( paparan: tiada; ) #navbar li:hover ul ( paparan: blok; )

Kami mengalih keluar inden lalai dan penanda daripada kedua-dua senarai. Kami membuat elemen senarai dengan pautan navigasi terapung, membentuk menu mendatar, tetapi untuk elemen senarai yang mengandungi sub-item kami tetapkan apungan: tiada; supaya mereka kelihatan di bawah satu sama lain.

#navbar, #navbar ul ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( float: left; ) #navbar ul li ( float: none; )

Seterusnya, kami perlu memastikan submenu lungsur turun kami tidak menolak kandungan di bawah bar navigasi ke bawah. Untuk melakukan ini, kami akan menetapkan kedudukan item senarai: relatif; , dan senarai yang mengandungi sub-item kedudukan: mutlak; dan tambahkan harta teratas dengan nilai 100% supaya submenu yang diposisikan secara mutlak muncul betul-betul di bawah pautan.

#navbar ul ( paparan: tiada; kedudukan: mutlak; atas: 100%; ) #navbar li ( apungan: kiri; kedudukan: relatif; ) #navbar ( ketinggian: 30px; ) Cuba »

Ketinggian untuk senarai induk ditambahkan dengan sengaja, memandangkan penyemak imbas tidak menganggap kandungan terapung sebagai kandungan elemen, tanpa menambah ketinggian senarai kami akan diabaikan oleh penyemak imbas dan kandungan yang mengikuti senarai akan membungkus menu kami.

Kini kami hanya perlu menggayakan kedua-dua senarai kami dan menu lungsur akan sedia:

#navbar ul ( paparan: tiada; warna latar belakang: #f90; kedudukan: mutlak; atas: 100%; ) #navbar li: hover ul ( paparan: blok; ) #navbar, #navbar ul ( margin: 0; padding: 0; list-style-type: none; ) #navbar ( height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; ) #navbar li ( float: left; position: relative; ketinggian: 100%; ) #navbar li a ( paparan: blok; padding: 6px; lebar: 100px; warna: #fff; hiasan teks: tiada; penjajaran teks: tengah; ) #navbar ul li ( float: tiada; ) #navbar li:hover (warna latar belakang: #f90; ) #navbar ul li:hover (warna latar belakang: #666; )

Navigasi utiliti yang dipanggil (dalam terjemahan dari bahasa Inggeris - bar alat navigasi), sebagai peraturan, memberikan pengguna sumber Internet peluang untuk melakukan tindakan kecil di tapak dan termasuk alat seperti borang hubungan, borang langganan, borang pendaftaran atau log masuk ke tapak web, keupayaan untuk mencetak halaman, dsb.

Semua perkara di atas adalah sangat penting untuk mencipta pengalaman interaksi yang memenuhi keperluan pengguna Internet dan penglibatan yang lebih mendalam dalam interaksi dengan tapak. Satu-satunya syarat ialah semua borang dan panel ini mesti diletakkan di tempat yang diharapkan oleh pelawat untuk melihatnya.

Senarai alatan

Alat yang tersedia untuk digunakan di tapak web anda menentukan bentuk dan kualiti interaksi antara pelawat dan sumber dalam talian anda. Senarai ini sangat besar, tetapi beberapa alat yang paling biasa adalah yang berikut:

Walaupun alat Troli Beli-belah ialah elemen asas yang menentukan tapak web komersil, adalah disyorkan agar ikon untuk alat ini juga terletak dalam bar alat navigasi. Perkara yang sama berlaku untuk fungsi lain yang sangat kerap digunakan, seperti "Cari".

Walaupun fakta bahawa kebanyakan alat dan ciri yang terdapat dalam panel ini, seperti yang dinyatakan di atas, adalah bersifat sekunder, dalam beberapa situasi kehadirannya sangat penting untuk pengguna. Oleh kerana mereka masih tidak menanggung beban utama, secara visual mereka mungkin tidak mengambil banyak ruang, tetapi kehadiran mereka adalah wajib.

Lokasi

Sebelum ini, ikon bar alat navigasi sama ada dibenamkan dalam medan kandungan, diletakkan dalam bar sisi atau dalam bar navigasi umum. Dalam beberapa tahun kebelakangan ini, bar alat ini telah berpindah ke penjuru kanan sebelah atas halaman. Terima kasih kepada inovasi ini, menu kini sentiasa kelihatan dan lebih mudah untuk diperhatikan. Perhatikan diri anda: sebaik sahaja kami mendapati diri kami berada di sumber web yang baharu kepada kami, kami secara naluriah mencari borang pendaftaran atau log masuk di penjuru kanan sebelah atas.

Bar alat pada halaman utama tapak web IBM terletak di penjuru kanan sebelah atas, di tengah halaman (ikon rangkaian sosial) dan di pengaki (pautan Hubungi Kami).

Sudut kanan atas secara terperinci.

Pada mulanya, susunan elemen ini mungkin kelihatan terlalu mengelirukan (semua alatan dibahagikan kepada 4 blok), tetapi perlu diingat bahawa hanya pakar komputer yang menganggapnya sebagai sebahagian daripada satu keseluruhan. Bagi pengguna biasa, semua alat ini berbeza antara satu sama lain dalam tujuan dan fungsi, dan oleh itu hakikat bahawa ia terletak di bahagian tapak yang berbeza bukanlah sesuatu yang luar biasa bagi mereka.

Kumpulan instrumen kecil diserlahkan dengan warna merah. Blok terletak pada jarak yang mengagumkan antara satu sama lain, tetapi susunan ini sudah biasa kepada kebanyakan pengguna Internet.

Sesetengah organisasi cuba menyembunyikan bar alat di belakang ikon hamburger (ikon yang terdiri daripada tiga garisan mendatar) atau beberapa elemen interaktif lain, seperti gear berputar.

Harus dikatakan bahawa pendekatan ini mesti diuji dan diuji pada pelbagai jenis paparan. Pengguna anda mungkin tidak menyedari bahawa alat yang mereka cari disenaraikan di bawah ikon hamburger yang sama. Adalah idea yang tidak baik untuk mengabaikan prinsip reka bentuk asas dan logik asas, walaupun syarikat besar mengabaikannya.

1. Tambah ikon (dan ilustrasi grafik lain) dengan teks penerangan. Orang suka gambar sedemikian, tetapi selalunya mereka tidak memahami maksudnya atau tidak mengingatnya dengan baik. Selain itu, juruweb menggunakan ikon ini secara tidak konsisten.

Jangan bergantung pada petua alat kerana ia tidak akan berfungsi pada peranti mudah alih. Gunakan perkataan sahaja, atau perkataan dan gambar, untuk memastikan pemahaman dan ingatan yang lebih baik tentang simbol tersebut. Para penyelidik menunjukkan bahawa menu hamburger, sebagai contoh, digunakan lebih kerap oleh pelawat apabila ia disertakan dengan kapsyen "Menu" dan digariskan dengan garis yang memberikan rupa butang interaktif.

2. Letakkan alatan di tempat yang diharapkan orang ramai untuk menemuinya. Tempat yang paling kerap dilihat: penjuru kanan sebelah atas halaman atau kawasan sebelum dan selepas artikel. Anda juga boleh membina alatan ini ke dalam menu umum, ke dalam bar navigasi umum, kerana orang ramai cenderung melihatnya dengan teliti jika mereka mencari sesuatu.

3. Kawalan harus kelihatan seperti kawalan, anda tidak seharusnya memberi mereka nama yang luar biasa.

5. Pastikan anda membina alatan langganan. Jadikan ia semudah mungkin untuk melanggan pengarang atau blog secara umum.

6. Untuk memaparkan bahasa yang digunakan, cukup untuk menunjukkan namanya dalam aksara abjad yang sepadan.

7. Borang untuk melanggan sumber dan log masuk ke tapak hendaklah terletak bersebelahan antara satu sama lain.

8. Bar alat harus kelihatan, jadi anda boleh menyerlahkan alat yang paling penting dengan warna yang terang.

Contoh susun atur bar alat navigasi:

Bar navigasi - ini adalah salah satu elemen antara muka arahan program. Ia adalah sejenis "jadual kandungan" bahagian atau tetingkap tambahan (Rajah 1.9). Menggunakannya, anda boleh melihat maklumat tertentu yang terkandung dalam bahagian atau dalam tetingkap tambahan.

Bar navigasi mengandungi arahan navigasi, iaitu arahan yang tidak mengubah data, tetapi hanya membenarkan anda menavigasi ke maklumat yang anda perlukan. Sebagai peraturan, ini adalah arahan untuk beralih ke beberapa senarai. Apabila arahan sedemikian dipanggil, senarai yang sepadan dipaparkan di kawasan kerja, menggantikan kandungan kawasan kerja sebelumnya.

Sebagai contoh, akibat memanggil arahan Gudang senarai gudang akan dibuka di kawasan kerja (Rajah 1.10).

Rajah 1.9 – Panel navigasi antara muka arahan Desktop aplikasi terurus 1C:Perusahaan 8 dalam mod Konfigurasi

Rajah 1.10 – Memanggil arahan navigasi antara muka arahan Desktop aplikasi terurus 1C:Perusahaan 8

Terdapat situasi apabila perlu untuk menganalisis atau membandingkan bahagian yang berlainan dalam senarai yang sama, atau senarai yang berbeza. Dalam kes ini, anda boleh membuka beberapa senarai pada masa yang sama (Gamb. 1.11). Satu berada di tingkap utama, dan selebihnya berada di tingkap tambahan.

Untuk membuka senarai dalam tetingkap tambahan, apabila memanggil arahan navigasi, anda perlu menahan kekunci Beralih.

Rajah 1.11 – Memanggil arahan navigasi dengan membuka beberapa senarai antara muka arahan Desktop aplikasi terurus 1C:Perusahaan 8

Arahan dalam panel navigasi biasanya terletak dalam tiga kumpulan standard (Rajah 1.12).

Kumpulan pertama - Penting. Namanya tidak dipaparkan, tetapi arahan untuk kumpulan ini dalam huruf tebal. Berikut ialah arahan untuk melompat ke maklumat yang paling kerap digunakan dalam bahagian ini.

Kumpulan kedua - Biasalah. Kumpulan ini juga tidak mempunyai tajuk; arahannya dipaparkan dalam fon biasa.

Kumpulan ketiga - Lihat juga. Perintah dalam kumpulan ini didahului dengan tajuk Lihat Juga dan tidak diperlukan untuk bekerja dalam bahagian ini. Tetapi mereka boleh berguna.

Rajah 1.12 – Memanggil arahan navigasi dengan membuka beberapa senarai antara muka arahan Desktop aplikasi terurus 1C:Perusahaan 8

Selain kumpulan standard, panel navigasi juga boleh mengandungi kumpulan yang dibuat oleh pembangun.

Dalam kumpulan pasukan Biasalah Kumpulan arahan tambahan mungkin wujud. Kumpulan sedemikian mempunyai tajuk dan arahan yang terkandung di dalamnya dipaparkan inden dari tepi kiri (Rajah 1.13). Dengan mengklik pada tajuk kumpulan ini, arahan boleh disembunyikan atau ditunjukkan.

Jika bahagian program dibentuk oleh subsistem tahap pertama, maka kumpulan arahan dalam bar navigasi dibentuk oleh subsistem tahap kedua dan lebih rendah (Rajah 1.14).

Lazimnya, bilangan pasukan yang disusun dalam kumpulan Penting Dan lihat juga- tidak banyak. Semasa dalam kumpulan Asas mungkin terdapat bilangan arahan yang agak banyak. Oleh itu, kumpulan tambahan pasukan ini digunakan, yang menjadikannya lebih mudah untuk menavigasi komposisi mereka.

Rajah 1.13 – Kumpulan arahan tambahan dalam antara muka arahan bagi aplikasi terurus Desktop 1C:Perusahaan 8

Rajah 1.14 – Surat-menyurat antara kumpulan arahan dan antara muka arahan Desktop aplikasi terurus 1C:Perusahaan 8

Pengguna mempunyai peluang untuk menyesuaikan komposisi bar navigasi: tambah atau alih keluar arahan, tukar pesanan mereka. Sebagai contoh, ia boleh mengalih keluar kumpulan arahan Ciri-ciri Dan harga, dan perintah Pelarasan baki berpindah ke kumpulan lihat juga(Gamb. 1.15). Program ini secara automatik mengingati tetapan yang dibuat oleh pengguna, dan kali seterusnya ia akan menunjukkan bar navigasi semasa pengguna mengkonfigurasinya

Rajah 1.14 – Konfigurasi semula tersuai antara muka arahan Desktop aplikasi terurus 1C:Perusahaan 8

Bab 7: Bar Navigasi

Pamela Roberts

Edisi 3.1 ( 2002-09-22 )

Bar navigasi berada di sebelah kiri tetingkap Konqueror. Anda boleh mendayakannya (atau melumpuhkannya jika ia sudah didayakan) menggunakan item menu Tingkap->Tunjukkan bar navigasi atau kunci F9 .

Panel ini mengandungi beberapa tab; Untuk pergi ke salah satu daripadanya, klik pada ikonnya. Untuk mematikan bar navigasi, hanya meninggalkan ikon tab, klik ikon tab semasa.

Penanda buku

Tab ini memaparkan senarai penanda halaman; Untuk membuka salah satu daripadanya dalam tetingkap utama, klik kiri padanya.

Tab ini memaparkan log aktiviti Internet anda. Untuk membuka salah satu alamat yang dipaparkan dalam tetingkap utama, klik kiri padanya. Untuk membukanya dalam tetingkap baharu, klik kanan padanya dan pilih item daripada menu yang muncul Dalam tetingkap baharu.

Untuk memadamkan alamat, klik kanan padanya dan pilih item dalam menu yang muncul Alih keluar elemen. Untuk mengosongkan sejarah penyemakan imbas anda, pilih Kosongkan log.

Dalam menu yang sama, anda boleh menentukan dalam susunan alamat yang harus dipaparkan dalam jurnal: abjad atau mengikut tarikh.

Jika anda memilih item dalam menu yang sama Tetapan..., tetingkap akan muncul di mana anda boleh menentukan saiz log maksimum, serta berapa lama selepas lawatan terakhir alamat harus dipadamkan secara automatik. Ia juga mungkin untuk memaparkan alamat baharu dan lama dalam fon yang berbeza. Jika anda menghidupkan mod Petua Lanjutan, maka petua alat untuk alamat log akan memaparkan maklumat yang lebih terperinci.

Tab ini memaparkan direktori rumah anda. Ambil perhatian bahawa fail tersembunyi (bermula dengan titik) tidak ditunjukkan. Untuk membuka fail dalam tetingkap Konqueror utama, klik kiri padanya. Jika anda klik kanan pada direktori, anda boleh menggunakan menu yang muncul untuk membuka direktori dalam tetingkap baharu atau dalam tab baharu tetingkap utama.

Tab ini memaparkan senarai sambungan rangkaian (namun, ia juga boleh memaparkan direktori). Untuk membuka objek dalam tetingkap utama, klik kiri padanya. Dengan mengklik kanan padanya, anda akan memaparkan menu di mana anda akan ditawarkan pilihan tambahan.

Folder dipaparkan dalam tab bersih, disimpan dalam direktori ~/.kde/share/apps/konqsidebartng/virtual_folders/remote/. Dengan mencipta direktori baharu di dalamnya, anda akan menambah folder baharu pada tab. Fail yang menerangkan sambungan rangkaian mempunyai sambungan .desktop; untuk mencipta fail baharu, gunakan item menu Buat->Pautan ke alamat Internet....

Direktori akar ialah titik permulaan sistem fail; ia menyimpan semua fail dan direktori lain. Laluan ke direktori akar ditunjukkan oleh garis miring: /. Apabila anda mengembangkannya, anda akan melihat, khususnya, direktori akar, tempat fail pentadbir sistem disimpan, dan rumah, tempat anda boleh mencari direktori rumah anda.

Tab ini menyediakan akses kepada alatan berikut:

Pelayar CD Audio.

Peranti. Ini memaparkan senarai pemacu keras (dan sekatannya), pemacu liut dan pemacu CD-ROM yang anda miliki. Untuk menyambungkan peranti dan memaparkan kandungannya dalam tetingkap utama, klik kiri padanya. Untuk melumpuhkan peranti, klik kanan padanya dan pilih item daripada menu yang muncul. Lumpuhkan.

Penjelajah Rangkaian membolehkan anda melihat cakera komputer lain pada rangkaian tempatan.

Pelayar Sistem Cetak menyediakan akses kepada pengurus cetakan KDE, Kprinter.

Anda boleh menyesuaikan penampilan bar navigasi seperti berikut: klik kanan pada ruang kosong di bawah tab paling rendah atau klik pada ikon Butang persediaan(dalam gambar di atas - butang paling atas; bergantung pada konfigurasi, butang ini mungkin hilang). Menu akan muncul menawarkan anda pilihan berikut:

Tambah

Item ini membolehkan anda menambah tab lain pada bar navigasi. boleh jadi Panel pemain(salah satu alat tambah Konqueror) atau mana-mana direktori.

Item ini membolehkan anda memisahkan bar navigasi supaya anda boleh melihat dua tab pada masa yang sama.

Item ini membolehkan anda menentukan bahagian panel yang mana ikon tab dipaparkan.

Dengan item ini anda boleh menentukan sama ada untuk dipaparkan Butang tetapan.

Klik kanan pada ikon tab akan memaparkan menu yang menawarkan pilihan berikut.