I would like to be able to affect the sidebar menu using CSS. How is this possible?
Basically, what I want to do is have a picture/graphic represent the menu 1 items (possibly menu 2) and be able to change out the image based on user interaction such as click.
I know how to accomplish the css part of setting the image, but I can figure out how to know what the id is of each menu 1 or menu 2.
Menu 1
submenu 2
submenu 2
Menu 1
submenu 2
submenu 2
Here is my sidebar.ss code:
<div id="Sidebar" class="typography">
<div class="sidebarBox">
<ul>
<% control Menu(1) %> <!-- Level I -->
<li class="$LinkingMode"><a href="$Link" target="_self">$MenuTitle.XML</a><br />
<% if LinkOrSection = section %>
<% if Children %> <!-- Level II -->
<ul class="submenu{$MenuCount}">
<% control Children %>
<li class="mlevel2"><a href="$Link" title="Go to the $Title.XML page">$MenuTitle</a></li>
<% if LinkOrSection = section %> <!-- Level III -->
<% if Children %>
<ul class="submenu{$MenuCount}">
<% control Children %>
<li><a href="$Link" title="Go to the $Title.XML page">$MenuTitle</a></li>
<% end_control %>
</ul>
<% end_if %>
<% end_if %>
<% end_control %>
</ul>
<% end_if %>
<% end_if %>
</li>
<% end_control %>
</ul>
<div class="clear"></div>
<div id="sidebarSearch">$Searchform</div>
</div>
</div>