Menu

by hevercking

HTML

<link rel="stylesheet" href="http://hevernyx.ddns.net/projects/shakeandmake/css/jquery.fullPage.css">
<script src="http://hevernyx.ddns.net/projects/shakeandmake/js/jquery.fullPage.js"></script>
<script src="http://hevernyx.ddns.net/projects/shakeandmake/js/jQuery.WCircleMenu.js"></script>
<link rel="stylesheet" href="http://hevernyx.ddns.net/projects/shakeandmake/css/bootstrap.min.css">
<script src="http://hevernyx.ddns.net/projects/shakeandmake/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://hevernyx.ddns.net/projects/shakeandmake/css/center.css">

<!-- MENU -->
	<div class="barra">
	
		<div id="my-menu" class="" style="position: relative; width: 50px; height: 50px; margin:0px auto;">
			<div class="boton wcircle-icon">
				<div class="boton">
					<img id="btnn" width="35px" height="35px" src="http://hevernyx.ddns.net/projects/shakeandmake/images/btn.jpg" onmouseover="this.src='http://hevernyx.ddns.net/projects/shakeandmake/images/btn2.jpg'" onmouseout="this.src='http://hevernyx.ddns.net/projects/shakeandmake/images/btn.jpg'">
				</div>
			</div>
			<div class="wcircle-menu" style="display:none;">
				<div class="wcircle-menu-item" style="">
					<a href="https://www.facebook.com/Shake.and.Make.BCN" target="_blank"><img width="35px" height="35px" src="http://hevernyx.ddns.net/projects/shakeandmake/images/boton_redes_fb-1.png" onmouseover="this.src='images/boton_redes_fb-2.png'" onmouseout="this.src='http://hevernyx.ddns.net/projects/shakeandmake/images/boton_redes_fb-1.png'"></a>
				</div>
				
				<div class="wcircle-menu-item" style="">
					<a href="https://www.pinterest.com/shake_and_make/" target="_blank"><img width="35px" height="35px" src="./images/boton_redes_pinterest-1.png" onmouseover="this.src='http://hevernyx.ddns.net/projects/shakeandmake/images/boton_redes_pinterest-2.png'" onmouseout="this.src='http://hevernyx.ddns.net/projects/shakeandmake/images/boton_redes_pinterest-1.png'">
				</div>
				
				<div...

CSS

/* ESTO CENTRA EL DIV EN EL MEDIO*/
		.footer {
			background-color: #FFFFFF;
		    height: 15%;
		    padding: 0;
		    margin: 10%;
		    /* align-items: center; */
		    text-align: center;
		    justify-content: center;
		}
		
		a:hover{
			color: orange !important;
			text-decoration: none;
		}
		a{
			color: black !important;
			text-decoration: none;
		}
		
		.textlink{
			line-height: 4 !important;
		}
		
		.titlefoot{
			font-size: 36px !important;
			line-height: 2 !important;
		}

JavaScript

$(document).ready(function() {
			$('#fullpage').fullpage({
				verticalCentered: false,
				
				onLeave: function(index, nextIndex, direction){
					//leaving 1st section
					if(index == 1){
					   $('.barra').addClass('fixed');
					}
					//back to the 1st section
					if(nextIndex == 1){
						$('.barra').removeClass('fixed');
						pag = 'nextIndex';
					}
				},
				
				afterResize: function(){
					windowsHeight = $(window).height();
				}
				
				//to avoid problems with css3 transforms and fixed elements in Chrome, as detailed here: https://github.com/alvarotrigo/fullPage.js/issues/208
				//css3:false
			});
			
			
		});

$(document).ready(function(){
				$('#my-menu').WCircleMenu({
				  angle_start : -Math.PI/1.371,
				  delay: 50,
				  distance: 100,
				  angle_interval: Math.PI/6.5,
				  easingFuncShow:"easeOutBack",
				  easingFuncHide:"easeInBack",
				  step:15, // efecto al aparecer los iconos a mas bajo valor mas rapido aparece
				  openCallback:true,
				  closeCallback:true,
				  itemRotation:360,
				  iconRotation:180,
				});
			});