Redirect Open Navigation

by Lorena Brito

HTML

<script src="https://raw.githubusercontent.com/neochapay/icms-usermaps/master/components/usermaps/js/jQueryRotateCompressed.2.2.js.part"></script>
<div id="container">
    <div id="navOuter">
        <iframe name="iFrame" width="500" height="500" style="cursor:none" frameborder="0" src="http://jellywrench.com/"></iframe>
      
        <div id="navArea">
        
            <div id="navShow">
                <img id='more-rot' src="http://www.clker.com/cliparts/8/7/Y/H/W/e/up-arrow-circle-hi.png" width="81" height="82"/>
            </div><!-- end of navShow -->
            
            <div id="navBar" style="display:none;">
                <ul class="nav" >
                    <li><a href="https://www.thinkwithgoogle.com/" target="iFrame">Second</a></li>
                    <li><a href="https://www.lookout.com/" target="iFrame">Third</a></li>

                </ul>
            </div>
        
      </div>
    </div>
</div>

CSS

body {
	margin: 0 0;
	font-family: 'Lato', sans-serif;
	color: #FFFFFF;
	overflow: hidden;
	cursor: none;
}

::selection {
	background-color:transparent;	
}

a:link,
a:hover,
a:active,
a:visited {
	cursor:none;
	font-family: 'Lato', sans-serif;	
}

.nav li:hover{
	background-color: rgba(253,206,14, 0.8);
	padding-top:11px;
	padding-bottom:8px;
	color:#646464 !important;
}

#navOuter {
	width: 1920px;
	height: 1080px;
	
}
#navArea {
	position: relative;
	top: -83px;
	/*top: -135px;*/
}
#navShow {
	width: 500px;
	text-align: center;
}
#navShow img {
	position: relative;
	top:1px;
	left: -15px;	
}
#navBar {
	height: 153px;
	width: 500px;
	background-color: blue;
	/*opacity: 0.9;*/
	background-repeat: repeat-x;
	border-top: 5px solid #FFF;
}

.nav, 
.nav a:link, 
.nav a:visited {
	font-size: 35px;
	line-height: 35px;
	color: #646464;
	text-decoration: none;
	text-align: center;
	padding: 10px 0;
}
ul.nav {
	list-style: none;
	margin-left: -40px;
	margin: auto, 0;
	background-color:rgba(255, 255, 255, 0.9)
}
ul.nav li {
	display: inline;
	padding: 0 40px;
}
ul.nav li img {
	position: relative;
	top: 5px;
	padding-right: 10px;
}

#more-rot {
	rotation-point: 50% 50%;
	rotation: 360deg;
}

JavaScript

$('#navArea').css('top', '-141px');
	$('#navBar').css('display', 'block');

	$('#navShow img').click(function() {
		if ($('#navBar').is(':hidden')) {
			$('#navBar').show();
			$('#navArea').animate({
				top: '-=53px'
			}, 400);
		} else {
			$('#navBar').fadeOut();
			$('#navArea').animate({
				top: '+=53px'
			}, 400);
		}
	});
	
	var value = 0
	$("#more-rot").rotate({ 
	   bind: 
		 { 
			click: function(){
				value +=180;
				$(this).rotate({ animateTo:value})
			}
		 } 
	   
	});

//        //KEEPS TRACK OF PAGE INACTIVITY
//        var idleTime = 0;
    
//        //Increment the idle time counter every sec.
//        var idleInterval = setInterval(timerIncrement, 1000); // 1 minute
        
//        //Zero the idle timer on mouse movement.
//        $(this).mousemove(function (e) {
//            idleTime = 0;
            //console.log('The mouse moved. RESET idleTime!');
//        });
//        $(this).mousemove(function (e) {
//            idleTime = 0;
            //console.log('The screen was touched. RESET idleTime!');
//        });
//        $(this).keypress(function (e) {
//            idleTime = 0;
            //console.log('A key was pressed. RESET idleTime!');
//        });
        
        //REDIRECTS PAGE TO HOMESCREEN AFTER TIME IS EXCEEDED 	
//        function timerIncrement() {
//            idleTime = idleTime + 1;
//            if (idleTime > 5) { 
                //HTTP REDIRECT
//                window.location.href = "http://jellywrench.com/";
//            }
//        }