Animated toolbar tasarımı

Merhaba arkadaşlar çok uzun süredir  siteye  içerik eklemiyordum,  eklemeye fırsat bulamıyordum desem daha doğru olur aslında. Bundan sonra mümkün olduğu kadar yeni ve güncel içerikler eklemeye devam etmeye  daha fazla  çaba göstereceğim sizler  için.

Uzun bir süre  ara verdikten sonra sizler  için paylaşacağım ilk yazı  yine  her zaman olduğu gibi  webtasarımla alakalı bir yazı. jQuery ve Css  kullanılarak yapılmış  oldukça kullanışlı bir  toolbar örneği. Tasarım örneğimizde ikonlar Font Awesome, tıklandığında  menünün açılması jQuery ve diğer  bölümler de Css  ile  hazırlanmış.

Kullanım:

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

Css:

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Lato');

body {
  background-color: #F2F3F4; 
}

#wrapper {
  text-align:center;
  font-family: 'Lato', sans-serif;
  text-transform:uppercase;
}

h1 {
  padding-top:30px;
  font-size:25px;
  letter-spacing:15px;
  color: #3AB09E;
}

#toolbar {  
  width:100%;
  max-width:670px;
  min-width:550px;
  margin: 70px auto;
}

.button {
  width:70px;
  height:70px;
  border-radius:50%;
  background-color:#3AB09E;
  color:#ffffff;
  text-align:center;
  font-size:3.5em;
  position:relative;
  left:50%;
  margin-left:-35px;
  z-index:1;
}

.button,.icons{
  -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);
          transition:  all 1s cubic-bezier(.87,-.41,.19,1.44);
}

.button:after {
  content:"+";
}

.button.active {
-webkit-transform: rotate(45deg);
 transform: rotate(45deg);
  left:60px;
}


.icons {
  width:0%;
  overflow:hidden;
  height:36px;
  list-style:none;
  padding:16px 10px 10px 50px;
  background-color:#ffffff;
  box-shadow: 1px 1px 1px 1px #DCDCDC;
  margin:-68px 0 0 45%;
  border-radius: 2em;
}

.icons.open {
  width:80%;
  margin:-68px 0 0 5%;
  overflow:hidden;
}

.icons li {
  display: none;
  width:10%;
  color:#3AB09E;
}

.icons.open li {
  width:16%;
  display: inline-block;
  text-decoration: none;
  color:#3AB09E;
text-decoration-color: currentColor
}
.icons.open a {
  width:16%;
  display: inline-block;
  text-decoration: none;
  color:#3AB09E;
}

</style>

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

Html-jQuery;

 <div id="wrapper">
   <h1>Animated toolbar</h1>
<div id="toolbar">
  <div class="button"></div>
  <ul class="icons">
    <li><a href="#"><i class="fa fa-home fa-2x" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-user fa-2x" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-star fa-2x" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-paper-plane-o fa-2x" aria-hidden="true"></i></a></li>
  </ul>
 
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script>$('.button').click(function () {
    $(this).toggleClass('active');
    $('.icons').toggleClass('open');
});
</script>