Membuat Multi Level Menu Horizontal

    Caranya seperti berikut:
    1. Log in dengan account blogger anda.
    2. Masuk ke Rancangan >> Edit HTML
    3. Cari kode:

    <head>
    4. Tambahkan kode berikut dibawah kode nomor 3:
    <!--[if lte IE 7]>
    <style type="text/css">
    html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
    </style>
    <![endif]-->

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
    <script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>
    5. Selanjutnya cari kode berikut:
    ]]></b:skin>
    6. Tambahkan kode berikut dibawah kode nomor 5.
    .jqueryslidemenu{
    font: bold 13px Verdana;
    background: #800000;
    width:100%;
    float:left
    }

    .jqueryslidemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    /*Top level list items*/
    .jqueryslidemenu ul li{
    position: relative;
    display: inline;
    float: left;
    }

    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    display: block;
    background: #800000; /*background of tabs (default state)*/
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    text-decoration: none;
    }

    * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    }

    .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
    color: white;
    }

    .jqueryslidemenu ul li a:hover{
    background:#B30000; /*tab link background during hover state*/
    color: white;
    }

    /*1st sub level menu*/
    .jqueryslidemenu ul li ul{
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    background:#B30000;
    }

    /*Sub level menu list items (undo style from Top level List Items)*/
    .jqueryslidemenu ul li ul li{
    display: list-item;
    float: none;
    }

    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .jqueryslidemenu ul li ul li ul{
    top: 0;
    }

    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 13px Verdana;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
    }

    .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
    background: #eff9ff;
    color: black;
    }

    /* ######### CSS classes applied to down and right arrow images ######### */

    .downarrowclass{
    position: absolute;
    top: 12px;
    right: 7px;
    }

    .rightarrowclass{
    position: absolute;
    top: 6px;
    right: 5px;
    }
    #footheader {
    width: 100%;
    float:left;
    margin:0 0 0;
    padding:0 0 0;
    position:relative;
    }
    7. Cari kode:
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
    </b:section>
    </div>
    NB:Fokus saja dengan kode yang berwarna merah.
    8. Taruh kode berikut dibawah kode nomor 7:
    <div id='footheader'>
    <b:section class='footheader' id='footheader' preferred='yes'>
    </b:section>
    </div>
    9. Klik save
    10. Lalu tuju ke Rancangan >> Edit Laman >> Add gadget(dibagian header) >> HTML/Javascript
    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="/">Home</a></li>
    <li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
    <li><a href="#">Kategori</a>
    <ul>
    <li><a href="#">Sub Kategori 1</a></li>
    <li><a href="#">Sub Kategori 2</a></li>
    </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
    <ul>
    <li><a href="#">Sub Item 3.1.1.1</a></li>
    <li><a href="#">Sub Item 3.1.1.2</a></li>
    </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
    </ul>
    <br style="clear: left" />
    </div>
    NB: Sesuaikan dengan kebutuhan anda.
    11. Klik save.


    0 komentar :

    Posting Komentar

    Langganan: Posting Komentar ( Atom )