3D Görünümlü Yan Menü

   Font awesome css adresi :

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

Head etiketleri arasına aşağıda ki CSS kodlarını ekleyin.

body {
background-color:#CCCCCC; 
}
ul.cerceve {
   width:300px;
   height:auto;
   margin: 1px auto;
}
li.menuBox {
   width:300px;
   height:60px;
   overflow:hidden;
   position:relative;
   display:block;
   float:left;
   margin:0.3%;  
   -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
     -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
}
li.menuBox .primaryBox {
   width:300px;
   height:60px;
   position:relative;
   display:block;
   -webkit-transform-origin: 50% 100%;
   -moz-transform-origin: 50% 100%;
   -ms-transform-origin: 50% 100%;
   -o-transform-origin: 50% 100%;
   transform-origin: 50% 100%;
   -webkit-transform: perspective(900px) rotateX(0deg);
   -moz-transform: perspective(900px) rotateX(0deg);
   -ms-transform: perspective(900px) rotateX(0deg);
   -o-transform: perspective(900px) rotateX(0deg);
   -transform: perspective(900px) rotateX(0deg);
   -webkit-transition:0.3s;
   -moz-transition:0.3s;
   -ms-transition:0.3s;
   -o-transition:0.3s;
   transition:0.3s; 
}
li.menuBox:hover .primaryBox {
    margin-top:-60px;
   -webkit-transform: perspective(900px) rotateX(90deg);
   -moz-transform: perspective(900px) rotateX(90deg);
   -ms-transform: perspective(900px) rotateX(90deg);
   -o-transform: perspective(900px) rotateX(90deg);
   -transform: perspective(900px) rotateX(90deg);
   -webkit-transition:0.3s;
   -moz-transition:0.3s;
   -ms-transition:0.3s;
   -o-transition:0.3s;
   transition:0.3s; 
}
 
li.menuBox  .secondaryBox {
   width:300px;
   height:60px;
   position:relative;
   display:block;   
   background-color:#999999;
    -webkit-transform-origin: 50% 0%;
   -moz-transform-origin: 50% 0%;
   -ms-transform-origin: 50% 0%;
   -o-transform-origin: 50% 0%;
   transform-origin: 50% 0%;
   -webkit-transform: perspective(900px) rotateX(-90deg);
   -moz-transform: perspective(900px) rotateX(-90deg);
   -ms-transform: perspective(900px) rotateX(-90deg);
   -o-transform: perspective(900px) rotateX(-90deg);
   transform: perspective(900px) rotateX(-90deg);
   -webkit-transition:0.3s;
   -moz-transition:0.3s;
   -ms-transition:0.3s;
   -o-transition:0.3s;
   transition:0.3s; 
}
li.menuBox:hover .secondaryBox {
   background-color:#fff;
   -webkit-transform: perspective(900px) rotateX(0deg);
   -moz-transform: perspective(900px) rotateX(0deg);
   -ms-transform: perspective(900px) rotateX(0deg);
   -o-transform: perspective(900px) rotateX(0deg);
   transform: perspective(900px) rotateX(0deg);
}
li.menuBox a{
   text-decoration:none;
   font-size:50px;
   margin-left:7px;
   margin-top:5px;
   display:block;
   float:left;
   position:absolute;
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}
li.menuBox p{
   text-decoration:none;
   font-size:50px;
   margin-left:50px;
   margin-top:-50px;
   display:block;
   position:absolute;
   float:right;
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

Body etiketleri arasına eklenecek HTML kodları:

<ul class="cerceve">
  <li class="menuBox">
    <div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-android"><p>Android</p></i></a></div>
    <div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-android"><p>Android</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-apple"><p>Apple</p></i></a></div>
    <div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-apple"><p>Apple</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-windows"><p>Windows</p></i></a></div>
    <div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-windows"><p>Winows</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-linux"><p>Linux</p></i></a></div>
    <div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-linux"><p>Linux</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-youtube"><p>Youtube</p></i></a></div>
    <div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-youtube"><p>Youtube</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-skype"><p>Skype</p></i></a></div>
    <div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-skype"><p>Skype</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-github"><p>Github</p></i></a></div>
    <div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-github"><p>Github</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-html5"><p>Html5</p></i></a></div>
    <div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-html5"><p>Html5</p></i></a></div>  
  </li>
  <li class="menuBox">
    <div class="primaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-dropbox"><p>Dropbox</p></i></a></div>
    <div class="secondaryBox"><a href="http://etralibela-61.blogspot.com/?p=14854"><i class="fa fa-dropbox"><p>Dropbox</p></i></a></div>  
  </li>
</ul>

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!