Silverstripe 基于图像的菜单

Question

我想在 Sliverstripe 中创建一个图像和文本菜单，如下所示：

我正在考虑让 jquery 选择一个单独的 ID 并替换背景图像。 Silverstripe 给了我如下所示的菜单。我该如何设置这个菜单？

输出

<ul>
<li class="current">
<a title="video" href="/cfl/index.php/">Home</a>
</li>
<li class="link">
<a title="alarm" href="/cfl/index.php/about-us/">About Us</a>
</li>
<li class="link">
<a title="auto" href="/cfl/index.php/contact-us/">Contact Us</a>
</li>
</ul>

模板文件

<nav class="primary">
    <span class="nav-open-button">²</span>
    <ul>
        <% loop $Menu(1) %>
            <li class="$LinkingMode"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li>
        <% end_loop %>
    </ul>
</nav>

谢谢。

Answer 1

这应该很容易，在 SilverStripe 模板中，您可以做任何在普通 HTML 中可以做的事情。当然还有其他变量和功能。

所以，您可以简单地给项目一个 ID 或一个 css 类。 让我给你举个例子：

<nav class="primary">
    <span class="nav-open-button">²</span>
    <ul>
        <% loop $Menu(1) %>
            <li class="$LinkingMode position-$Pos" id="$URLSegment"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li>
        <% end_loop %>
    </ul>
</nav>

你看，我添加了position-$Pos，它将变成position-1、position-2，等等。
另外，我添加了一个 ID，在这种情况下，它将是该页面的 URLSegment。 所以现在您可以使用 CSS 或 javascript 来获取该项目，例如这里一些 CSS 来设置背景：

.position-1 { background: green; }
.position-2 { background: yellow; }
.position-3 { background: blue; }

// we can also use the ID to style the element:
#home { 
    display: block; 
    width: 100px; 
    height: 100px; 
    background-image: url(http://placehold.it/100x100); 
}

在任何 javascript 代码中，你当然可以做同样的事情（在你的情况下是框架 jquery）：

jQuery(document).ready(function($) {
    $('.position-1').hover(function() {
         alert('you moved over the first item');
    });
});

但是，我强烈建议您使用 CSS，没有理由使用 javascript 来完成设置背景图像之类的简单任务。