我今天在网上遇到了一个有用的人提供的一些代码，这些代码非常适合我试图添加到我的网站的东西。我有这个人提供的所有相关代码，但我不太清楚如何在我的 Wordpress 支持的网站中正确实施它。
演示页面显示正确使用 -> http://www.akshitsethi.me/labs/slidepanel/
本质上，我所做的就是将他们的 CSS 完全复制到我的 CSS 文件的末尾（稍后我会根据自己的喜好对其进行编辑）。我已将脚本代码完全复制到我的 header.php 文件中，除了手动编辑脚本代码中的链接以准确指向我上传到主题文件夹的 .js 文件。我已经获取了有关 DIV 的 HTML 代码并将其放入一个 slider.php 文件中，我已经告诉我的 header.php 文件包括...
我真正需要帮助的是弄清楚为什么这不起作用。总之，CSS 是精确的，SCRIPT 代码被复制到我的 header.php 中，而 HTML 被复制到一个 slider.php 中——除了 a href="#panel"，我打算将它粘贴到某个页面上。难道我做错了什么？
如果有人可以帮助我弄清楚如何在我的网站上使用它，我将不胜感激。我正在使用的测试网站是http://test.vtisvc.com。主页内容区域中的“菜单”链接理论上应该是打开和关闭面板。显然，由于在slider.php中包含面板DIV，标题被搞砸了，我相信
slider.php 中的 HTML
<div id="panel" class="hide">
<h4>MENU</h4>
<ul class="menu">
<li>
<a href="#">News Feed</a>
</li>
<li>
<a href="#">Friends</a>
</li>
<li>
<a href="#">Nearby</a>
</li>
<li>
<a href="#">Messages</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">Photos</a>
</li>
<li>
<a href="#">Notes</a>
</li>
<li>
<a href="#">Pokes</a>
</li>
</ul>
</div>
header.php 中的 HTML，在 HEAD 标记关闭之前
<script type="text/javascript" src="http://test.vtisvc.com/wp-content/themes/brk_2013/js/jquery.min.js"></script>
<script type="text/javascript" src="http://test.vtisvc.com/wp-content/themes/brk_2013/js/jquery.pageslide.js"></script>
<script type="text/javascript">
$(".open").pageslide({ direction: "right", modal: true });
</script>
header.php 中的 HTML，在开始的 BODY 标记之后
<?php
include ('slider/slider.php');
?>
主页上的 HTML
<a href="#panel" class="open highlight strong">Menu</a>
CSS
#pageslide {
/*
* Required. Do not modify these.
*/
display: none;
position: absolute;
position: fixed;
top: 0;
height: 100%;
z-index: 999999;
/*
* Optional. You can tweak these as per your preference.
*/
width: 200px;
padding: 20px;
background-color: #fafafa;
color: #666;
-webkit-box-shadow: 0 0 3px 3px #efefef;
-moz-shadow: 0 0 3px 3px #efefef;
box-shadow: 0 0 3px 3px #efefef;
}