Yuvarlak tıklandığında açılan/ kaybolan menü – MobilyBlock

Google+ sitesi çıkar çıkmaz şüphesiz  en dikkat çekici özelliği arkadaş ekleme ve silme bölümüydü. Benim için  bir oyun gibiydi adeta. Sürekli arkadaşları bir gruptan başka bir gruba ekler dururdum. Ara sıra yanlışlıkla sildiğim de olurdu. Çok güzel animasyonlar eklenmiş bir tasarım örneğiydi ve mouse ikonların üzerine geldiği anda sayfada görünmeyen ikonlar dönerek açılıp görünen ikonun etrafını çevriyorlardı.

MobilyBlock uygulamasının geliştiricisi de bundan esinlenerek herkesin bu tarz tasarımlar kullanabilmesi için bir uygulama geliştirmiş. Demo sayfasında da göreceğiniz gibi iki adet örnek bulunuyor. Bir tanesi sosyal medya ikonlar için hazırlanmış diğeri de bir nevi resim galeri niteliğinde hazırlanmış. Hayal gücünüzü zorlayarak bunun gibi yüzlerce çalışma hazırlayabilmeniz  mümkün. Özellikle web sayfasında animasyonlar olmasını isteyen ve animasyon severlerin arşivinden kesinlikle eksik etmemesi gereken bir jQuery eklentisidir.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="js/mobilyblocks.js" type="text/javascript"></script>

JavaScript :

$(function () {
    $('.socials').mobilyblocks();
    $('.nature').mobilyblocks({
        trigger: 'hover',
        direction: 'counter',
        duration: 500,
        zIndex: 50,
        widthMultiplier: 1.15
    });
});

Stil kodları : 

body {
    font-family:Arial, Helvetica, sans-serif;
    background:#F1F1F1;
}
 #content {
    margin:170px auto;
    width:400px;
}
.socials {
    display:block;
    width:32px;
    height:32px;
    background:url(../img/socials/share.png) no-repeat;
    cursor:pointer;
    position:relative;
    float: left;
}
.nature {
    display:block;
    width:150px;
    height:150px;
    background:url(../img/nature/img1.png) no-repeat;
    cursor:pointer;
    position:relative;
    float: right;
}
.nature {
    margin:0 auto;
}
.socials {
    margin:70px auto;
}
.socials {
    margin-bottom:50px;
}
ul.reset, ul.reset li {
    display:block;
    list-style:none;
    padding:0;
    margin:0;
}
ul.reset li {
    position:absolute;
}
ul.reset li a {
    outline:none;
}
a {
    color:#fff;
}
a img {
    border:none;
}

• Body etiketleri arasına eklemeniz gereken bölümler.

Html kodları :

Sosyal medya ikonlarının kodu :

<div class="socials">
    <ul class="reset">
        <li><a href="#"><img src="img/socials/delicious.png" alt="" /></a>
        </li>
        <li><a href="#"><img src="img/socials/digg.png" alt="" /></a>
        </li>
        <li><a href="#"><img src="img/socials/google.png" alt="" /></a>
        </li>
        <li><a href="#"><img src="img/socials/stumbleupon.png" alt="" /></a>
        </li>
        <li><a href="#"><img src="img/socials/technorati.png" alt="" /></a>
        </li>
        <li><a href="#"><img src="img/socials/twitter.png" alt="" /></a>
        </li>
    </ul>
</div>

Resimli çalışmanın kodu :

<div class="nature">
    <ul class="reset">
        <li><a href="#"><img src="img/nature/img2.png" alt="" /></a>
        </li>
        <li><a href="#"><img src="img/nature/img3.png" alt="" /></a>
        </li>
        <li><a href="#"><img src="img/nature/img4.png" alt="" /></a>
        </li>
        <li><a href="#"><img src="img/nature/img5.png" alt="" /></a>
        </li>
        <li><a href="#"><img src="img/nature/img6.png" alt="" /></a>
        </li>
        <li><a href="#"><img src="img/nature/img2.png" alt="" /></a>
        </li>
        <li><a href="#"><img src="img/nature/img3.png" alt="" /></a>
        </li>
    </ul>
</div>