Membuat menu navigasi tanpa dropdown `

apakah anda ingin membuat sebuah menu navigasi horizontal , vertical tanpa dropdown untuk blog .. apa juga menggunakan CSS ..?

---

di hari ini mastony akan membahas bagaimana cara membuat menu navigasi Horisontal tanpa dropdown ( menu Navigasi tanpa anak menu/sub menu ) di blog,Fungsi dari  membuat Menu Navigasi adalah untuk mempermudah pengunjung/visitor untuk mengetahui elemen - elemen blog kita,untuk membuat Menu Navigasi ini Sebenarnya tidak lain seperti membuat menu lainnya seperti Membuat Permalink dan sebagainya.kita hanya menyelipkan kode css kedalam template blog dan pemanggilan id (#)  di dalam edit elemen,untuk pemanggilan id css diperlukan tag <ul class="contoh">... </ul> <ul id="contoh">...</ul> Berikut langkah - langkahnya :Cara membuat Navigasi tanpa dropdown.

menu Navigasi horizontal

---

untuk membuat sebuah menu navigasi horizontal anda harus mengtur lebar ( width ) dan tinggi( height ) sebuah box / element blog anda dan menempel ke kiri ( float:left )
berikut ini contoh menu navigasi horizontal :

• rotate
• background repeat
• background origin

untuk mengatur besarnya menu ganti pada padding li a berikut ini aturan Css dan html nya .
following CSS

<style>.navigation{width:100%;height:auto;margin:0;padding:0;list-style:none;font-weight:bold;font-family:Arial,Verdana;font-size:13px;}
.navigation li{margin:o;list-style:none;display:block;position:relative;float:left;}
.navigation li a{display:block;color:#fff;background:#444444;height:25px;padding:15px;text-align:center;text-transform:capitalize;text-shadow:-1px -1px 1px #000;white-space:nowrap;}
.navigation li a:hover{background:darkGreen;text-shadow:-1px -1px 1px #000,0 0 4px#fff;;text-decoration:none;}</style>

Html

<ul class="navigation">
<li><a href="http://id-mastony.blogspot.com/2013/01/css3-transform-rotate-gambar.html">rotate</a></li>
<li><a href="http://id-mastony.blogspot.com/2013/01/css-background-gambar-repeat.html">background repeat</a></li>
<li><a href="http://id-mastony.blogspot.com/2013/01/css-background-gambar-original.html">background origin</a></li>
</ul>

menu navigasi vertical

---

anda juga dapat mengatur / menganti element menjadi vertical dengan mengatur lebar ( width ) dan tinggi ( height ) element / box dan ubah menjadi menempel ke kiri dan berada dibawah element lainnya ( clear:left )yang akan anda buat nantinya .
berikut ini contoh menu navigasi vertical

• rotate
• background repeat
• background origin

dan hasil dari pada menu navigasi di atas sebagai berikut ini :

Following CSS

<style>.navigation2{width:180px;margin:0;padding:0;list-style:none;}
.navigation2 li{margin:0;list-style:none;display:block;clear:left;}
.navigation2 li a{height:30px;display:block;color:#fff;background:#444444;margin:0;padding:12px;text-align:left;font:normal 13px arial;text-transform:uppercase;}
.navigation2 li a:hover,.navigation2 li:hover{background:darkGreen;text-shadow:-1px -1px 1px #000;text-decoration:none;}</style>

HTML

<ul class="navigation2">
<li><a href="http://id-mastony.blogspot.com/2013/01/css3-transform-rotate-gambar.html">rotate</a></li>
<li><a href="http://id-mastony.blogspot.com/2013/01/css-background-gambar-repeat.html">background repeat</a></li>
<li><a href="http://id-mastony.blogspot.com/2013/01/css-background-gambar-original.html">background origin</a></li>
</ul>

menu navigasi menggunakan efek transition

anda juga dapat menggabungkan dengan efek transition seperti berikut ini

• Efek gradient
• efek shadow
• efek transparant

selengkapnya anda bisa baca disini tentang efek transition Element bergerak transition

untuk memberi efek background gradasi / gradient anda bisa baca disini Efek gradient dan mungkin anda memerlukan css border silahkan baca disini Css nama nama border kalau untuk warna background anda bisa sesuaikan dengan name color atau HEX color
Catatan : ganti  dengan url diatas dengan url milik sobat,nah demikian cara membuat menu navigasi di blog semoga bermanfaat Happy blogging....

Terima kasih Anda telah membaca Artikel mengenai Membuat menu navigasi tanpa dropdown dan Kata kunci untuk Artikel ini yaitu Membuat menu navigasi tanpa dropdown