sIFR 3 for Navigation

I couldn’t find any documentation on how to use sIFR for navigation but found plenty of forum posts about people using it (I’m sure I’m missing something).  So I thought I should make a quick note about how to use it.

sIFR replaces <li> tags to create a horizontal or vertical navigation.  I don’t know if <li> tags are the only way to do it?

<ul class="flash_nav">
<li><a id="menu_home" class="degradingLink left_menu" href="index.html">Home</a></li>
<li><a id="menu_diary" class="degradingLink left_menu" href="diary.html">Diary</a></li>
</ul>

And the CSS in the sifr-config.js goes

sIFR.replace(letter_gothic, {
selector: 'ul.flash_nav li',
css:    [
'.sIFR-root {color:#000000; cursor:pointer; text-decoration:none;}',
'a { color: #000000; text-decoration: none; }',
'a:link { color: #000000; text-decoration: none;}',
'a:hover { color: #666666; text-decoration: none;}',
]
});
Advertisements
    • Matt
    • March 10th, 2009

    Hey there.
    I just can’t seem to make this work. Is there anyway you could expand upon this? I don’t seem to have a sifr-config.js and I’ve never included that in any sites I’ve built.

    Cheers
    Matt

      • moefinley
      • March 13th, 2009

      This is using the latest version of sIFR – sIFR 3. Thanks for leaving the first ever comment on my blog 🙂 I didn’t expect anyone to read it, just notes for myself really.

  1. Have not found too much information on the internet regarding implementing siFR for ul/li navigations apart from viewing other websites view source, js & css so thanks for the information! Will try and implement myself!

      • moefinley
      • July 29th, 2009

      I’m glad you found it useful. I was in exactly the same position so I thought it wise to share what I’d found.

  2. thx for this tut, it worx great 🙂

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: