<div class="btn-grp container" id="svg-menu">
				<div>
					<input type="button" data-menu="1" class="active" value="Create" />
					<input type="button" data-menu="2" value="Edit" />
					<input type="button" data-menu="3" value="delete" />
				</div>
				<svg id="svg-path-list" xmlns="http://www.w3.org/2000/svg">
					<path id="paths" d="M 75 40 L120 40 C150 40 150 1 120 1 L30 1 C1 1 1 40 30 40 L75 40"></path>
					<path class="svg-grp" d="M 75 40 L120 40 C150 40 150 1 120 1 L30 1 C1 1 1 40 30 40 L75 40"></path>
					<path class="svg-grp" d="M 225 40 L270 40 C300 40 300 1 270 1 L180 1 C150 1 150 40 180 40 L225 40"></path>
					<path class="svg-grp" d="M 375 40 L420 40 C450 40 450 1 420 1 L330 1 C300 1 300 40 330 40 L375 40"></path>
				</svg>
			</div>








<div class="projHeader">
  <div class="primaryText">Button group </div>
  <div class="createdBy">Created By <a href="http://www.dropinks.com">Dropinks</a></div></div>
</div>

.container{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)}
svg{position: absolute; left: 0px; top: 0px; z-index: 1;}

.form-container{border: 1px solid #f9f9f9; display: inline-block;    padding: 15px; margin-bottom: 50px;}

input[type=number]{padding: 5px; font-size: 13px; width: 100px; box-sizing: border-box;    border: 1px solid #999;}
input[type=number]:focus{outline: none;}

.text-center{text-align: center;}
#submit_val{padding: 6px 10px;background: none;border: 1px solid #fff; margin-left: 10px; border-radius: 30px;color: #fff;font-size: 13px;cursor: pointer}
.msg{font-size: 13px; font-family: georgia;font-style: italic;color: #f9f9f9; margin-top: 10px; display: inline-block;}
.lbl{font-size: 18px; font-family: 'Open Sans', sans-serif;color: #f9f9f9;}
#menu_cnt{color: #fff; font-weight: 600;}

.btn-grp{
	position: relative; 
	display:inline-block;margin-bottom: 100px;
}
.btn-grp input[type=button]{
	position: relative;
	z-index: 2; 
	display: inline-block; 
	font-family: 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #fff; 
	padding: 12px 0px; 
	border: none; 
	text-align: center; 
	cursor: pointer;
	background: none;
	width: 148px;
	font-size: 16px;
}
.btn-grp input[type=button]:focus{
	outline: none;
}
svg{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}
svg{
	width: 100%;
}
path {
	fill: none;
	stroke: #fff;
	transition: stroke-dashoffset 1s cubic-bezier(0, 0.8, 0.2, 1);
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0, 0.8, 0.2, 1);
	-moz-transition: stroke-dashoffset 1s cubic-bezier(0, 0.8, 0.2, 1);
	stroke-width: 1;
}
#paths{
	stroke-dasharray: 314.1260070800781,100000; 
	stroke-dashoffset: 0px;
}
.svg-grp{
	opacity: 0.5;
}











html, body{
  width: 100%; 
  height: 100%; 
  font-family: 'Roboto', sans-serif;
}
body{
  margin: 0;
  background:#1abc9c;

}

.projHeader{position: absolute; left: 8%; top: 50%; transform: translateY(-50%);    border-right: 1px solid rgba(0,0,0,0.5);padding-right: 15px;}
.primaryText{font-weight: 300; font-size: 50px; text-shadow: 2px 2px 1px rgba(0,0,0,0.3);}
.secondaryText{font-weight: 300; text-align: right; font-size: 25px;}
.createdBy{font-weight: 300; text-align: right; font-size: 17px; margin-top :10px;}
.createdBy a{color: #000; text-decoration: none; border-bottom: 1px solid #000;}
.footer{position: absolute; right: 8%; top: 50%; transform: translateY(-50%); border-left: 1px solid rgba(0,0,0,0.5);padding-left: 15px;}
.footer a{display: inline-block; font-size: 17px; padding: 7px 0; color: #000; text-decoration: none; }


@media only screen and (max-width: 1200px) {
  .projHeader{position: static; transform: translate(0);}
.primaryText{font-weight: 300; font-size: 30px;text-align: center; margin-top: 10px;}
.secondaryText{font-weight: 300; text-align: center; font-size: 20px;}
  .createdBy{font-weight: 300; text-align: center; font-size: 17px; margin-top :5px;}
.createdBy a{color: #000; text-decoration: none; border-bottom: 1px solid #000;}

.footer{position: fixed; bottom: 0; right: auto; top: auto; left: 0; border-top: 1px solid rgba(0,0,0,0.5); width: 100%; transform: translate(0); border: none; padding: 0; text-align: center; border-top: 1px solid #bfc7e4;}
  .footer div{display: inline-block;}
.footer a{display: inline-block; font-size: 17px; padding: 7px 0; color: #000; text-decoration: none; margin: 0px 20px;}
}

var i=0;
var ht = 40;
var curve_sp = 30;
var each_wt = 150;
var menu_cnt = parseInt($(window).width()/each_wt);
$("#menu_cnt").text(menu_cnt);
var old_dash = parseFloat($("#paths").css("stroke-dashoffset"), 10);
$("#svg-menu").find("div input").on("click",function(){
	menuClick(this);
});
function menuClick(obj){
	var menuLi = $(obj).data("menu");
	var pathVal = $("#paths").attr("d");
	var act = $(".active").index()+1;
	var path = $('#paths').get(0);
	pathLen = path.getTotalLength();
	var length = menuLi * each_wt;
	var diff = $(obj).index() - $(".active").index();

	$("#svg-menu").find("div input").removeClass("active");
	$(obj).addClass("active");
	if(diff >= 0){
		var p1 = (menuLi * each_wt) - each_wt;
		var p2 = (menuLi * each_wt) - each_wt + curve_sp;
		var p3 = menuLi * each_wt - curve_sp;
		var p4 = (menuLi * each_wt);
		var p5 = p1+(each_wt/2);

		var p6 = (act * each_wt) - each_wt; 
		var p7 = (act * each_wt) - each_wt + curve_sp;
		var p8 = p6+each_wt;
		var p9 = p8 - curve_sp;

		temp = pathVal+ " L"+p9+" "+ht+" C"+p8+" "+ht+" "+p8+" 1 "+p9+" 1 L"+p7+" 1 C"+p6+" 1 "+p6+" "+ht+" "+p7+" "+ht+"  L"+p3+" "+ht+" C"+p4+" "+ht+" "+p4+" 1 "+p3+" 1 L"+p2+" 1 C"+p1+" 1 "+p1+" "+ht+" "+p2+" "+ht+" L"+p5+" "+ht;
		$("#paths").attr("d",temp);
		pathLen = old_dash - path.getTotalLength() + pathLen + 4;
		$("#paths").css({"stroke-dashoffset":pathLen});
	}
	else if(diff < 0){
		var p1 = (act * each_wt) - each_wt; 
		var p2 = (act * each_wt) - each_wt + curve_sp;
		var p3 = p1+(each_wt/2);
		var p4 = act * each_wt - curve_sp;
		var p5 = (act * each_wt); 
		var p6 = (menuLi * each_wt) - each_wt + curve_sp; 
		var p7 = (menuLi * each_wt) - each_wt; 
		var p8 = p7 + each_wt - curve_sp; 
		var p9 = p7 + each_wt; 
		var p10 = p7+(each_wt/2);
		temp = pathVal+ " L"+p2+" "+ht+" C"+p1+" "+ht+" "+p1+" 1 "+p2+" 1 L"+p4+" 1 C"+p5+" 1 "+p5+" "+ht+" "+p4+" "+ht+" L"+p6+" "+ht+" C"+p7+" "+ht+" "+p7+" 1 "+p6+" 1 L"+p8+" 1 C"+p9+" 1 "+p9+" "+ht+" "+p8+" "+ht+" L"+p10+" "+ht;
		$("#paths").attr("d",temp);
		pathLen = old_dash - path.getTotalLength() + pathLen;
		$("#paths").css({"stroke-dashoffset":pathLen});

	}
	old_dash = pathLen;
}

$("#submit_val").on("click",function(){
	var m_cnt = parseInt($("#m_cnt").val());
	if(m_cnt > $("#svg-menu").find("div input").length){
		var new_li = m_cnt - $("#svg-menu").find("div input").length;
		for(i=0; i< new_li;i++){
			var li_len = $("#svg-menu").find("div input").length + 1;
			var lis = $("<input>");
			lis.attr("data-menu",li_len);
			lis.attr("type","button");
			lis.val("Button "+li_len);
			$("#svg-menu div").append(lis);
			var p1 = li_len * each_wt;
			var p2 = li_len * each_wt - (each_wt/2);
			var p3 = p1 - each_wt;
			var p4 = p1 - curve_sp;
			var p5 = p3 + curve_sp;
			$("svg").append('<path class="svg-grp" d="M '+p2+' '+ht+' L'+p4+' '+ht+' C'+p1+' '+ht+' '+p1+' 1 '+p4+' 1 L'+p5+' 1 C'+p3+' 1 '+p3+' '+ht+' '+p5+' '+ht+' L'+p2+' '+ht+'"></path>')
				$("#svg-path-list").html($("#svg-path-list").html());
			lis.on("click",function(){
				menuClick(this);
			});

		}
	}
	else if(m_cnt < $("#svg-menu").find("div input").length){
			var rm_li = $("#svg-menu").find("div input").length - m_cnt;
			var rmv_bt = $("#svg-menu").find("div input").length-1;
			for(i=0; i< rm_li;i++){
				$("#svg-menu div").find("input").eq(rmv_bt).remove();
				rmv_bt = rmv_bt - 1;
			}
	}
});