2016-03-31 78 views
1

这里是我的网站: drawyourpets.com汉堡菜单不工作WordPress站点

我也跟着教程这里:http://www.internetkultur.at/simple-hamburger-drop-down-menu-with-css-and-jquery/,但不幸的是我的汉堡包菜单总是可见的(这只是应该是从0-780px visisble)和它不起作用。

我将HTML代码中的代码复制并粘贴到header.php中。教程中的代码从div class =“mobile nav”开始,以各个div结束。我还添加了

<script src="javascript.js"></script> 

将header.php链接到本教程的JavaScript代码。 Javascript.js已上传到儿童主题。

<?php 
/** * Header template * * @package Portfolio Press */?> 
<!DOCTYPE html> 
<html <?php language_attributes(); ?>> 
<head> 
<meta charset="<?php bloginfo('charset'); ?>"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="profile" href="http://gmpg.org/xfn/11"> 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>"> 

<script src="javascript.js"></script> 

<!--[if lt IE 9]> 
<script src="<?php echo esc_url(get_template_directory_uri() . 
'/js/html5.js'); ?>"> 
</script><![endif]--> 

<?php wp_head(); ?></head><body <?php body_class(); ?>><div id="page"> 
<header id="branding"> 
<div class="col-width"> 
<?php $heading_tag = (is_home() || is_front_page()) ? 'h1' : 'div'; ? 
>   

<div class="logo">    
<a href="<?php echo esc_url(home_url('/')); 
?> 
"rel="home">      
<img src="<?php echo esc_url(portfoliopress_get_option('logo')); ? 
>" alt="<?php echo bloginfo('name') ?>"> 
</a>    
</div>   

<div class="site-description">    
<h1 id="pets">DRAW YOUR PETS</h1>    
<h3 id="italic">-The Creative Side- 
</h2>   
</div>   
<div class="clear clearfix"> 
</div>   
<div class="site-navigation primary-navigation" role="navigation"> 

<div class="mobile-nav"> 
<div class="menu-btn" id="menu-btn"> 
<div></div> 
<span></span> 
<span></span> 
<span></span> 
</div> 

<div class="responsive-menu"> 
    <ul> 
     <li><a href="http://drawyourpets.com/"> 
     HOME</a> 
     </li> 
     <li> 
     <a href="http://drawyourpets. 
     com/index.php/audio/"> 
     AUDIO 
     </a> 
     </li> 
     <li><a href="http://drawyourpets.com/index.php/video-3/"> 
     VIDEO 
     </a> 
     </li> 
     <li> 
     <a href="http:// 
     drawyourpets.com/index.php/other/"> 
     OTHER</a> 
     </li> 
     </ul> 
    </div> 
</div> 

<?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class'| 
=> 'nav-menu')); ?>   

</div> 
<div id="main">  
<div class="site-wrapper"> 

除此之外,我只是说从教程中的CSS到我的子主题的样式表与此媒体查询它上面:

@media screen and (min-width: 780px) .menu-btn div { 

所以我不知道我做错了或我需要做些什么来解决它。如果您有任何想法,请告知我。谢谢!

回答

2
<script src="javascript.js"></script> 

首先,路径是错误的; 404;

<script src="<?php bloginfo('template_url'); ?>/js/javascript.js"></script> 

bloginfo('template_url');这是你的主题路径,你可以将javascript.js上传到相应的路径

其次,“javascript.js”需要“jquery.js”;所以你必须把它添加到“jquery.js”后面

+0

你是什么意思?我是否需要将javascript.js更改为jquery.js? - 我试过了,什么都没有发生。 – HappyHands31

+0

http://adriennecoleman.drawyourpets.com/javascript.js这是你的js,404 –

+0

你必须加上正确的路径 –

1

不,你只是包含一个jQuery文件。补充一点:

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> 

你上面的javascript.js

+0

你是什么意思“上面你javascript.js”? 这是否意味着我写了这个? <?php bloginfo('template_url'); ?>/JS/JavaScript的。js“> – HappyHands31

+1

是的,只要尝试一下,并再次发布,如果你有任何错误在这里:) – filosofikode