Memeriksa responsif navigasi pola

Indonesian (Bahasa Indonesia) translation by fodal fadel (you can also view the original English article)

Sebagai web designer membuat situs yang lebih dan lebih responsif, pola terus-menerus muncul untuk bagaimana kita menangani navigasi global. Ini adalah yang pertama dalam serangkaian posting yang berfokus pada bagaimana mengembangkan beberapa pola. Posting ini akan mencakup tiga responsif navigasi pola; top-nav, prioritas, dan pilih menu.

Salah satu masalah-masalah tertentu yang hampir setiap situs responsif harus berurusan dengan adalah apa yang harus dilakukan dengan navigasi global. Panel navigasi atau menu yang cocok nyaman di layar lebar dengan mudah menjadi sempit di layar kecil. Array solusi telah muncul, berkat eksperimen oleh dunia web designer, untuk menangani masalah ini.

Brad Frost mengumpulkan banyak pola navigasi responsif dan kemudian dikumpulkan beberapa pola yang lebih kompleks. Posting ini adalah awal dari serangkaian menjelajahi sejumlah pola-pola ini, secara khusus tentang cara untuk mengembangkan mereka sendiri, bukannya bersandar pada pendekatan Salin. Kita akan melihat tiga pola serupa dan mempertimbangkan tambahan Rombongan pola di masa depan posts.

Pola

Masalah dasar dengan responsif navigasi adalah salah satu ruang. Pada layar lebar kita memiliki banyak horisontal ruang untuk bekerja dengan, tapi itu tidak terjadi pada smartphone dan demikian pula perangkat kecil. Kita bisa mengubah ruang horisontal untuk ruang vertikal pada perangkat kecil ini, tetapi yang mendorong konten lebih lanjut ke bawah halaman. Pola-pola ini terlihat untuk menjaga navigasi yang tersedia sambil membatasi ruang vertikal yang digunakan.

Pola 3 yang kita akan melihat di posting ini:

Top-Nav (tidak)-membuat item menu ke minimum dan menggunakan css untuk menyesuaikan navigasi.
Prioritas — memprioritaskan item menu untuk menampilkan dan menyembunyikan mereka tampilan yang berdasarkan pada lebar layar yang tersedia.
Pilih Menu-mengkonversi bar navigasi ke menu pilih mana dibatasi ruang yang tersedia.

Masing-masing dari pola-pola ini berusaha untuk memecahkan masalah ruang dalam cara yang berbeda.

Demo menunjukkan semua tiga pola, ditambah variasi pada pola Pilih menu. Di bawah ini saya akan berjalan melalui masing-masing, meskipun aku akan terus kode terbatas header dari setiap halaman untuk menjaga hal-hal yang sedikit lebih sederhana.

Top-Nav (tidak) pola

Pola atas-nav mungkin adalah pendekatan yang paling umum digunakan. Perubahan antara sempit dan lebar layar minimal, maka julukan "tidak." Biasanya semua yang diperlukan adalah beberapa tweak kecil untuk css Anda untuk mendapatkan kerja pola ini.

Pendekatan: Demo memiliki header sangat sederhana. Termasuk logo dan beberapa link yang membuat navigasi global kami. Tantangan kami adalah untuk transisi antara navigasi duduk di bawah logo dan pergeseran atas dan ke kanan sekali cukup ruang tersedia.

Langkah 1: HTML

Markup cukup sederhana. Di dalam elemen header html5 kami memiliki logo dan daftar unordered link untuk navigasi kami. Wadah div adalah hanyalah sebuah cara untuk memungkinkan latar belakang header untuk meregangkan dari tepi ke tepi, sementara menjaga konten dalam terpusat dengan max-lebar. Ini bekerja sama dengan pembungkus Anda seluruh kode dalam wadah tunggal, tetapi memungkinkan lebih banyak fleksibilitas dalam apa yang bisa dan tidak terkandung.

Satu hal yang Anda mungkin bertanya-tanya tentang adalah penggunaan bebas-melanggar ruang di label menu. Ketika browser mengubah ukuran, item menu akan ingin melompat antara satu dan dua baris. Ruang bebas-melanggar memastikan label lengkap akan selalu tetap pada satu baris, menghindari kata-pembungkus jelek.

