Cara Membuat Menu Horisontal di Blogger-Blogspot

Cara Membuat Menu Horisontal di Blogger-Blogspot
Membuat menu horisontal tidaklah begitu rumit, yang penting kita tahu caranya. Pada contoh di bawah ini saya akan mempraktekan cara membuat menu horisontal dengan detail yang mudah di pahami. Oke, mari kita mulai dengan kode css nya dahulu agar lebih gampang dimengerti dan di save. Pada contoh css saya ambil dari menu navigasi di blog ini yang terbagi dari dua bua menu horisontal :
  1. Untuk Menu horisontal yang pertama dengan kode css nya seperti di bawah ini :
    /* MENU PERTAMA */

    #kolomatas {
    position: center;
    clear:both;
    margin: 5px 5px 5px 5px;
    color:#000000;
    float: left;
    background:#454545;
    }
    #kolomatas h2 {
    padding: 5px 0 2px 0;
    margin: 0 0 10px 0;
    color:#ff5a00;
    font-size: 12px;
    letter-spacing: -1px;
    border-bottom: 1px solid #fff;
    }
    #kolomatas ul {
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-transform: uppercase;
    }
    #kolomatas ul li {
    float: left;
    list-style: none outside none;
    }
    #kolomatas ul li a,#kolomatas ul li a:visited {
    background-color: #333333;
    border-left: 1px solid #444444;
    border-right: 1px solid #222222;
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    line-height: 14px;
    margin: 0;
    outline: medium none;
    padding: 10px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 2px #000000;
    vertical-align: top;
    }
    #kolomatas li a:hover {
    background-color: #1C1C1C;
    border-left: 1px solid #444444;
    border-right: 1px solid #222222;
    color: #FF6C24;
    display: block;
    font-weight: bold;
    line-height: 14px;
    margin: 0;
    outline: medium none;
    padding: 10px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 2px #000000;
    vertical-align: top;
    }

    #kolomatas ul li a.current, #menukategori ul li a.current:visited, #menukategori ul li a.current:hover {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #FFFFFF;
    margin: 4px;
    padding: 7px;
    }
    #kolomatas-left {
    width: 900px; /* sesuaikan dengan lebar halaman */
    color:#000000;
    float: left;
    background:#454545;
    }
    #kolomatas-right {
    width: 250px;
    margin: 5px 0px 5px 10px;
    color:#000000;
    float: right;
    background:#fff;
    }
    Lalu kode htmlnya sebagai berikut :
    <div id='kolomatas'>
    <div id='kolomatas-left'>
    <ul id='kolomatas'>
    <li><a href='http://admin-belajar.blogspot.com/search/label/seo'>S E O</a></li>
    <li><a href='http://admin-belajar.blogspot.com/search/label/trik'>Trik Blog</a></li>
    <li><a href='http://admin-belajar.blogspot.com/search/label/download'>DOWNLOAD</a></li>
    </ul>
    </div>
    </div>
    Hasilnya seperti ini:
  2. Dan untuk Menu horisontal yang kedua yang saya beri nama MENU ADMIN dengan kode css seperti di bawah ini :

    /* MENU ADMIN */
    #menuadmin {width: 100%; margin-top: -0.3em;margin-left: -0.1em;margin-right: -0.2em;float:left; background-color:#333}
    #menunavadmin { margin: 0;padding: 0; }
    #menunavadmin ul {float: left;list-style: none;margin: 0;padding: 0; }
    #menunavadmin li {list-style: none;margin: 0px;padding: 0; }
    #menunavadmin li a,#menunavadmin li a:link,#menunavadmin li a:visited {height: 22px;color:#FFF;display: block;font-size: 13px;text-decoration: none;margin: 0;padding:10px 13px 9px 13px;border-right: 1px solid #000; border-left: 1px solid #666;}
    #menunavadmin li a:hover,#menunavadmin li a:active {color: #D00; margin: 0;text-decoration: none;background:#444;}
    #menunavadmin li li a, #nav li li a:link,#menunavadmin li li a:visited { background:#444;min-width: 150px;color: #333333;font-size: 14px;font-weight: normal;float: none; margin: 0; padding: 5px 10px;font-weight:bold; font-family:arial;box-shadow: 0px 3px 3px rgba(0,0,0,0.8);-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);text-align:left; }
    #menunavadmin li li a:hover,#menunavadmin li li a:active {background: #CCC;color: #B00;}
    #menunavadmin li { float: left;padding: 0; border-bottom:1px solid #000; border-top:1px solid #777; }
    #menunavadmin li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin:0;padding: 0;border-top:1px solid #242424;}
    #menunavadmin li ul a {width: 140px; }
    #menunavadmin li ul ul {margin: -41.5px 0 0 176px;border:none;}
    #menunavadmin li:hover ul ul,#menunavadmin li:hover ul ul ul, #menunavadmin li.sfhover ul ul,#menunavadmin li.sfhover ul ul ul {left: -999em; }
    #menunavadmin li:hover ul, #menunavadmin li li:hover ul,#menunavadmin li li li:hover ul, #menunavadmin li.sfhover ul,#menunavadmin li li.sfhover ul,#menunavadmin li li li.sfhover ul {left: auto; }
    #menunavadmin li:hover, #menunavadmin li.sfhover { position: static; }
    Nah untuk kode html nya sebagai berikut :
    <div id='menuadmin'>

    <ul id='menunavadmin'>
    <li><a href='/'>Home</a></li>
    <li><a href='#yourlink'>Menu 1</a>
    <ul>
    <li><a href='#yourlink'>Menu 1.1</a>
    <ul>
    <li><a href='#yourlink'>Menu 1.1.1</a></li>
    <li><a href='#yourlink'>Menu 1.1.2</a></li>
    <li><a href='#yourlink'>Menu 1.1.3</a></li>
    <li><a href='#yourlink'>Menu 1.1.4</a></li>
    </ul>
    </li>
    <li><a href='#yourlink'>Menu 1.2</a>
    <ul>
    <li><a href='#yourlink'>Menu 1.2.1</a></li>
    <li><a href='#yourlink'>Menu 1.2.2</a></li>
    <li><a href='#yourlink'>Menu 1.2.3</a></li>
    <li><a href='#yourlink'>Menu 1.2.4</a></li>
    </ul>
    </li>
    <li><a href='#yourlink'>Menu 1.3</a>
    <ul>
    <li><a href='#yourlink'>Menu 1.3.1</a></li>
    <li><a href='#yourlink'>Menu 1.3.2</a></li>
    <li><a href='#yourlink'>Menu 1.3.3</a></li>
    <li><a href='#yourlink'>Menu 1.3.4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    </ul></div>
    Hasilnya seperti ini seperti tampilan menu dia atas.
Nah mudah bukan? kamu tinggal memodifikasi sesuai kebutuhan. Oke deh, mudah-mudahan artikel ini bermanfaat untuk kita semua dan untuk tanya jawab jangan lupa menggunakan kolom komentar... sekian dulu ya,,
jangan lupa kalau mengcopy artikel ini harap cantumkan sumber: http://admin-belajar.blogspot.com

Comments

Popular posts from this blog

KARYA NYATA INOVASI PEMBELAJARAN PEMBUATAN DESAIN GRAFIS PERIKLANAN MENGGUNAKAN TEKNIK POP ART

Verifikasi Adsense Lewat Triod

20 Top Website Tempat Upload File SWF dan Flash