Cara Membuat Menu Horizontal

Baca Juga

Menu Horizontal

Bismillah... setelah beberapa hari saya absen dari dunia online, kini saya akan kembali lagi share tentang tutorial blog, css, Design, template dll.., maklum banyak pekerjaan offline yang harus di kerjakan. he he. sekarang saya akan sedikit membahas tentang CSS, yaitu cara membuat menu/navigasi Horizontal dengan CSS, kenapa menggunkan CSS?? karena sekarang sudah bnyak sekali cara membuat menu dengan berbagi cara misalkan dengan JQuery dan lain sebaginya,

Oke sekarang saya akan mulai dulu dari dasar cara membuat menu dengan menggunkan CSS, untuk membuat menu navigasi caranya mudah sobat tinggal mengahaplkan beberapa tag diantaranya tag ul dan tag li, oke sekarang kita langusung saja yu, pertama sobat buat script menggunkan tag ul dan li contonya penulisannya seperti di bawah

<ul></ul>
<li></li>

• <ul>: Adalah tag pembuka yang kepanjangannya Unordered List
• </ul>: Adalah tag penutup dari dari tag ul
• <li> : Adalah tag pembuka yang kepanjangannya List Item
• </li>: Adalah tag penutup dari dari tag ul

Cara penulisannya tag li harus selalu di dalam tag ul untuk contoh di bawah

<ul>
<li>text/images/etc</li>
<li>text/images/etc</li>
</ul>

Oke mungkin itu seputar tag ul dan tag li, sekarang kita lanjut ke cara membuat menu horizontal pertama sobat buat tag seperti di bawah

<ul id="menu">
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="Products">Products</a></li>
    <li><a href="#" title="Services">Services</a></li>
    <li><a href="#" title="Support">Support</a></li>
    <li><a href="#" title="FAQ">FAQ</a></li>
</ul>

Setelah itu sobat beri CSS di bawah ini

Kode CSS Menu Horizontal

<style type="text/css">
    #menu {
    background: #333;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
#menu li {
    float: left;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
#menu a {
    background: #333 ;
    color: #ccc;
    display: block;
    float: left;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
}
#menu a:hover {
    background: #2580a2 ;
    color: #fff;
    padding-bottom: 8px;
</style>

Silahkan sobat sesuaikan backgroun warnanya seseuai dengan style menu yang sobat mau, Oke sobat mungkin itu sedikit tutorial Cara membuat menu Horizontal semoga bermanfaat.. Good Luck Happi Blogging