Tutorial CSS KURANG Merancang Bar Navigasi Menu Slaip

Artikel ini adalah sebahagian daripada kami "Siri Tutorial HTML5 / CSS3" - khusus untuk membantu menjadikan anda pereka dan / atau pemaju yang lebih baik. Tekan di sini untuk melihat lebih banyak artikel dari siri yang sama.

Reka bentuk laman web dan pembangunan dunia benar-benar berkembang pesat. Kita dapat melihat ini dalam banyak perkara baru yang dilancarkan dalam komuniti (hampir) setiap hari, sama ada Apps atau Rangka Kerja baru yang membantu membuat kerja sehari-hari sebagai pereka atau pemaju web yang lebih berkesan dan cekap.

Satu yang menarik minat saya daripada perkembangan web hari ini ialah LESS, bahasa gaya bahasa diprogramkan yang memanjangkan cara kita menulis sintaks CSS dengan menggabungkan beberapa konsep pengaturcaraan seperti Pembolehubah, Mixin, Fungsi dan Operasi.

Ia membuka keupayaan baru dalam menulis sintaks CSS. Sebagai contoh, dengan menggunakan Mixins dalam CSS seperti cara kami lakukan dalam program, kami kini boleh menyimpan gaya dan nilai lalai yang boleh digunakan dalam keseluruhan fail apabila mungkin. Dengan ini, kita tidak perlu menulis gaya yang sama berulang kali.

Nah, mari kita melakukan beberapa latihan dengan LESS untuk mendapatkan gambaran yang lebih baik tentang apa yang ditawarkannya.

Merancang dengan KURANG

Dalam tutorial ini, kami akan cuba untuk merekabentuk bar navigasi menu licin yang diilhamkan dari satu di Apple.com. Oleh kerana ia hanya 'diilhamkan' oleh produk asal, perhatikan bahawa produk tutorial akhir kami tidak akan sama dengan asal.

Untuk bermula, anda mungkin mahu membaca sumber berguna berikut dahulu. Mereka menjelaskan beberapa pelaksanaan asas bahasa LESS, yang akan membantu anda sebelum anda menggali lagi dalam tutorial ini.

• KURANG Adakah Lebih: Buat Coding CSS Anda Lebih Mudah dengan KURANG
• Tulis CSS Lebih Baik dengan Kurang
• Pengenalan kepada Kurang, Dan Perbandingan Untuk Sass

Persediaan

Pertama sekali, terdapat beberapa perkara penting yang kita perlukan untuk projek kecil ini, iaitu:

1. Editor teks kurang

Kami memerlukan editor teks untuk mengodkan menu navigasi. Walau bagaimanapun, kebanyakan editor teks yang terdapat di pasaran hari ini (seperti Dreamweaver, Notepad ++, InType, Teks Sublime 2) masih belum menyokong .kurang sambungan fail secara lalai, maka sintaks mungkin tidak diserlahkan dengan baik.

Oleh itu, untuk tujuan tutorial ini, kami akan menggunakan editor teks khas untuk LESS bernama ChrunchApp. Kita boleh buka dan edit .kurang fail lanjutan dan menyusunnya ke CSS statik menggunakan aplikasi ini. Oleh kerana ia adalah aplikasi Adobe Air, ia boleh dipasang di setiap OS desktop utama (Win, OSX dan Linux).

Untuk editor HTML, anda boleh menggunakan mana-mana editor yang anda sudah selesa menggunakan sekarang. Saya sendiri suka Teks Sublime 2.

2. Less.js

Seterusnya, muat turun Perpustakaan KURANG JavaScript dari laman web rasmi mereka, versi semasa ialah 1.2.1. Letakkannya di dalam folder amalan anda untuk ini.

Kemudian hubungkan fail itu ke dokumen HTML.

3. Bebas-Awam

