Question

我试图将此codepen实施到静态wordpress html主页中。

这是我的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>

此外，我在与上述页面相同的目录中创建了一个文件夹splash_assets，其中包含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;
        }
    });
});

和splash.css文件：

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;
}

不幸的是，我的结果is not working喜欢它。我在Chrome控制台中收到错误

Uncaught ReferenceError: jQuery is not defined

有什么想法，有什么不对？

Answer 1

要解决您的错误，请尝试输入：

<script src="<?php echo get_template_directory_uri(); ?>/splash_assets/mynewmenu.js"></script>

在脚本标记包含jQuery脚本之后，在</head>之上。

jQuery是一个jQuery变量，您在定义它之前就已经使用它了。

编辑：（感谢Muntashir Akon）：

然后，OP出现了这个错误：Uncaught TypeError: m.easing[this.easing] is not a function

谷歌的替换他自己的jQuery文件解决了OP的问题。

静态html页面不正常

1 个答案: