I have a situation trying to implement this codepen into a static wordpress html home page.
this is my page-splash.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My sweet new splash page</title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/splash_assets/splash.css">
<script type="text/javascript" src="http://www.neuegrid.com/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript" src="http://www.neuegrid.com/wp-includes/js/jquery/ui/core.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/splash_assets/mynewmenu.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="http://www.neuegrid.com/">Home</a></li>
<li><a href="http://www.neuegrid.com/portfolio">Portfolio</a></li>
<li><a href="http://www.neuegrid.com/about-us/">About</a></li>
</ul>
<div id='menuRight'>
<div>
Home
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg' />
</div>
<div>
Portfolio
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'/>
</div>
<div>
About
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'/>
</div>
</div>
</nav>
</body>
</html>
Also I've created a folder splash_assets in the same dir as the above mentioned page, containing mynewmeny.js:
// mynewmenu implementation
jQuery(function($){
var height, index, prevIndex;
$('nav ul li').mouseover(function(e){
//Set the aesthetics (similar to :hover)
$('nav ul li').removeClass('hovered');
$(this).addClass('hovered');
//Gets relevant data required for scrolling of menuRight
height = $("#menuRight").css("height").replace('px','');
index = $(this).index();
//If the category button (from the navlist) has changed
if (index != prevIndex){
$("#menuRight").stop();
$("#menuRight").animate({"scrollTop":height*index}, 800, 'easeOutBounce'); //This requires jQuery UI for easing options.
prevIndex = index;
}
});
});
and splash.css file:
body {
font: normal 1.0em Arial, sans-serif;
background: #A8CBFF;
}
nav {
font-size: 3.0em;
line-height: 1.0em;
color: white;
width:5em;
height: 9.0em;
position:absolute;
top:0; bottom:0;
margin:auto;
left: 0.5em;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
background-color: blue;
height: 1.0em;
padding: 0.15em;
position: relative;
border-top-right-radius: 0em;
border-bottom-right-radius: 0em;
-webkit-transition: -webkit-transform 200ms, background-color 200ms, color 200ms;
transition: transform 200ms, background-color 200ms, color 200ms;
}
nav ul li:nth-child(1) { background-color: gold;}
nav ul li:nth-child(2) { background-color: gold;}
nav ul li:nth-child(3) { background-color: gold;}
nav ul li.hovered {
background-color: black;
-webkit-transform: translateX(2.5em);
transform: translateX(2.5em);
}
nav ul li span {
display:block;
font-family: Arial;
position: absolute;
font-size:1em;
line-height: 1.25em;
height:1.0em;
top:0; bottom:0;
margin:auto;
right: 0.01em;
color: #F8F6FF;
}
a {
color: #FFF;
text-decoration: none;
}
/*new*/
#menuRight{
height:800px;
width:600px;
overflow:hidden;
position:relative;
left:450px;
top:-210px;
}
#menuRight div{
height:100%;
}
#menuRight img{
width:100%;
height:auto;
}
Unfortunately, my result is not working like it should. I've received an error in the Chrome console
Uncaught ReferenceError: jQuery is not defined
Any thoughts, what's wrong?
