Based on jQuery and CSS3 supercool Material Design style sliding menu navigation effects, jquerycss3

Based on jQuery and CSS3 supercool Material Design style sliding menu navigation effects, jquerycss3

Share a very cool Google Material Design style jQuery and CSS3 sliding tab effect. This tab effect combines the flat style design and the click-wave special effect. It is a very good Material Design style. As follows:

Download Online Preview source code

Implementation code.

Hmtl code:

 <div class="htmleaf-container">        <br />        <br />        <br />        <div class="htmleaf-content bgcolor-3">            <ul>                <li>Tab One</li>                <li>Tab Two</li>                <li>Tab Three</li>                <li class="slider"></li>            </ul>        </div>        <script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>    </div>    <script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js"></script>    <script>        $("ul li").click(function (e) {            // make sure we cannot click the slider            if ($(this).hasClass('slider')) {                return;            }            /* Add the slider movement */            // what tab was pressed            var whatTab = $(this).index();            // Work out how far the slider needs to go            var howFar = 160 * whatTab;            $(".slider").css({                left: howFar + "px"            });            /* Add the ripple */            // Remove olds ones            $(".ripple").remove();            // Setup            var posX = $(this).offset().left,          posY = $(this).offset().top,          buttonWidth = $(this).width(),          buttonHeight = $(this).height();            // Add the element            $(this).prepend("<span class='ripple'></span>");            // Make it round!            if (buttonWidth >= buttonHeight) {                buttonHeight = buttonWidth;            } else {                buttonWidth = buttonHeight;            }            // Get the center of the element            var x = e.pageX - posX - buttonWidth / 2;            var y = e.pageY - posY - buttonHeight / 2;            // Add the ripples CSS and start the animation            $(".ripple").css({                width: buttonWidth,                height: buttonHeight,                top: y + 'px',                left: x + 'px'            }).addClass("rippleEffect");        });    </script>

Css code:

body {      font-family: 'Raleway', sans-serif;      /*background: #2C3E50;*/    }    ul {      font-size: 0;      position: relative;      padding: 0;      width: 480px;      margin: 40px auto;      -webkit-user-select: none;      -moz-user-select: none;      -ms-user-select: none;      user-select: none;    }    li {      display: inline-block;      width: 160px;      height: 60px;      background: #DA4453;      font-size: 16px;      text-align: center;      line-height: 60px;      color: #fff;      text-transform: uppercase;      position: relative;      overflow: hidden;      cursor: pointer;    }    .slider {      display: block;      position: absolute;      bottom: 0;      left: 0;      height: 4px;      background: #46CFB0;      -webkit-transition: all 0.5s;      transition: all 0.5s;    }    /*  Ripple */    .ripple {      width: 0;      height: 0;      border-radius: 50%;      background: rgba(255, 255, 255, 0.4);      -webkit-transform: scale(0);      -ms-transform: scale(0);      transform: scale(0);      position: absolute;      opacity: 1;    }    .rippleEffect {      -webkit-animation: rippleDrop .6s linear;      animation: rippleDrop .6s linear;    }     @-webkit-keyframes     rippleDrop {  100% {     -webkit-transform: scale(2);     transform: scale(2);     opacity: 0;    }    }     @keyframes     rippleDrop {  100% {     -webkit-transform: scale(2);     transform: scale(2);     opacity: 0;    }    }

Via: http://www.w2bc.com/Article/38841