Kami juga akan menggunakan beberapa ciri CSS3 untuk mencapai beberapa kesan dalam menu navigasi yang akan termasuk awalan vendor (-moz-, -o-, -webkit-) untuk menjadikannya tepat pada pelayar yang berbeza. Walau bagaimanapun, saya sendiri tidak suka menggunakan awalan kerana ia akan mengalir fail CSS.

Atas sebab ini, saya memutuskan untuk menggunakan prefix-free, pustaka JavaScript yang dicipta oleh Lea Verou yang akan mengendalikan awalan vendor secara automatik di latar belakang. Oleh itu, kita hanya perlu menulis sintaks rasmi dari W3C.

Muat turun fail dan sambungkannya ke fail HTML.

Baiklah, kita semua ditubuhkan; sekarang mari kita mulakan penanda HTML.

Markup HTML

Navigasi agak mudah. Ia akan mempunyai lima menu yang dibungkus dalam tag senarai tanpa had. Buka editor HTML kegemaran anda dan letakkan markup berikut:

PENGGUNAAN KURANG

Dalam bahagian ini, kami akan memulakan penggayaan navigasi dengan bahasa KURANG. Bagi mereka yang baru dalam bahasa pengaturcaraan, menulis sintaks CSS dengan LESS akan berasa sedikit pelik dan janggal. Tetapi jangan bimbang, sebaik sahaja anda mempunyai amalan, pastinya lebih menyeronokkan daripada cara kami menulis CSS tulen (pengalaman saya, ia juga sedikit ketagihan).

Mari kita periksa gaya navigasi dari sumber inspirasi kita.

Seperti yang dapat kita lihat dalam tangkapan skrin di atas, navigasi Apple.com mempunyai 6 gaya umum utama berikut:

• bayangan
• sempadan
• pembahagi
• kecerunan
• kesan hover
• teks

Kami akan menyimpan gaya ini dan menyimpannya di dalamnya config.less sebagai gaya lalai Konfigurasi; sesetengah pereka juga boleh menamakannya lib.css yang bermaksud Perpustakaan. Pautkan fail ini ke dokumen kami.

Pastikan anda meletakkannya sebelum perpustakaan JavaScript KURANG.

Tentukan Pangkalan Warna dengan Pembolehubah

Dalam langkah ini kita akan menentukan asas warna navigasi menggunakan Pembolehubah. Pembolehubah dalam KURANG dinyatakan menggunakan @ simbol.

@theme: # 555;

Ini @ tema pemboleh ubah adalah warna standard kami; kami akan menggunakannya dalam setiap cara yang mungkin untuk memanjangkan skema warna yang sempurna dan supaya komposisi warna dijangka menjadi lebih konsisten.

Tentukan Gaya Bayangan lalai dengan Mixin

Salah satu ciri yang saya sayangi dari KURANG adalah Mixin. Ia adalah konsep pengaturcaraan yang menyimpan beberapa gaya yang telah ditetapkan dalam LESS boleh diwarisi dalam kelas atau id yang kemudian di dalam lembaran gaya.

.bayangan box-shadow: 0 1px 2px 0 @theme; 

Dalam kod di atas, saya tidak memasukkan versi awalan kotak-bayang harta, kerana perpustakaan awalan percuma akan mengendalikannya secara automatik. Juga, warna bayangan diwarisi dari warna berubah tema.

Tentukan Gaya Sempadan dengan Campuran Parametrik

Bar navigasi akan memerlukan warna sempadan yang jelas dengan sudut yang sedikit bulat. Kita boleh mengkompilkan gaya sempadan menggunakan Parametric Mixins. Ia sebenarnya mempunyai fungsi yang sama seperti Mixins, hanya perbezaannya ialah ia juga mempunyai parameter yang berubah supaya nilai-nilai itu lebih laras.

.sempadan (@ radius: 3px) radius sempadan: @radius; border: 1px solid @theme - # 050505; 

Dalam kod di atas, kami menyediakan sempadan lalai @radius untuk 3px dan seperti yang telah disebutkan sebelumnya, nilai ini boleh diubah kemudian.

