Ring – Dönme animasyonu ile açılan yan-menü tasarımı

0
109
Okunma

ringmenu1 Ring   Dönme animasyonu ile açılan yan menü tasarımı

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>

 

 

 

 

CEVAP VER

Lütfen yorumunuzu girin!
Please enter your name here