Menu Horizontal Dengan Rata Kanan Kiri atau Tengah

Bagi anda penganut kesederhanaan dalam membuat sebuah menu tentunya akan menyukai menu sederhana ini, karena penggunaan script cssnya sedikit dan hasilnya sederhana dari segi tampilannya, walaupun begitu menu sederhana ini bisa kita ubah kerataanya sesuai kebutuhan, baik itu rata kanan, kiri ataupun pada posisi tengah.

Menampilkan sebuah menu dalam sebuah weblog sangatlah utama, karena merupakan sebuah navigasi untuk menyusuri seruluh isi weblog tersebut, baik itu sebuah menu navigasi sederhana atau pun menu navigasi wahhh... keren, itu merupakan sebuah pilihan bagi pemiliknya.

dalam hal ini saya akan bagikan menu navigasi yang sederhana namun bisa mewakili keseluruhan ini weblog kalian dan menu ini bisa diubah kerataannya sesuai keinginan, baik itu rata kanan, kiri ataupun tengah seperti gambar dibawah ini.

Menu Horizontal Rata Tengah

Sepertinya penggunaan menu navigasi yang dengan rata tengah jarang dipergunakan, walaupun begitu saya akan tetap bagikan bagaimana caranya membuat menu navigasi berada pada posisi rata tengah.

Pada umumnya menu navigasi berada pada rata kanan atau rata kiri, namun begitu menu navigasi dengan rata tengah tidak menutup kemungkinan untuk dipergunakan.

Menu navagasi yang saya bagikan sangat sederhana dari penggunaan css nya sehingga menghasilkan tampilan yang sederhana pula, untuk memberikan tampilan yang lebih sesuai dengan selera bisa menambahkan css untuk menu navigasi rata tengah ini.

Scriptnya seperti ini:

HTML

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Clients</a></li>
  <li><a href="#">Contact</a></li>
</ul>

dan css nya pun sederhana seperti ini:

CSS

.menu{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.menu li{
    display:inline;
}
.menu a{
    display:inline-block;
    padding:10px;
    color:black;
}

Seperti saya sebutkan diatas, untuk menyesuaikan tampilan bisa tambah atau kurangi css tersebut.

Menu Horizontal Rata Kanan

Masih menggunakan script css tersebut diatas untuk membuat menu horizontal rata kanan, kita hanya mengganti nilai center menjadi right seperti ini:

.menu{
    text-align:right;
}

Menu Horizontal Rata Kiri

Seperti menu horizontal rata kanan, untuk membuat menjadi rata kiri, kita hanya mengganti nilai center atau right menjadi left, seperti ini:

.menu{
    text-align:left;
}

Untuk lebih jelasnya seperti apa bentuk tampilan menu horizontal sederhana ini, bisa melihat melalui gambar diatas.

Semoga menu horizontal rata kanan kiri atau tengah ini bisa dipergunakan dan bisa menjadi salah satu pilihan yang bisa dipergunakan di dalam template blog.

Akhir kata semoga menu navigasi ini bisa bermanfaat.