汉堡菜单在 WordPress 网站上不起作用答案

【问题标题】：Hamburger Menu Not Working On WordPress Site汉堡菜单在 WordPress 网站上不起作用
【发布时间】：2016-03-31 02:14:37
【问题描述】：

这是我的网站： drawyourpets.com

我按照这里的教程进行操作：http://www.internetkultur.at/simple-hamburger-drop-down-menu-with-css-and-jquery/，但不幸的是，我的汉堡菜单始终可见（它应该只在 0-780 像素范围内可见）并且它不起作用。

我将 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 {

所以我不确定我做错了什么或者我需要做些什么来解决它。如果您有任何想法，请告诉我。谢谢！

【问题讨论】：

标签： php jquery css wordpress hamburger-menu

【解决方案1】：

<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”后面添加这个

【讨论】：

你这是什么意思？我需要将 javascript.js 更改为 jquery.js 吗？ - 我试过了，什么也没发生。
/js/javascript.js
对不起，我仍然对“'javascript.js'需要'jquery.js'”感到困惑这是否意味着我将您建议的代码放在@Farizdev建议的代码之后像这样？
可以在“footer.php”中添加“javascript.js”
你知道这条路吗？

【解决方案2】：

不，您只需包含一个 jQuery 文件。添加这个：

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

在你的 javascript.js 之上

【讨论】：

“在你之上的 javascript.js”是什么意思？这是否意味着我写这个？
是的，如果您在这里遇到任何错误，请尝试并再次发布：)