May 19, 2015

Transition Delay Menu

Transition Delay Menu

Menu items using CSS3 transition delay. This menu can be place any corners you want to with some slight changes in the code. On click of the menu the options gets visible one by one due to the transition delay that is taking place.

HTML

<div class="box">
  <a href="#"><div class="menu1"><i class="fa fa-home fa-2x"></i></div></a>
  <a href="#"><div class="menu2"><i class="fa fa-user fa-2x"></i></div></a>
  <a href="#"><div class="menu3"><i class="fa fa-code fa-2x"></i></div></a>
  <a href="#"><div class="menu4"><i class="fa fa-phone fa-2x"></i></div></a>
  <div class="mask"><i class="fa fa-bars fa-3x"></i></div>
</div>

CSS

body {
  background: -webkit-linear-gradient(90deg, #6c2d58 10%, #ad5290 90%);
  background: -moz-linear-gradient(90deg, #6c2d58 10%, #ad5290 90%);
  background: -ms-linear-gradient(90deg, #6c2d58 10%, #ad5290 90%);
  background: -o-linear-gradient(90deg, #6c2d58 10%, #ad5290 90%);
  background: linear-gradient(90deg, #6c2d58 10%, #ad5290 90%);
}

.box {
  top: 60px;
  left: 15px;
  position: fixed;
  display: block;
  width: 100px;
  height: 100px;
  background-color: transparent;
  border-radius: 50%;
  z-index: 20;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

.menu1 {
  width: 60%;
  height: 60%;
  background-color: #9f1d76;
  border-radius: 50%;
  position: absolute;
  color: white;
  text-align: center;
  line-height: 70px;
  top: 25%;
  left: 25%;
  z-index: 19;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  position: absolute;
}

.menu2 {
  width: 60%;
  height: 60%;
  background-color: #9f1d76;
  border-radius: 50%;
  position: absolute;
  color: white;
  text-align: center;
  line-height: 70px;
  top: 25%;
  left: 25%;
  z-index: 19;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .2s;
}

.menu3 {
  width: 60%;
  height: 60%;
  background-color: #9f1d76;
  border-radius: 50%;
  position: absolute;
  color: white;
  text-align: center;
  line-height: 70px;
  top: 25%;
  left: 25%;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .4s;
}

.menu4 {
  width: 60%;
  height: 60%;
  background-color: #9f1d76;
  border-radius: 50%;
  position: absolute;
  color: white;
  text-align: center;
  line-height: 70px;
  top: 25%;
  left: 25%;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .6s;
}

.mask {
  top: 60px;
  left: 15px;
  width: 100px;
  height: 100px;
  background: #590e41;
  border-radius: 50%;
  position: absolute;
  z-index: 21;
  color: white;
  text-align: center;
  line-height: 120px;
  cursor: pointer;
  position: fixed;
}

jQuery

$(document).ready(function() {

  var active1 = false;
  var active2 = false;
  var active3 = false;
  var active4 = false;

    $('.box').on('mousedown touchstart', function() {
    
    if (!active1) $(this).find('.menu1').css({'background-color': '#dd2aa4', 'transform': 'translate(0px,125px)'});
    else $(this).find('.menu1').css({'background-color': 'dimGray', 'transform': 'none'}); 
     if (!active2) $(this).find('.menu2').css({'background-color': '#dd2aa4', 'transform': 'translate(60px,105px)'});
    else $(this).find('.menu2').css({'background-color': 'darkGray', 'transform': 'none'});
      if (!active3) $(this).find('.menu3').css({'background-color': '#dd2aa4', 'transform': 'translate(105px,60px)'});
    else $(this).find('.menu3').css({'background-color': 'silver', 'transform': 'none'});
      if (!active4) $(this).find('.menu4').css({'background-color': '#dd2aa4', 'transform': 'translate(125px,0px)'});
    else $(this).find('.menu4').css({'background-color': 'silver', 'transform': 'none'});
    active1 = !active1;
    active2 = !active2;
    active3 = !active3;
    active4 = !active4;
      
    });
});

Attachments:

I have used external attachments.

http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

Note:

On your touch devices keep on touching the icon to see the options getting visible and hidden.

demo

No comments:

Post a Comment

Popular Posts

Views