<header>
  <div class="container">
    <img class="logo" src="images/logo.png" width="252" height="46" />

    <nav>
      <ul id="demo-nav">
        <li><a href="">Back to Post</a></li>
        <li class="current"><a href="">Top-Nav</a></li>
        <li><a href="">Priority</a></li>
        <li><a href="">Select&nbsp;Menu</a></li>
        <li><a href="">Select&nbsp;Menu&nbsp;JS</a></li>
      </ul>
    </nav>

  </div>
</header>

Langkah 2: Default CSS

Default css untuk header dan logo ini juga cukup sederhana. Header sendiri mendapat beberapa gaya warna dan sedikit padding di bagian bawah. Pada layar kecil kita akan memiliki navigasi di bawah logo dan kami akan pusat keduanya. Aku sudah memberikan logo sendiri beberapa margin untuk menambahkan sedikit ruang di atas dan di bawah ini.

header {
  color:#eee;
  background: #2b2726;
  padding-bottom: 1em;
  text-align: center;
}

.logo {
  margin: 1.25em 0;
  width: 200px;
}

Default css untuk navigasi, sekali lagi, cukup sederhana. Jika Anda sudah pernah kode bar navigasi sebelum harus tampak akrab. Satu hal yang sering termasuk dalam navigasi, tetapi hilang di sini, adalah pelampung pada link. Karena kita akan pergi ke pusat segala sesuatu secara default kita akan menyimpan mengapung sampai kita membutuhkannya.

#demo-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
  
#demo-nav li {
  display: inline;
}
	
#demo-nav a {
  color:#fff;
  padding: 0.75em;
  text-decoration: none;
  line-height: 2.5;
}
	
#demo-nav a:hover {
  text-decoration: underline;
}

Kunci di atas adalah jarak antara link. Tidak tersedia cukup space dan individu link akan sulit untuk tekan. Terlalu banyak ruang dan navigasi Anda akan turun ke garis ekstra dan mengambil lebih banyak ruang vertikal. Apa yang saya lakukan adalah mencari kompromi yang memungkinkan lebih banyak ruang antara link sebanyak mungkin sambil menjaga baris link maksimum dua.

Dengan gaya di atas navigasi akan terlihat seperti yang Anda lihat di bawah. Gambar diambil dengan terbuka browser saya untuk 320px.

Langkah 3: Media query

Pasangan pertama pertanyaan media akan menyesuaikan ruang antara link. Kami tidak memiliki cukup ruang untuk bergerak navigasi atas dan ke kanan untuk sedikit, tapi dalam perjalanan kita dapat menyesuaikan padding link sebagai kamar memungkinkan. Ada tidak ada jumlah yang benar atau salah. Aku hanya bermain-main dengan lebar browser dan membuat penyesuaian pada berbagai titik.

Di 42.5em (680px) ada cukup ruang untuk cocok semua link pada satu baris sehingga saya berkurang kiri dan kanan padding cocok semua dalam satu baris.

@media screen and (min-width: 30em) {
  #demo-nav a {padding: 0.75em 1.75em;}
}

@media screen and (min-width: 42.5em) {
  #demo-nav a {padding: 0.75em 1.1em;}
}

Setelah layar mendapatkan sekitar 52.5em (840px) ada cukup ruang untuk bergerak bar navigasi atas dan ke kanan logo. Pertama kita akan mengapung logo di sebelah kiri. Padding di bawah header tidak lagi diperlukan sehingga kami akan menghapusnya.

Kami akan mengapung bar navigasi di sebelah kanan dan mengurangi paddings kiri dan kanan dari link yang sedikit lebih dan navigasi melompat ke tempatnya. Karena kita sedang mengambang kanan saya dihapus hak padding pada link yang terakhir. Satu perubahan terakhir adalah pengaturan link untuk menampilkan seperti blok elemen-elemen tingkat untuk meningkatkan ukuran area yang dapat diklik dan karena perubahan itu link sekarang perlu menjadi mengambang.

