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.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Template Questions /

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

Affecting Sidebar with CSS


Go to End


2 Posts   2030 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.