Animated toolbar icons

0
6
Okunma

animated toolbar icon Animated toolbar icons

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');
});
//# sourceURL=pen.js
</script>

 

Sayfalar:

1 oy2 oy3 oy4 oy5 oy (2 Kişi oy verdi, 5 üzerinden ortalama puan: 5,00. Bu yazıya oy vermek ister misiniz?:(( )
Loading...
Önceki İçerikMobil tarayıcı rengi (Theme-color)
Sonraki İçerikMoving Sign Up Panel
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Lütfen yorumunuzu girin!
Please enter your name here