Question

我理解jPanelMenu（http://jpanelmenu.com）应该很容易设计和定制。

我尝试将jPanelMenu-panel类添加到HTML中，如下所示：

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

查看是否有任何变化。我已经尝试添加自己的类，看看是否有任何变化。

好消息是，由于h5bp，我有最新版本的jQuery，并且我已经包含以下标记：

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

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

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

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

提前感谢您的帮助！

Answer 1

你错过了＆gt;在开头<script>标记的末尾。

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

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

修改

你的CSS片段是正确的

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

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

Answer 2

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

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

有关sass的更多信息，请查看我上面提供的链接以及Sass Reference。如果你熟悉CSS，那么你应该很难理解它。

为jPanelMenu做好实验和造型！

如何设计jPanelMenu？

2 个答案: