Hi everyone,
Please see my last reply for updates, thank you very much.
Thanks for your great help in the past. I've appled some id and class to certain menu items due to different shape, location and secondary/thrid menu direction in html.
I did my first menu with Silverstripe, and it would apply only to the rest if there is no different id or class involve. I did some search but no direct link I could find. I have attached the picture I'm trying to achieve, and my code so far.
Can someone please point me to the right direction on how to code CMS to my menu? Thanks very much.
<body>
<div id="top">
<ul class="sf-menu">
<% control Menu(1) %>
<li id="area1">
<a href="#a">$MenuTitle</a>
<% if Children %>
<ul><% control Children %>
<li>
<a href="#aa">$MenuTitle</a>
<% if Children %>
<ul><% control Children %>
<li>
<a href="#aa">$MenuImg.SetSize(20,20) $MenuTitle</a>
</li>
<% end_control %>
</ul><% end_if %>
</li>
<% end_control %>
</ul><% end_if %>
</li>
<% end_control %>
<li id="area2">
<a href="#">Area 2</a>
<ul>
<li>
<a href="#">Store one</a>
<ul>
<li><a href="#">Store one-1</a></li>
<li><a href="#">Store one-2</a></li>
</ul>
</li>
<li>
<a href="#">Store Two</a>
<ul>
<li><a href="#">Store Two-1</a></li>
<li><a href="#">Store Two-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="test" >
<ul class="sf-menu sf-vertical">
<li id="area3">
<a href="#a"></a>
<ul>
<li class="current">
<a href="#ab">store 1</a>
<ul>
<li class="current">
<a href="/themes/tutorial/photos/image1.jpg" title="Adventure">
Adventure
</a>
</li>
<li>
<a href="photos/image2.jpg" title="Cats">
Cats </a>
</li>
</ul>
</li>
</ul>
</li>
<li id="area4">
<a href="#">area4</a>
<ul class="show_left">
<li>
<a href="#">Store one</a>
<ul class="show_left">
<li><a href="#">Store one-1</a></li>
<li><a href="#">Store one-2</a></li>
</ul>
</li>
<li>
<a href="#">Store Two</a>
<ul class="show_left">
<li><a href="#">Store Two-1</a></li>
<li><a href="#">Store Two-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="Content" class="typography">
$Form
</div>
</body>