Silverstripe Image Based Menu

Question

I would like to create a image and text menu in Sliverstripe as shown here:

I was thinking to have jquery select an individual ID and replace the background image. How ever Silverstripe gives me the menu as you see below. How can I go about setting up this menu?

Output

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

Template File

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

Thanks.

Answer 1

this should be pretty easy, in SilverStripe templates you can do anything you can do in normal HTML. With additional variables and features of course.

so, you can simply give the items a ID or a css class. let me show you an example:

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

you see, I added position-$Pos which will become position-1, position-2, and so on.
also, I added an ID, in this case, it will be the URLSegment of that page. so now you can use CSS or javascript to get that item, eg here some CSS to set a background:

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

in in any javascript code you can of course do the same (in your case the framework jquery):

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

however, I strongly urge you to use CSS, there is no reason for using javascript to do a simple task like setting a background image.