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.

Archive /

Our old forums are still available as a read-only archive.

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

nav rollovers and design/coding question


Reply


4 Posts   1816 Views

Avatar
lauras2008

Community Member, 5 Posts

22 October 2008 at 8:44am

I'm new to CMS and so maybe this is a totally stupid idea ... but I would like to use images for my main navigation instead of text. I want the nav rollover state to show up in a different language and I would probably need to use an image since most people won't have the correct language font installed on their computer.

Is this possible with SilverStripe?

Also I was impressed with the variety of designs that obviously don't use a template. How hard is it to code a site with a customized design? I know HTML very well but virtually no PHP. (Some CSS.)

Thanks,
LauraS.

Avatar
banal

Community Member, 901 Posts

22 October 2008 at 11:00am

Edited: 22/10/2008 11:03am

Hi LauraS

SilverStripe uses its own template Engine. It's really powerful and you can fully customize the look of your site with only little or no PHP knowledge.
You should probably have a look at the SilverStripe Tutorials or the documentation about [url=http://doc.silverstripe.com/doku.php?id=templates]templates[/url].

Creating image rollovers is not a problem really but you should remember, that search engines or screen readers can't read text in images. So it's always a good idea to have a text somewhere as well.

Usually i solve these kinds of problems somehow like this:

<!-- html code for navigation -->
<ul id="Navigation">
<li><a href="Link1" id="Item1"><span>Textual description 1</span></a></li>
<li><a href="Link2" id="Item2"><span>Textual description 2</span></a></li>
...
</ul>

/* CSS for navigation, in this case 200px wide, each item 30px high */
#Navigation { width:200px; }
#Navigation a { display:block; width:100%; height:30px; }
#Navigation a span { display:none; }
a#Item1 { background:url('link-to-image') no-repeat left top; }
a#Item1:hover { background-position:left center; }
a#Item1.current { background-position:left bottom; }
... etc.

As you can see, we prevent the text from showing by setting it's display property to 'none'. Rollover effects can easily be created by using a background image. If your navigation entry is 30 pixels high, you can create a image that is 60 or 90 pixels high and have all your navigation states in just one image (this reduces server requests and is convenient for designers). Something like this:

+-------- image --------+
| Normal state |
+-----------------------+
| Rollover state |
+-----------------------+
| Active state |
+-----------------------+

The stylesheet (above) simply moves the background image around for the different rollovers.
To get a unique ID for each navigation item, i suggest you use the $URLSegment (which is unique and should not change...).

Avatar
mschiefmaker

Community Member, 187 Posts

13 November 2008 at 9:08am

Hey Banal
I get what your doing but I wondering if there is a way to code so you don't have hardcode all the images in the CSS. My navigation file is:

<% control Menu(1) %>
<% if LinkOrSection = section %>
<img src="themes/purplewine/images/menu/{$URLSegment}navCurrent.gif" alt="$Title" />
<% else %>
<a href="$Link" title="Go to the $Title.XML page"> <img src="themes/purplewine/images/menu/{$URLSegment}nav.gif" /></a>
<% end_if %>
<% end_control %>

and I was wondering if I can put in some sort of rollover on the else statement ... I have tried but so far been an successful.

Thanks

MM

Avatar
Carbon Crayon

Community Member, 598 Posts

15 November 2008 at 3:02am

Edited: 15/11/2008 3:04am

Hi mschiefmaker

As far as I know if you are using html to make your navbutton images (i.e <img>) then the only way you can make a rollover is using javascript, google 'java rollover' and you should get lots of results, however IMO CSS is a much better way of doing it.

If you want to have dynamic images using CSS you can just put the style inline (in your template) so you would have something like:
Page.ss

<a href="$Link" style=" background: url('$image.URL') no-repeat left top;">$Title</a>

then in your CSS file you can do something like this:
Layout.css

a:hover {
background-position: center left;
}
a.current {
background-position: bottom left;
}