Membuat Menu Navigasi Dengan Struktur Css

By AchmadVm

Tag Blogging Css Tutorial

• Share
• Twitter
• Delicious
• Facebook
• Digg
• Reddit

Horisontal CSS Navigasi Menu

Jika Anda telah mengetahui Tutorial ini tolong tutup Halaman Blog ini,bila Anda Masih belum tahu,silahkan di Gunakan tutorial berikut, Tentunya anda sudah tahu bahwa salah satu bagian dari web/blog standart melibatkan tandai-up (HTML atau XHTML) untuk tujuan bukan semata-mata untuk gaya halaman. Ini termasuk bagian dari daftar untuk menggunakan kontrol navigasi, Kontrol Navigasi Inilah yg membuat pengunjung blog anda lebih mudah Menikmati Kontenweb/Blog anda . Disini akan Dijelaskan mengapa dan bagaimana kami menggunakan Navbar Menu.

Mari kita mengambil dasar2 langsung dari Tutorial Navigasi Berikut

<ul> <li><a href="me.html">About Me</a></li> <li><a href="you.html">For You</a></li> <li><a href="site.html">Site Info</a></li> <li><a href="links.html">Links</a></li> </ul>

Jika kami Tambahkan Script Berikut:

<ul id="navigation"> [...] [...] </ul>

..kita dapat mulai Customize dengan CSS, mulai dengan penghapusan default Css.

#navigation { list-style: none; }

Kita juga ingin mengatur margin dan padding ke nol. Ini akan menghapus default margin kiri dari semua browser.

margin-bottom: #;

(Jika anda menginginkan sebuah jurang di bawah menu setelah itu, hal ini dapat diatur dengan menggunakan

margin-bottom: #;

tetapi harus ditempatkan di bawah nol nilai margin untuk jeram untuk bekerja.) Sekarang kami CSS:

#navigation { list-style: none; margin: 0; padding: 0; }

Navigasi standar kami harus seperti ini sekarang:

• About Me
• For You
• Site Info
• Links

Langkah selanjutnya adalah mendapatkan navigasi berturut-turut. Ini dapat dilakukan dengan cara yang mudah , yang ditugaskan untuk setiap daftar item:

#navigation { list-style: none; margin: 0; padding: 0; } #navigation li { float: left; }

Navigasi kami sekarang akan berjalan ke dalam satu sama lain dalam satu baris. Ini tidak baik - kita perlu link menonjol dari satu sama lain. Mereka membutuhkan sedikit warna, dan ada jarak antara satu sama lain. mereka harus berubah menjadi unsur blok dengan sedikit CSS. Let's spice things up:

#navigation { list-style: none; margin: 0; padding: 0; } #navigation li { float: left; } #navigation li a { display: block; background: yellow; width: 150px; }

sekarang harus terlihat seperti ini:

Terakhir, kita hanya perlu membuang default link berwarna biru, dan menambahkan sesuatu ke Link Anda, sehingga hover berwarna default,seperti pada link serach pada search engine. : Anda juga dapat menyesuaikan teks ke tengah setiap 'tombol' agar menu tampak lebih bahkan:

#navigation { list-style: none; margin: 0; padding: 0; } #navigation li { float: left; } #navigation li a { display: block; background: yellow; width: 150px; text-align: center; color: red; padding: 3px 0; } #navigation li a:hover { background: red; color: yellow; }

Tampilan AKhir:

Mencobanya sendiri, dan Customize untuk Anda sukai!

Catatan Penting: jika Anda tidak horisontal menu sebagai lebar sebagai konten, Anda harus menambahkan 'jelas div' di bawah menu ini untuk menghentikan teks berjalan ke dalamnya. This can be achieved simply by adding:

<div style="clear: left;">&nbsp;</div>

Hal ini dapat dilakukan hanya dengan menambahkan:

<div style="clear: left;">&nbsp;</div>

langsung di bawah menu HTML.

AchmadVM is an indonesian programmer, blogger, Windows user, founder of blogger-creative.blogspot.com. He lives in Sidoarjo, Indonesia. Follow Creative on Twitter or take a look at his Facebook Profile.

Share this post

Share on Facebook Share on Twitter Share on StumbleUpon Share on Delicious Share on Reddit

Share on Digg Share on NegaraKu Share on Technorati Subscribe to Feeds RSS Email to AchmadVm