@media screen and (min-width: 52.5em) {
  .logo {float: left;}
  header {padding-bottom: 0;}

  #demo-nav {float: right;}
  #demo-nav a {padding: 1.25em 0.75em; display: block; float: left}
  #demo-nav  li:last-child a {padding-right: 0;}
}

Perubahan terakhir dua adalah sekali lagi semata-mata untuk menyesuaikan jarak antara link dan kembali perubahan yang lebih sesuai dengan mata saya dari apa pun.

@media screen and (min-width: 64em) {
  #demo-nav a {padding: 1.5em;}
}

@media screen and (min-width: 75em) {
  #demo-nav a {padding: 1em 2.25em; line-height: 3em}
}

Tips

Ini adalah pola yang cukup sederhana, yang mengapa Anda melihatnya digunakan begitu sering. Tergantung pada desain Anda mungkin Anda benar-benar tidak perlu untuk mengubah apa pun, melampaui beberapa tweak di sana-sini.

Pola ini bekerja lebih baik bila jumlah item menu terbatas. Saya menggunakan lima di sini. Enam mungkin akan bekerja. Empat mungkin bekerja lebih baik.

Hal utama yang perlu diperhatikan adalah untuk pastikan untuk meninggalkan ruang yang cukup di sekitar link pada layar sempit sehingga masing-masing dapat dipilih. Menjaga dalam pikiran pada telepon Anda tidak akan membuat pilihan dengan tikus tepat. Anda akan menggunakan jari-jari Anda yang tidak tepat.

Hal lain yang perlu diingat adalah label link akan ingin istirahat melalui garis pada beberapa lebar. Di sini saya menggunakan ruang bebas-melanggar untuk mencegah hal itu, yang tidak selalu solusi yang ideal.

Contoh

Situs di bawah ini semua menggunakan pola atas-nav

Pola prioritas

Pola atas-nav bekerja dengan baik ketika Anda hanya memiliki beberapa link dalam navigasi Anda. Kadang-kadang Anda tidak bisa mengurangi jumlah item menu untuk empat atau lima meskipun, dan pola rusak. Itu berakhir memerlukan terlalu banyak ruang vertikal di layar terkecil.

Namun, meskipun Anda mungkin perlu lebih banyak link, ada kemungkinan beberapa lebih penting daripada yang lain. Itu di mana pola prioritas masuk. Idenya adalah untuk menentukan prioritas untuk link melalui kelas pada item menu.

Pada layar terluas semua link menunjukkan. Sebagai browser mendapat lebih kecil link prioritas terendah menjadi tersembunyi di balik link "lebih". Sebagai browser mendapat lebih kecil tingkat berikutnya link tersembunyi. Pada layar terkecil Anda menggunakan minimal ruang vertikal sampai pengunjung meminta "lebih" link.

Pendekatan: sekali lagi demo memiliki header sederhana. Saat ini mencakup lebih banyak link jadi kita akan tetap navigasi di bawah header sepanjang waktu. Kami memiliki 2 terpisah tantangan dalam transisi menu dari kecil untuk layar lebar.

Menampilkan dan menyembunyikan beberapa link secara default
Menampilkan dan menyembunyikan beberapa link ketika diminta

Langkah 1: HTML

Html ini mirip dengan pola atas-nav. Perbedaan adalah tambahan link dan link "lebih" dan "kurang" kita akan menggunakan untuk menampilkan dan menyembunyikan link lainnya. Juga termasuk adalah kelas prioritas (Alfa, beta, gamma) diberikan kepada setiap item daftar dan kelas Tampilkan-lebih dan Tampilkan-kurang.

<header>
  <div class="container">
    <img class="logo" src="images/logo.png" width="252" height="46" />

    <nav>
      <ul id="demo-nav">
        <li class="alpha"><a href="">Back to Post</a></li>
        <li class="alpha"><a href="">Top-Nav</a></li>
        <li class="current alpha"><a href="">Priority</a></li>
        <li class="alpha"><a href="">Select Menu</a></li>
        <li class="beta"><a href="">Select Menu JS</a></li>
        <li class="beta"><a href="">Beta Link</a></li>
        <li class="gamma"><a href="">Gamma Link</a></li>
        <li class="gamma"><a href="">Gamma Link</a></li>
        <li class="show-more"><a href="#more">More</a></li>
        <li class="show-less"><a href="#">Less</a></li>
      </ul>
    </nav>

  </div>
