0

我了解 jPanelMenu ( http://jpanelmenu.com ) 旨在轻松设计和定制。

我尝试向 HTML 添加一个 jPanelMenu-panel 类，如下所示：

<div class="section group jPanelMenu-panel">       
     <div class="menu-trigger">Click Me</div>
     <ul id="menu" style="display: none;">
         <li><a href="/">Overview</a></li>
         <li><a href="#usage">Usage</a></li>
         <li><a href="#inner-workings">Inner-Workings</a></li>
         <li><a href="#animation">Animation</a></li>
         <li><a href="#options">Options</a></li>
         <li><a href="#api">API</a></li>
         <li><a href="#tips">Tips &amp; Examples</a></li>
         <li><a href="#about">About</a></li>
     </ul>                                
</div>

并将 .jPanelMenu-panel 类添加到 CSS 中，如下所示：

.jPanelMenu-panel {
    background-color: black;
}

看看有没有什么变化。我尝试添加自己的课程，看看是否有任何变化。

好消息是我有了最新版本的 jQuery，这要归功于 h5bp，并且我已经包含了以下标签：

<script type="text/javascript" src="js/jquery.jpanelmenu.js"</script>

正确，因为滑块菜单在我的页面上确实有效。我单击“单击我”文本，滑块菜单按预期显示，根本没有样式。

我的目标是让样式与 jpanelmenu.com 上的菜单类似，并从那里开始。

我知道这应该是一件简单的事情，但我迷路了。

我在这里先向您的帮助表示感谢！

4

2 回答 2

2

您缺少开始<script>标签末尾的 > 。

<script type="text/javascript" src="js/jquery.jpanelmenu.js"></script>
------------------------------------------------------------^

你是对的，因为菜单按预期工作，你的浏览器可能会自动修复这个问题......我认为问题可能是如果默认样式覆盖了你添加的额外样式......尝试更改主 CSS 文件。

编辑

您对下面的 CSS 片段是正确的

.jPanelMenu-panel {
    background-color: black;
}

但是，这可能会在您可能已经链接的默认 CSS 文件中被覆盖（使用网络检查器时您将能够看到这一点）。如果是这样，请尝试更改此主文件中的样式。

于 2013-02-10T18:12:27.857 回答
1

jPanelMenu 使用SASS（一种 css 预处理器）进行样式设置。在最新版本的 jPanelMenu (1.3.0) 中有一个名为“Sass”的文件夹，您可以在其中找到各种 .scss 文件。文件名以下划线开头的称为部分，它们以样式导入。scss文件，稍后编译为样式。css（链接到您的 html 文件的那个）

从部分文件名中可以​​看出，每个文件名都代表“footer”、“content”、“jPanelMenu”、“reset”。您可以简单地编辑这些部分并将生成的 style.css 链接到您的 html。

有关 sass 的更多信息，请查看我在上面提供的链接以及Sass 参考。如果您熟悉 CSS，应该不难理解它。

体验和设计您的 jPanelMenu 的乐趣！

于 2013-04-24T08:53:40.500 回答