基于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来完成设置背景图像这样的简单任务。