Menu Keren Dengan Icon, Snipping Dan jQuery Untuk Blogger

Tweet

Menu Keren Dengan Icon, Snipping Dan jQuery Untuk Blogger - D-Copy Blog | Hai sobat blogger kali ini kita akan membahas menu yang menggunakan icon, snipping gambar dan jQuery yang sangat keren yang bisa Anda gunakan untuk menu Anda tentunya. Pada menu-menu sebelumnya yang telah kami berikan kepada Anda, yaitu : Menu Dropdown v1 dan v2, Menu Dropdown Melayang v1 dan v2, Menu Elegan, Menu Bar dan Menu Vertikal Sidebar yang kami pilih untuk Anda nikmati.

DEMO | DOWNLOAD ICON

(Download Dahulu Lalu Upload Untuk Mendapatkan URL)

Langkah :

1. Buka akun Blogger Anda
2. Masuk ke menu edit HTML, jangan lupa centang Expand Template Widget
3. Cari kode dibawah ini :

]]></s:kin>

    4.  Pastekan kode dibawah ini, diatas pada kode diatas :

.menu{
    width:800px;
    height:52px;
    position:relative;
    top:200px;
    left:100px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
}
.item{
    position:relative;
    background-color:#f0f0f0;
    float:right;
    width:52px;
    margin:0px 5px;
    height:52px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}
.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
.icon_home{
    background:transparent url(URL Icon HOME yang telah Anda Upload) no-repeat top left;
}
.icon_mail{
    background:transparent url(URL Icon MAIL yang telah Anda Upload) no-repeat top left;
}
.icon_help{
    background:transparent url(URL HELP HOME yang telah Anda Upload) no-repeat top left;
}
.icon_find{
    background:transparent url(URL Icon FIND yang telah Anda Upload) no-repeat top left;
}
.icon_photos{
    background:transparent url(URL Icon PHOTOS yang telah Anda Upload) no-repeat top left;
}
.item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}

     5.  Cari kode dibawah ini :

</head>

     6.  Pastekan kode dibawah ini, diatas pada kode diatas :

$('.item').hover(
    function(){
        var $this = $(this);
        expand($this);
    },
    function(){
        var $this = $(this);
        collapse($this);
    }
);
function expand($elem){
    var angle = 0;
    var t = setInterval(function () {
        if(angle == 1440){
            clearInterval(t);
            return;
        }
        angle += 40;
        $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
    },10);
    $elem.stop().animate({width:'268px'}, 1000)
    .find('.item_content').fadeIn(400,function(){
        $(this).find('p').stop(true,true).fadeIn(600);
    });
}
function collapse($elem){
    var angle = 1440;
    var t = setInterval(function () {
        if(angle == 0){
            clearInterval(t);
            return;
        }
        angle -= 40;
        $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
    },10);
    $elem.stop().animate({width:'52px'}, 1000)
    .find('.item_content').stop(true,true).fadeOut()
          .find('p').stop(true,true).fadeOut();
}

Catatan : Untuk peletakkan menu ini, Anda bisa membuatnya dimana saja yang Anda suka. Anda bisa membuat didalam widget HMTL atau didalam HTML Template Anda dengan mencari kode ini masing-masing :

• <header id='header-wrapper'>

          Untuk diatas header

• <div id='content-wrapper'>

          Untuk dibawah header

      7.  Pastekan kode dibawah ini, pada penempatan yang telah Anda inginkan :

<div class="menu">
    <div class="item">
        <a class="link icon_mail"></a>
        <div class="item_content">
            <h2>Contact us</h2>
            <p>
                <a href="#">eMail</a>
                <a href="#">Twitter</a>
                <a href="#">Facebook</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_help"></a>
        <div class="item_content">
            <h2>Help</h2>
            <p>
                <a href="#">FAQ</a>
                <a href="#">Live Support</a>
                <a href="#">Tickets</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_find"></a>
        <div class="item_content">
            <h2>Search</h2>
            <p>
                <input type="text"></input>
                <a href="">Go</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_photos"></a>
        <div class="item_content">
            <h2>Image Gallery</h2>
            <p>
                <a href="#">Categories</a>
                <a href="#">Archives</a>
                <a href="#">Featured</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_home"></a>
        <div class="item_content">
            <h2>Start from here</h2>
            <p>
                <a href="#">Services</a>
                <a href="#">Portfolio</a>
                <a href="#">Pricing</a>
            </p>
        </div>
    </div>
</div>

Keterangan :

• Ganti HTML diatas sesuai dengan yang Anda inginkan.

Catatan :

•  Menu ini disarankan untuk bagi yang sudah mengerti dalam HTML.

     8.  Save template Anda.

Terima kasih, semoga bermanfaat.

Sumber artikel : http://tympanus.net/codrops/2010/04/30/rocking-and-rolling-rounded-menu-with-jquery/