</header>

Langkah 2: Default CSS

Default styling identik dengan default styling untuk top-nav pola di atas sehingga saya tidak akan mengulanginya di sini. Pengecualian adalah kebutuhan untuk menampilkan dan menyembunyikan link. Ada 2 bagian untuk melakukan hal ini.

Pertama kami hanya ingin menunjukkan alpha link dan link "lebih" pada layar terkecil sehingga kita akan mengatur link lain untuk menampilkan: tidak ada.

1	#demo-nav li.beta,
2	#demo-nav li.gamma,
3	#demo-nav li.show-less
4	{display: none;}

Kedua, kita perlu untuk menunjukkan dan menyembunyikan link prioritas lainnya dan bertukar link "lebih" dan "kurang" ketika baik diklik. Untuk melakukan ini kita akan mengambil keuntungan dari: target pseudo pemilih. Jika Anda tidak akrab dengan selector ini sangat mirip dengan bagaimana jangkar bernama bekerja.

: Menargetkan pemilih pertandingan ketika hash di url dan id pada sebuah elemen yang sama. Dengan kata lain jika Anda memiliki url domain.com#more kemudian: target akan cocok setiap elemen dengan id = "lebih" ditambahkan.

Anda mungkin telah memperhatikan dalam html di atas href "lebih" link yang #more. Klik itu akan membawa kita ke halaman yang sama dengan hash #more ditambahkan. Apa yang tidak muncul di atas adalah elemen html pada halaman.

1	<html lang="en" id="more">

Mengklik lebih akan memungkinkan kita untuk target menggunakan tag html: target palsu pemilih dan akibatnya apa-apa yang terkandung dalam html tag. Kita dapat menunjukkan link tersembunyi dan menyembunyikan link "lebih" dengan berikut.

:target #demo-nav li.beta,
:target #demo-nav li.gamma,
:target #demo-nav li.show-less
  {display: inline;}
	
:target #demo-nav li.show-more {
  display: none;
}

Bila seseorang mengklik link "kurang" kita menghapus hash dan ini: penyeleksi target tidak lagi diterapkan.

Catatan: Sementara saya menambahkan id = "lebih" ke html tag, setiap tingkat tinggi elemen dalam DOM dapat bekerja. Hanya perlu menjadi sesuatu yang mengandung unsur-unsur yang Anda akhirnya ingin memilih.

Langkah 3: Media query

Seperti yang saya lakukan di atas-nav contoh saya punya beberapa media query mengatur mana semua itu perubahan adalah padding antara link. Saya juga beralih dari keterpusatan segalanya untuk mengambang logo dan navigasi bar di sebelah kiri, meskipun untuk pola ini aku terus navigasi di bawah logo.

Aku tidak akan hadir semua kode, meskipun Anda dapat melihatnya di halaman demo pola prioritas. Sebaliknya Mari kita fokus pada mengungkapkan link prioritas rendah yang cukup sederhana. Yang perlu kita lakukan adalah menunjukkan tingkat prioritas setiap link seperti cukup ruang untuk menunjukkan kepada mereka menjadi tersedia. Kami akan menunjukkan beta link pertama dan kemudian gamma.

@media screen and (min-width: 48em) {
  #demo-nav li.beta {display: inline;}
}

@media screen and (min-width: 75em) {
  #demo-nav li.gamma {display: inline;}

  #demo-nav li.show-more,
  :target #demo-nav li.show-less
  {display: none;}
}

Setelah semua tingkat prioritas 3 link dapat ditampilkan kita tidak lagi perlu untuk menunjukkan baik yang "kurang" atau "lebih" link sehingga kita akan mematikannya sepenuhnya.

Tips

