Hi Willer,
I'm still on the same project, and I'm new to SS. There are a couple of questions if you are ok to help me.
1) I want put an <id> to each of the top menu items, because they are different shapes and in different locations. Also I need to apply a class for the secondary and third level menus of the fourth menu item due to float different direction (please see attached). How do I apply an <id> or a <class> to each menu item and implement silverstripe? I've been searching and only managed to apply either the first menu item or all the menu items have to be the same style. Please help.
2) I'm using lightbox with the third level menu link, I made everything work in html but lost in silverstripe. I put the links eg Requirements::javascript("mysite/javascript/jquery.lightbox-0.5.js"); in Page.php, but everytime I click on the third menu link, only the image pops up not the lightbox. Any ideas?
Here is my page.ss so far. Any of your help is greatly appreciated. Thank you very much Willr, and have a great weekend.
<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>