Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions /

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba

Affecting Sidebar with CSS


Go to End
Reply


2 Posts   1700 Views

Avatar
TerryMiddleton

Community Member, 108 Posts

18 April 2009 at 4:21am

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>

Avatar
Hamish

Community Member, 712 Posts

23 April 2009 at 10:51am

I would like to be able to affect the sidebar menu using CSS. How is this possible?

Have a look at your Layout.css file in your current theme directory. Scroll down to the menu styling - it should get you started. If you don't have a Layout.css file, have a look at the blackcandy theme Layout.css file for a good example of menu styling.

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.

Google around for some css styling tips and rollover effects. A rollover effect is achievable with the css :hover selector, other interactions like clicks will require javascript. These are independant of silverstripe, so you might get more luck at a css or scripting forum for specific solutions.