Demo: Bar Navigasi
Bar navigasi
Memiliki navigasi yang mudah digunakan adalah penting untuk setiap situs web.
Dengan CSS Anda dapat mengubah menu HTML membosankan menjadi bar navigasi tampan.
Navigasi Bar = Daftar Links
Sebuah bar navigasi perlu HTML standar sebagai basis.
Dalam contoh kita, kita akan membangun navigasi dari daftar HTML standar.
Sebuah bar navigasi pada dasarnya adalah daftar link, sehingga menggunakan <ul> dan <li> elemen masuk akal:
Contoh
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Cobalah sendiri " Sekarang mari kita menghapus peluru dan margin dan padding dari daftar:
Contoh menjelaskan:
-
list-style-type: none;- Menghapus peluru. Sebuah bar navigasi tidak perlu daftar penanda - Set
margin: 0;danpadding: 0;untuk menghapus pengaturan browser default
Kode dalam contoh di atas adalah kode standar yang digunakan di kedua vertikal, dan horisontal bar navigasi.
Vertikal Navigation Bar
Untuk membangun sebuah bar navigasi vertikal, Anda dapat gaya <a> elemen dalam daftar, selain kode di atas:
Contoh menjelaskan:
-
display: block;- Menampilkan link sebagai elemen blok membuat seluruh tautan daerah yang dapat diklik (tidak hanya teks), dan memungkinkan kita untuk menentukan width (dan padding, margin, height , dll jika Anda ingin) -
width: 60px;- Blok elemen mengambil lebar penuh yang tersedia secara default. Kami ingin menentukan 60 piksel lebar
Anda juga dapat mengatur lebar <ul> , dan menghapus lebar <a> , karena mereka akan mengambil lebar penuh yang tersedia ketika ditampilkan sebagai elemen blok. Ini akan menghasilkan hasil yang sama seperti contoh sebelumnya:
Contoh
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
} Cobalah sendiri " Vertikal Navigation Bar Contoh
Buat navigasi bar vertikal dasar dengan warna latar belakang abu-abu dan mengubah warna latar belakang dari link ketika pengguna menggerakkan mouse di atas mereka:
Contoh
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} Cobalah sendiri " Active / Current navigasi Link
Tambahkan "aktif" kelas untuk link saat ini untuk membiarkan pengguna mengetahui halaman yang dia / dia di:
Pusat Links & Tambahkan Borders
Tambahkan text-align:center untuk <li> atau <a> ke pusat link.
Tambahkan border properti untuk <ul> menambahkan perbatasan di sekitar navbar. Jika Anda juga ingin perbatasan dalam navbar, menambahkan border-bottom untuk semua <li> elemen, kecuali untuk yang terakhir:
Contoh
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} Cobalah sendiri " Tinggi penuh Tetap Vertikal Navbar
Buat tinggi penuh, "sticky" navigasi di sebelah:
Contoh
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
} Cobalah sendiri " Catatan: Contoh ini mungkin tidak bekerja dengan baik pada perangkat mobile.
Horizontal Navigasi Bar
Ada dua cara untuk membuat sebuah bar navigasi horizontal. Menggunakaninline atau mengambangdaftar item.
Daftar Produk inline
Salah satu cara untuk membangun sebuah bar navigasi horisontal adalah untuk menentukan <li> elemen sebagai inline, di samping "standard" kode di atas:
Contoh menjelaskan:
-
display: inline;- Secara default, <li> elemen adalah elemen blok. Di sini, kita menghapus baris istirahat sebelum dan setelah setiap item daftar, untuk menampilkan mereka pada satu baris
Mengambang Daftar Produk
Cara lain untuk menciptakan sebuah bar navigasi horizontal adalah untuk mengapung <li> elemen, dan menentukan tata letak untuk link navigasi:
Contoh
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
} Cobalah sendiri " Contoh menjelaskan:
-
float: left;- menggunakan pelampung untuk mendapatkan blok elemen meluncur di samping satu sama lain -
display: block;- Menampilkan link sebagai elemen blok membuat seluruh tautan daerah yang dapat diklik (tidak hanya teks), dan memungkinkan kita untuk menentukan padding (dan height, width, margins , dll jika Anda ingin) -
padding: 8px;- Sejak elemen blok mengambil lebar penuh yang tersedia, mereka tidak bisa mengapung di samping satu sama lain. Oleh karena itu, tentukan beberapa padding untuk membuat mereka terlihat baik -
background-color: #dddddd;- Tambahkan abu-abu latar belakang warna untuk masing-masing elemen
Tip: Tambahkan background-warna <ul> bukannya setiap <a> elemen jika Anda ingin warna latar belakang full-width:
Horizontal Navigasi Bar Contoh
Buat bar navigasi horisontal dasar dengan warna latar belakang gelap dan mengubah warna latar belakang dari link ketika pengguna menggerakkan mouse di atas mereka:
Contoh
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
} Cobalah sendiri " Active / Current navigasi Link
Tambahkan "active" kelas untuk link saat ini untuk membiarkan pengguna mengetahui halaman yang dia / dia di:
Link kanan Align
Link kanan-align oleh mengambang item daftar ke kanan ( float:right; ):
Contoh
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul> Cobalah sendiri " pembagi perbatasan
Tambahkan border-right properti untuk <li> untuk membuat pemisah link:
Contoh
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
} Cobalah sendiri " Tetap Navigation Bar
Membuat navigasi bar tinggal di bagian atas atau bawah halaman, bahkan ketika pengguna gulungan halaman:
Catatan: Contoh-contoh ini mungkin tidak bekerja dengan baik pada perangkat mobile.
Gray Horizontal Navbar
Sebuah contoh dari bar navigasi horisontal abu-abu dengan perbatasan abu-abu tipis:
Contoh
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Cobalah sendiri " 
Contoh lebih
Topnav responsif
Cara menggunakan CSS3 pertanyaan media untuk membuat navigasi atas responsif.
Sidenav responsif
Cara menggunakan CSS3 pertanyaan media untuk membuat navigasi di sebelah responsif.
dropdown Navbar
Cara menambahkan menu dropdown di dalam sebuah bar navigasi.