Tentukan Gradien, Divider, dan Gaya Hover dengan Operasi

Operasi adalah bahasa pengaturcaraan di mana kita boleh menggunakan formula matematik seperti Addition, Division, Penolakan dan Pendaraban untuk mendapatkan hasil yang diinginkan. Mari lihat kod berikut:

.pembahagi border-style: solid; lebar sempadan: 0 1px 0 1px; warna sempadan: telus @ tema - # 111 telus @ tema + # 333; 

Dalam kod di atas, kita tolak @ tema pemboleh ubah oleh # 111, dengan cara ini output warna sempadan kiri akan sedikit lebih gelap. Walaupun warna sempadan yang betul diperoleh daripada penambahan @ tema pemboleh ubah dengan warna hex # 333, output akan menjadi lebih ringan.

Tahap Skim Warna

Nah, bagi sesetengah daripada anda yang mungkin keliru dengan formula, mari kita periksa rajah skema warna di bawah untuk mendapatkan pemahaman yang lebih baik:

Nada gelap maksimum ialah # 000 (hitam), manakala nada cahaya maksimum adalah #F F F (putih) dan asas warna semasa kami # 555. Jadi, jika kita mahu asas warna menjadi 3 Tahap lebih gelap dari semasa, kita hanya boleh menolaknya # 333. Cara yang sama juga boleh digunakan untuk meringankan warna.

Seterusnya, kami akan mengendalikan warna kecerunan.

