ringmenu

Saf Css3  kullanılarak hazırlanmış  olan bir menü örneği.  Menü örneği ilk bakışta sadece orta kısımda bulunan kategori ikonunun içinde olduğu daire şekli görünüyor. Mouse ile dairenin içine girildiği an diğer görünmeyen dört daire dönerek ve büyüyerek orta dairenin etrafını çevreliyor.

Görünüş olarak fazla yer kaplamayan bu menü örneğine Font Awesome yardımıyla rastgele bir kaç çeşit ikon ekledim. Menüye bakıldığında bir arkadaşlık sitesine ait kategoriler görünüyor. Daha fazla ikon seçeneğine buradan ulaşabilirsiniz. İkonları değiştirmek için tek yapmanız gereken menü html kodları içinde  bulunan span class=”icon-list” kısmına ikon adı eklemek.  Icon-list Font Awesome üzerinde kategori ikonunu gösteriyor. Bunu icon-facebook yada icon twitter olarak değiştirmeniz menü örneğini sosyal ağlar için kullanılabilir bir menüye dönüştürmenize yarar.

 

Kullanım

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

Font Awesome adresi :

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Css :

ul , li {
  margin: 0;
  padding: 0;
}

.ringMenu {
  position: absolute;
  left: 40%;
  top: 200px;
  width: 100px;
  height: 30px;
  margin-bottom: 10px;
}

.ringMenu:hover {
  padding: 30px 30px;
  margin: -30px -30px;
}
.ringMenu ul {
  list-style: none;
  position: relative;
  width: 100px;
  color: white;
}
.ringMenu ul a {
  color: white;
}
.ringMenu ul li {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ringMenu ul li a {
  display: block;
  width: 100px;
  height: 100px;
  background: rgba(50,50,50,0.7);
  text-align: center;
  line-height: 105px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  text-decoration:none;
  font-size:40px;

}
.ringMenu ul li a:hover {
  background: rgba(230,150,20,0.7);
}

.ringMenu ul li:not(.main) {
  -webkit-transform: rotate(-180deg) scale(0);
  -moz-transform: rotate(-180deg) scale(0);
  -o-transform: rotate(-180deg) scale(0);
  transform: rotate(-180deg) scale(0);
  opacity: 0;
}
.ringMenu:hover ul li {
  -webkit-transform: rotate(0) scale(1);
  -moz-transform: rotate(0) scale(1);
  -o-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
  opacity: 1;
}
.ringMenu ul li.top {
  -webkit-transform-origin: 50% 152px;
  -moz-transform-origin: 50% 152px;
  -o-transform-origin: 50% 152px;
  transform-origin: 50% 152px;
  position: absolute;
  top: -102px;
  left: 0;
}
.ringMenu ul li.bottom {
  -webkit-transform-origin: 50% -52px;
  -moz-transform-origin: 50% -52px;
  -o-transform-origin: 50% -52px;
  transform-origin: 50% -52px;
  position: absolute;
  bottom: -102px;
  left: 0;
}
.ringMenu ul li.right {
  -webkit-transform-origin: -52px 50%;
  -moz-transform-origin: -52px 50%;
  -o-transform-origin: -52px 50%;
  transform-origin: -52px 50%;
  position: absolute;
  top: 0px;
  right: -102px;
}
.ringMenu ul li.left {
  -webkit-transform-origin: 152px 50%;
  -moz-transform-origin: 152px 50%;
  -o-transform-origin: 152px 50%;
  transform-origin: 152px 50%;
  position: absolute;
  top: 0;
  left: -102px;
}
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class="ringMenu">
<ul>
  <li class="main"><a href="#main"><span class="icon-list"></span></a></li>
  <li class="top"><a href="#top"><i class="icon-gamepad"></i></a></li>
  <li class="right"><a href="#right"><span class="icon-music"></span></a></li>
  <li class="bottom"><a href="#bottom"><span class="icon-envelope-alt"></span></a></li>
  <li class="left"><a href="http://mintik.com/?p=13556"><span class="icon-group"></span></a></li>
</ul>
</div>

 

 

 

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • sahra:

    Güzel ve basit kullanım. Oldukça işime yarayacak....

  • isimsiz:

    Senin sitenden buyurindir.org sitemize köpek gibi link çıkışı yapılmış?...

  • fhghg:

    YouPhpTube scriptini kullanan hazır bi site var mı peki varsa ismi nedir?...

  • Ali:

    Eski butonlarda sorun vardı diye yenilerini ekledim. Acaba sende hala eski buto...

  • HASBA:

    hocam nasıl alıcam demoya indire başıyorum hiç birşey olmuyor...

  • Araç çubuğuna atla