Semua pola, pola prioritas adalah salah satu Anda mungkin akan menggunakan sedikit, tetapi dapat menjadi solusi yang baik dalam beberapa kasus. Ini memiliki beberapa kekurangan. Untuk satu: target pseudo pemilih tidak bekerja di IE8 dan di bawah ini. IE6 dan IE7 adalah mudah untuk menyerah, tapi saya pikir kita realistis perlu untuk mendukung IE8 sedikit lebih lama. Anda dapat mengganti: menargetkan metode di atas dengan solusi javascript untuk menampilkan dan menyembunyikan link untuk IE8 sebagai gantinya.

Masalah yang lebih besar adalah beralih antara lebih dan kurang link dapat agak menggelegar. Dalam contoh ini saya telah menempatkan link ini di ujung dan mengklik salah satu daun yang lain di lokasi yang berbeda. Mereka merasa seperti mereka hanya harus swap di tempat, tetapi mereka tidak.

Anda dapat mengimbangi dengan menempatkan link pertama dalam daftar atau dengan menggunakan beberapa pasang dari mereka yang selalu muncul setelah prioritas link yang ditampilkan dan sebelum orang-orang yang tersembunyi oleh default, tetapi tidak adalah penyelesaian yang paling elegan.

Contoh

Dua contoh berikut adalah demo, dengan yang terakhir menjadi contoh dari pola ini digunakan di situs hidup.

Pilih Menu pola

Pilih menu pola adalah cara lain untuk memecahkan masalah terlalu banyak link untuk layar kecil, namun ia melakukannya dengan mengubah daftar link ke kotak pilih. Keuntungan adalah kotak pilih akan mengambil lebih sedikit ruang vertikal. Kerugiannya adalah link navigasi global tersembunyi secara default.

Kelemahan lain adalah Anda perlu kode kedua jenis navigasi dalam html Anda karena tidak ada cara untuk membuat tampilan pilih seperti daftar atau sebaliknya. Ini berarti Anda akan perlu untuk memelihara menu 2, yang dapat menjadi sakit jika Anda memiliki lebih dari beberapa link. Aku akan mendapatkan versi lain dari pola ini dalam sedikit mana javascript yang digunakan untuk membuat salah satu dari menu.

Pendekatan: Kita akan mulai dengan dua menu html, salah satu daftar unordered yang sama yang kita digunakan untuk pola atas-nav dan satu sebuah pilih elemen. Kami akan transisi dari satu ke yang lain dalam media query sebagai ruang memungkinkan. Kita juga harus menambahkan sedikit javascript Jadi memilih pilihan ini membawa kita ke halaman baru.

Langkah 1: HTML

Tidak ada yang baru di versi daftar unordered menu. Apa yang baru adalah penambahan kotak pilih dan pilihan yang sesuai. Nilai-nilai href atribut yang akan dipindahkan ke nilai atribut dari elemen pilihan.

<div id="header">
  <div class="container">
    <img class="logo" src="images/logo.png" width="252" height="46" />

    <nav>
      <ul id="demo-nav">
        <li><a href="">Back to Post</a></li>
        <li><a href="top-nav.html">Top-Nav</a></li>
        <li><a href="priority.html">Priority</a></li>
        <li class="current"><a href="select.html">Select Menu</a></li>
        <li><a href="select-js.html">Select Menu JS</a></li>
      </ul>
    </nav>

    <select id="select-menu">
      <option value="" selected="selected">Select</option>
      <option value="">Back to Post</option>
      <option value="top-nav.html">Top-Nav</option>
      <option value="priority.html">Priority</option>
      <option value="select.html">Select Menu</option>
      <option value="select-js.html">Select Menu JS</option>
  </select>
  </div>
</div>

Langkah 2: Default CSS

Style standar umum adalah sama seperti yang saya telah ditunjukkan di atas sehingga saya tidak akan mengulanginya di sini. Layar terkecil saya memutuskan untuk drop menu pilih di bawah logo dan meninggalkannya terpusat. Memberikan lebar 75% tampaknya menjadi yang diperlukan.

1	#select-menu {
2	width: 75%;
3	}

Langkah 3: Media query

The css di pertanyaan media ini lagi cukup sederhana. Karena menu pilih tidak mengambil banyak ruang horisontal kita bisa memindahkannya atas dan ke kanan logo relatif cepat.