.gradien latar belakang: linear-gradient (atas, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect background: linear-gradient (top, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Tentukan Gaya Teks dengan Mixins Pengawal

Kami merancang untuk mempunyai 2 warna di bar navigasi, warna gelap dan satu cahaya. Kami memohon dua kenyataan bersyarat untuk teks menggunakan Guard Mixins.

Pertama, apabila teks diberikan warna yang mempunyai cahaya yang sama atau lebih besar daripada 50%, yang bayang-bayang teks harus berubah warna gelap, dalam warna ini # 000000.

.textcolor (@txtcolor) when (lightness (@txtcolor)> = 50%) color: @txtcolor; teks-bayangan: 1px 1px 0px # 000000; 

Kemudian, apabila teks diberikan warna, cahaya itu kurang dari 50% bayang-bayang teks akan bertukar menjadi putih.

.textcolor (@txtcolor) when (lightness (@txtcolor) 
Mengimport KURANG
 
Sekarang mari buat lagi .kurang fail bernama styles.less dan import config.less ke dalamnya:
 
@import "config.less";
 
Tambah Keluarga Font
 
Untuk bar navigasi untuk kelihatan lebih menarik, kami akan memasukkan keluarga font baru menggunakan @ font-face peraturan. Mengejutkan, @ font-face peraturan sebenarnya sudah disokong sejak IE6!
 
Kali ini kita akan menggunakan fon Asap. Muat turunnya dari koleksi muka font Font Squirrel. Kemudian masukkan gaya berikut kepada yang baru dibuat styles.less fail.
 
@ font-face font-family: 'AsapRegular'; src: url ('fon / Asap-Regular-webfont.eot'); format: url ('fon / Asap-Regular-webfont.eot? #iefix') format ('embedded-opentype'), format url ('fon / Asap-Regular-webfont.woff' ('fon / Asap-Regular-webfont.ttf') format ('truetype'), url ('fon / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); font-weight: normal; gaya fon: normal;  
 
Menggayakan Badan dengan fungsi Warna
 
Sekarang, kami akan memberikan warna latar belakang kepada badan (yang sepatutnya lebih ringan daripada asas warna) serta menentukan saiz font dan saiz font. Kita boleh mendekati kesan menggunakan fungsi Warna:
 
Kod berikut akan meringankan latar belakang pada 30%.
 
body background: lighten (@theme, 30%); font-family: AsapRegular, sans-serif; saiz fon: 11pt; 
 
 
 
Menggayakan Navigasi dengan Peraturan Bersarang
 
Dalam KURANG kita dapat gaya sarang secara langsung di bawah ibu bapanya. Mari lihat kod di bawah.
 
The nav tag yang mengandungi semua elemen yang diperlukan untuk navigasi akan diberikan gaya berikut.
 
nav margin: 50px auto 0; lebar: 788px; ketinggian: 45px; .border; .shadow; 
 
Perhatikan bahawa, bukannya memberikan sekumpulan peraturan CSS lagi, saya hanya memasukkan .sempadan untuk memberi gaya sempadan dan .bayangan untuk menambah bayangan. Dalam kes sebenar, kumpulan kelas ini boleh digunakan semula dalam elemen lain juga, di mana sahaja ia diperlukan.
 
 
 
Seterusnya, kami memberikan gaya untuk ul di dalam nav mempunyai padding sifar dan margin. Tidak lama dahulu kita akan mendekati gaya dengan menulis sesuatu seperti ini:
 
nav ... nav ul ...
 
Tidak ada yang salah dengan pendekatan ini, sebenarnya, saya pernah melakukannya setiap kali dan saya cukup selesa dengannya. Walau bagaimanapun, kaedah ini, banyak pereka CSS telah berkata, bercerita dan dalam beberapa kes, tidak mudah diurus.
 
Sekarang, kita boleh melakukan sesuatu seperti ini:
 
nav margin: 50px auto 0; lebar: 788px; ketinggian: 45px; .border; .shadow; ul padding: 0; margin: 0; 
 
 
 
Dan kemudian menu akan dipaparkan berturut-turut menggunakan paparan: inline harta.
 
nav margin: 50px auto 0; lebar: 788px; ketinggian: 45px; .border; .shadow; ul padding: 0; margin: 0; li display: inline; 
 
 
 
Dalam sintaks di bawah, kami nyatakan gaya penanda menu dan menambahkan gaya kami yang telah ditetapkan, iaitu: .tekscolor, .pembahagi, .kecerunan.
 
nav margin: 50px auto 0; lebar: 788px; ketinggian: 45px; .border; .shadow; ul padding: 0; margin: 0; li display: inline; a text-decoration: none; paparan: blok dalam talian; terapung: kiri; lebar: 156px; ketinggian: 45px; teks-align: center; garis ketinggian: 300%; .textcolor (# f2f2f2); // Anda boleh menukar baris ini .divider; .gradient; 
 
Dalam kod di atas kita memohon warna hex # f2f2f2 di mana ringan dipertimbangkan di atas 50%, jadi kami menjangkakan dapat melihat bayang menjadi gelap (secara automatik). Selebihnya kod yang saya pasti agak jelas.
 
 
 
Walau bagaimanapun, jika kita melihat keputusan semasa di atas, setiap menu mempunyai pembahagi yang mengakibatkan bahagian terakhir melimpah ke bahagian bawah. Oleh itu, kita perlu menghilangkan gaya sempadan untuk anak pertama dan terakhir bar navigasi.
 
nav margin: 50px auto 0; lebar: 788px; ketinggian: 45px; .border; .shadow; ul padding: 0; margin: 0; li display: inline; a text-decoration: none; paparan: blok dalam talian; terapung: kiri; lebar: 156px; ketinggian: 45px; teks-align: center; garis ketinggian: 300%; .textcolor (# f2f2f2); // Anda boleh menukar baris ini .divider; .gradient;  li: first-child a border-left: none;  li: last-child a border-right: none; 
 
 
 
Hover State
 
Untuk langkah terakhir kami akan menambah kesan hover. Dalam KURANG kita boleh menambah pseudo-element seperti : berlegar menggunakan & simbol.
 
nav margin: 50px auto 0; lebar: 788px; ketinggian: 45px; .border; .shadow; ul padding: 0; margin: 0; li display: inline; a text-decoration: none; paparan: blok dalam talian; terapung: kiri; lebar: 156px; ketinggian: 45px; teks-align: center; garis ketinggian: 300%; .textcolor (# f2f2f2); // Anda boleh menukar baris ini .divider; .gradient; &: hover .hovereffect;  li: kanak-kanak pertama border-left: none;  li: last-child a border-right: none; 
 
 
 
Tukar tema warna
 
Inilah bahagian sejuk KURANG. Jika kita mahu mengubah tema warna keseluruhan, kita boleh melakukannya dalam perubahan garis yang lebih sedikit daripada apa yang kita perlukan dalam CSS tulen.
 
Dalam kes ini, saya akan menukar warna navigasi menjadi sedikit lebih ringan. Hanya tukar dua baris berikut.
 
@theme: #ccc; / / Ubah ini
 
.textcolor (# 555); //Dan ini
 
Dan inilah hasilnya.
 
 
 
Kumpulkan KURANG ke CSS
 
Apabila kita masih menggunakan JavaScript KURANG, ia akan merebutnya .kurang fail dan menterjemahkannya ke dalam CSS statik supaya penyemak imbas standard dapat menafsirkannya. Ini adalah pekerjaan berganda di sisi pelanggan, tidak kira bandwidth berlebihan dan buangan. Titik utama KURANG adalah aliran kerja untuk mempermudahkan amalan kami dalam menyusun CSS statik menjadi lebih dinamik dan dapat diprogramkan.
 
Oleh itu, apabila kita meletakkan bar navigasi secara langsung di laman web, penting untuk menyusun fail KURANG ke CSS statik.
 
Klik Crunch It! butang besar.
 
 
 
Simpan .less dalam fail latihan kami, hubungkan ke dokumen HTML dan hapuskan pautan .kurang & kurang.js fail dari dokumen.
 
 .bayangan box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: solid; lebar sempadan: 0 1px 0 1px; warna sempadan: telus # 444444 telus # 888888;  .gradien latar belakang: linear-gradient (atas, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect latar belakang: linear-gradient (atas, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fon / Asap-Regular-webfont.eot'); format: url ('fon / Asap-Regular-webfont.eot? #iefix') format ('embedded-opentype'), format url ('fon / Asap-Regular-webfont.woff' ('fon / Asap-Regular-webfont.ttf') format ('truetype'), url ('fon / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); font-weight: normal; gaya fon: normal;  badan latar belakang: # a2a2a2; font-family: AsapRegular, sans-serif; saiz fon: 11pt;  nav margin: 50px auto 0; lebar: 788px; ketinggian: 45px; jejari sempadan: 3px; sempadan: 1px pepejal # 505050; kotak-bayang: 0 1px 2px 0 # 555555;  nav ul padding: 0; margin: 0;  nav ul li display: inline;  nav ul li a text-decoration: none; paparan: blok dalam talian; terapung: kiri; lebar: 156px; ketinggian: 45px; teks-align: center; garis ketinggian: 300%; warna: # f2f2f2; teks-bayangan: 1px 1px 0px # 000000; gaya sempadan: pepejal; lebar sempadan: 0 1px 0 1px; warna sempadan: telus # 444444 telus # 888888; latar belakang: linear-gradient (atas, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  taip: a hover background: linear-gradient (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul: first-child a border-left: none;  nav ul: last-child a border-right: none;  
 
Mari lihat hasilnya sekali lagi.
 
 
 
Dan kami sudah selesai, jangan ragu untuk bereksperimen dengannya.
 
Kesimpulannya
 
Kami telah mempelajari banyak perkara mengenai bahasa MURAH hari ini, seperti:
 

• Pembolehubah.
• Mixin
• Mixes Parametric
• Operasi
• Mixed Guarded
• Dan Peraturan Bersarang

Walaupun terdapat banyak perkara yang dapat dijelaskan lebih lanjut dan banyak kemungkinan untuk ditunjukkan dan dijelaskan, kami harap anda menikmati tutorial asas ini.

• Demo
• Muat turun sumber