Minggu, 22 April 2012

Membuat Menu Float dengan SubMenu

0 komentar




  1. Masuk Ke Blogger
  2. Klik Tab Rancangan
  3. Klik Edit HTML
  4. Masukin CSS ini sebelum kode ]]></b:skin>
    #floatnav{
    font-family:Comic Sans Ms;
    padding:2px;
    z-index:10000;
    position:fixed;
    bottom:0px;
    right:0px;
    }
    a:hover{-webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out;}
    .nav-container-outer{
    padding: 0px;
    height: 40px;
    }
    .float-left{
    float: left;
    }
    .float-right{
    float: right;
    }
    .nav-container .divider{
    display:block;
    font-size:1px;
    border-width:0px;
    border-style:solid;
    }
    .nav-container .divider-vert{
    float:left;
    width:0px;
    display: none;
    }
    .nav-container .item-secondary-title{
    display:block;
    cursor:default;
    white-space:nowrap;
    }
    .nav-container{
    position:relative;
    margin: 0 auto;
    }
    .nav-container a, .nav-container li{
    float:left;
    display:block;
    white-space:nowrap;
    }
    .nav-container div a, .nav-container ul a, .nav-container ul li{
    float:none;
    }
    .nav-container ul{
    left:10000px;
    position:absolute;
    }
    .nav-container, .nav-container ul{
    list-style:none;
    padding:0px;
    margin:0px;
    }
    .nav-container li a{
    float:none
    }
    .nav-container li{
    position:relative;
    }
    .nav-container ul{
    z-index:-10;
    }
    .nav-container ul ul{
    z-index:-20;
    }
    .nav-container ul ul ul{
    z-index:-30;
    }
    .nav-container ul ul ul ul{
    z-index:-40;
    }
    .nav-container ul ul ul ul ul{
    z-index:-50;
    }
    li:hover>ul{
    left:auto;
    }
    #nav-container ul {
    bottom:100%;
    }
    #nav-container ul li:hover>ul{
    bottom:0px;
    left:100%;
    }

    /*^'^ Primary Items ^'^*/
    #nav-container a{
    padding:7px 17px 7px 18px;
    margin: 10px 0px 0px 0px;
    color: #FFFFFF;
    font-family: Comic Sans MS, Arial, sans-serif, Helvetica;
    font-size:14px;
    text-decoration:none;
    font-weight: bold;
    background:#000;
    background-repeat: no-repeat;
    background-position: top;
    border-radius:8px;
    border:2px dashed #ff0000;
    }

    #nav-container a:hover{
    color: #ff0000;
    background: #fff;
    background-repeat: no-repeat;
    background-position: center;
    border-radius:8px;
    border:2px solid #ff0000;
    }

    /*^'^ Secondary Items Container ^'^*/
    #nav-container div, #nav-container ul{
    padding:10px 4px 10px 4px;
    margin:0px 0px 0px 0px;
    background: #000;
    background-repeat: repeat-x;
    background-color: #FF0000;
    border-radius: 8px;
    border:3px solid #000;
    }
    #nav-container div a, #nav-container ul a{
    margin: 0 5px 0 0;
    padding: 6px 13px;
    background-color: #ff0000;
    background-repeat: no-repeat;
    background-position: 0px 22px;
    font-size:11px;
    border-width:0px;
    border-style:none;
    width: 100px;
    }
    #nav-container div a:hover, #nav-container ul a:hover{
    background-color: #ff0000;
    background-repeat: no-repeat;
    color:#000;
    }
    #nav-container .item-secondary-title{
    cursor:default;
    padding:4px 0px 3px 7px;
    color: #000;
    font-family: Comic Sans MS, Trebuchet MS, Arial, sans-serif, Helvetica;
    font-size:11px;
    /* background: #fff
    background-repeat: no-repeat;
    font-weight:bold;
    }
    #nav-container .divider-horiz{
    border-bottom-width:2px;
    margin:5px 5px;
    border-color: #fff;
    }
    #nav-container .divider-vert{
    border-left-width:1px;
    height:15px;
    margin:4px 2px 0px 2px;
    border-color:#ff0000;
    }
  1. Setelah itu masuk ke tamah widget, lalu klik HTML/Javascript
  2. Masukin Script pemanggil CSS ini ke Text Area HTML/Javascript tadi
        <div class="nav-container-outer" id='floatnav'>
        <ul id="nav-container" class="nav-container">
        <li><a class="item-primary" href="#">HOME</a>
        </li>
        <li><span class="divider divider-vert" ></span></li>
        <li><a class="item-primary" href="#">EDIT MENU</a>
        <ul style="width:150px;">
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        </ul></li>
        <li><span class="divider divider-vert" ></span></li>
        <li><a class="item-primary" href="#">EDIT MENU</a>
        <ul style="width:150px;">
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        <li><a href="#">EDIT SUB MENU</a></li>
        </ul></li>
        <li><a href="#">TOP</a></li>
        <li><a href="#footer">BOTTOM</a></li>
        </ul>
        </div>
  3. Simpan Deh...:D
Catatan : Untuk Tulisan TOP dan Bottom Bisa kamu ganti dengan gambar... dan untuk menu dan submenunya bisa kamu ganti atau kamu hapus dengan menumu sendiri.... ^^

Leave a Reply