@media screen and (min-width: 30em) {
  .logo {float: left;}

  #select-menu {
    float: right;
    clear: none;
    width: 40%;
    margin-top: 2.25em;
  }

  #header {padding-bottom: 0; text-align: left;}
}

Perubahan utama adalah menyembunyikan menu pilih dan menampilkan menu daftar unordered, yang kita dapat dengan mudah melakukan melalui properti tampilan keduanya. Dalam hal aksesibilitas hal ini juga dianjurkan sebagai pembaca layar hanya akan perlu untuk memindai navigasi sekali. Dengan unordered list ditampilkan kami akan mengapung ke kanan dan menyesuaikan padding link.

@media screen and (min-width: 64em) {
  #select-menu {display: none;}

  #demo-nav {
    display: block;
    float: right;
  }
		
  #demo-nav a {padding: 1.25em 1.5em;}
  #demo-nav li:last-child a {padding-right: 0;}

}

Luar atas aku membuat satu perubahan tambahan memberikan link padding sedikit lebih pada layar yang lebih luas.

Langkah 4: sedikit Javascript

Pola ini membutuhkan javascript jumlah kecil sehingga pilihan dalam menu pilih akan membawa kita ke halaman baru. Di sini saya menggunakan sedikit kecil jQuery (setelah termasuk jQuery di kepala dokumen).

$(function() {
  $("div select").change(function() {
    window.location = $(this).find("option:selected").val();
  });
});

Contoh

Situs di bawah ini semua menggunakan pola Pilih menu.

Pilih Menu JS

Saya sebutkan di atas bahwa Anda bisa menggunakan javascript untuk membuat menu pilih sehingga Anda tidak perlu untuk mempertahankan dua set link yang identik. Sekali lagi saya akan menggunakan jQuery untuk membuat menu pilih dari daftar unordered dengan beberapa kode yang dipinjam dari Chris Coyier.

Pertama kami menciptakan pilih dan menambahkan elemen nav kami. Blok berikutnya menciptakan "Pilih" opsi yang kami akan menunjukkan secara default. Ini tidak benar-benar diperlukan. Sebaliknya Anda mungkin membiarkan Anda item menu pertama yang menunjukkan, atau mungkin Anda akan menambahkan sedikit kode sehingga pilihan untuk mana laman yang Anda buka yang dipilih secara default.

Blok terakhir meraih setiap link dari daftar unordered dan menambahkan url dan teks pada bagian yang sesuai dari elemen pilihan.

$(function() {
  // Create the dropdown base
  $("<select id='select-menu'/>").appendTo("nav");
	
  // Create default option "Select"
  $("<option />", {
    "selected"  :  "selected",
    "value"        :  "",
    "text"           :  "Select"
  }).appendTo("nav select");
	
  // Populate dropdown with menu items
  $("nav a").each(function() {
    var el = $(this);
    $("<option />", {
    "value"  :  el.attr("href"),
    "text"     :  el.text()
  }).appendTo("nav select");
});

Akhirnya kita berakhir dengan jQuery sama seperti di atas untuk memastikan pilihan yang membawa pengunjung ke halaman mereka dipilih.

1	$("nav select").change(function() {
2	window.location = $(this).find("option:selected").val();
3	});
4	});

Ringkasan

Berikut adalah tiga dari pola umum yang digunakan untuk menangani navigasi responsif.

Pola atas-nav bekerja paling baik bila Anda hanya memiliki beberapa link dan tidak perlu banyak selain perubahan apa pun gaya Anda memutuskan untuk membuat.

Pola prioritas yang dapat digunakan ketika Anda memiliki lebih dari beberapa link. Itu menyembunyikan berbagai tingkat prioritas link didasarkan pada tersedia space dan matikan tampilan link melalui: target palsu pemilih.

Pilih menu pola mengubah daftar unordered menu ke memilih menu sehingga tidak untuk mengambil apapun ruang ekstra vertikal.

Ada pola lain di luar ini dan kita akan melihat mereka di masa depan posting dalam seri ini. Terima kasih untuk membaca!