Jump to:

17452 Posts in 4473 Topics by 1971 members


SilverStripe Forums » Archive » nav rollovers and design/coding question

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

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

Page: 1
Go to End
Author Topic: 1773 Views
  • lauras2008
    Community Member
    5 Posts

    nav rollovers and design/coding question Link to this post

    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.)


  • banal
    Community Member
    901 Posts

    Re: nav rollovers and design/coding question Link to this post

    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 templates.

    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>

    /* 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...).

  • mschiefmaker
    Community Member
    187 Posts

    Re: nav rollovers and design/coding question Link to this post

    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.



  • Aram
    Community Member
    598 Posts

    Re: nav rollovers and design/coding question Link to this post

    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:

    <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:

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

Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.